UX development – Drupaljam 2015

767 views

Published on

UX development presentatie, gegeven op Drupaljam 2015. Proces en tools om design en development beter op elkaar af te stemmen

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
767
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • This is our job. Find the best fit solution in the overlap.
  • Hoe vind je die overlap? Ik doorloop eerst in vogelvlucht het strategische process voor digital product design.
  • Introducing the double diamond:
    Proudly found elsewhere.

    Voordat je een oplossing kunt leveren moet je eerst weten wat nou precies de vraag is.
  • So when we talk about user experience design, we first focus on clearly framing the question.

    Define first, execute second.
  • For definition, it’s important to know what the initial insight is that justifies this project.

    The definition phase ends with a plan

    On which we execute towards a shippable product.
  • Why are these diamond shapes?
    Discovery and Design are exploratory, generating multiple options
    Define and Develop are focussed, converging on the best path forward
  • Discover, Define, Design & Develop

    These four phases are the high-level steps we work through when designing your site, application, product.
  • So lets look at each phase in a bit more detail and see what the activities and deliverables are
  • Discover phase is about answering some important questions in a couple domains
  • Market: A lot of this information often already exists within the organisations. Bring it all together so that the team can build a shared understanding of the playing field.

    It’s often in the ‘Customer’ part that we can help clarify the goals and needs of people by developing personas. Based on interviews, surveys and workshops we create archetypes of your customers.

    User feedback = talk with customer service, what are the top recurring issues?

    Analytics = what kind of useful data can we glean from analytics, demographics, prior surveys etc.

    Value proposition: what is the value promise and how will your customers experience that value was delivered


    what will make your offering unique and how will it provide value to people? Which high-level features do you need to fulfil that promise?
  • With clarity on market context, customer needs and product strategy we can start defining the plan.

    This is where we start making the strategy concrete.
  • Concept: look and feel, based on brand guidelines and personas

    Experience: principles are guidelines for making design decisions further down the road

    Engagement metrics: what will we measure to know we are successful?

    Content:
    A message architecture is a hierarchy of communication goals. It might be a concise outline of five attributes, each with sub-bullets that clarify meaning and add color. These key messages are derived from mission, vision and the actual product strategy.
  • Definition is there. Time to start executing!
  • We’re in divergent, exploratory mode again

    Visual: based on the approved concept, design the necessary componentes

    Interactive prototyping is an important part of what makes our approach unique: The succes of an interactive product is largely defined by how well it supports the users in achieving their goals. How well can users work through a sequence of screens?

    It’s about the interactions and that’s why we prefer dynamic, responsive prototypes over static wireframes. Prototypes are easier to share, understand and give meaningful feedback on. And prototypes can be tested with the target audience.
  • Because reality is responsive, we don’t create stacks of full-page layouts in photoshop. Instead we build a style guide of flexible & reusable components.

    Where necessary, we support in creating the necessary content (text, photography, illustrations, info-graphics, audio, video…)

    Code: the content model is important input for the backend architecture. The frontend takes care of implementing the visual design responsively and enables smooth transitions from one screen to the next.
  • In definition, design makes strategy concrete
    In execution, design supports engaging, delightful experiences

    So, that’s the whole process in overview…

    En zo zie je maar weer, wat je vanuit dev perspectief het voortraject noemt, is voor de klant wellicht *het* traject.
  • Je zag veel stappen en daar horen veel soorten deliverables bij. Ik licht er een paar uit. Gekozen op potentieel voor samenwerking tussen design en development.
  • Recap design part: Form, Function, Content
  • Won’t be talking about the Form part today…
  • So what can we do (besides wireframes and spec docs etc.) to get a better shared understanding of the project and what we want to build?
  • Short text document:
    Project objective: clearly states what the project aims to accomplish. This is key. May sound obvious but the client is not necessarily clear on this right from the start.
    Personas: who do we build this for?
    Scenarios: what will these people want to do?
    Design principles: how do we want it to work and
  • Short text document:
    Project objective: clearly states what the project aims to accomplish. This is key. May sound obvious but the client is not necessarily clear on this right from the start.
    Personas: who do we build this for?
    Scenarios: what will these people want to do?
    Design principles: how do we want it to work and
  • It’s all about the content.
    Sitemaps define high-level structure & information hierarchy
    Wireframes show the collected information on individual pages. Alas, often more a visual briefing than a useful way to document where all that content comes from.
    So, content models to the rescue
  • Clients, stakeholders are often still thinking about ‘pages’.
    Try to avoid using that word.
  • It’s all about the content.
    Sitemaps define high-level structure & information hierarchy
    Wireframes show the collected information on individual pages. Alas, often more a visual briefing than a useful way to document where all that content comes from.
    So, content models to the rescue
  • Vaak zitten klanten nog vast in het ‘pagina’ model.

    Eerste stap is dan ook om daar uit proberen los te komen. Die pagina’s (I prefer ‘screens’)

    Vergeet dus niet duidelijk te maken dat dat echt een ding is, dat je verschillende content types kunt hebben.

    Dat je per content type verschillende velden kunt hebben

    En dat je relaties tussen de typen kunt definiëren
  • Het mooie is dat je van heel globaal naar heel gedetailleerd kunt gaan.
  • Start simple so that all client team members can agree on fundamentals.
    More details better captured in spreadsheets.
    Content types are a core Drupal concept, so this should be familiar. Ask your UX architect about these!
  • Zorg er voor dat je de juiste vorm gebruikt voor de juiste doelgroep.
  • Wireframes, sitemaps etc, zijn Plaatjes Van Het Ding
    Prototypes zijn Het Ding zelf.
  • Wireframes en sitemaps zijn abstracties, het zijn plaatjes van het ding.

    Prototypes zijn het ding zelf.
  • Er van uitgaande dat je HTML/JS prototypes maakt…
  • Als mensen het gewoon op hun eigen telefoontje of tablet kunnen gebruiken, da’s wel heel fijn.

    Creeert weer meer betrokkenheid.
  • Je komt niet weg met Lorem Ipsum
  • Usability testing FTW
  • De wireframes en de sitemap moeten meestal van “de designer” komen.

    Prototypes zijn team effort. In prototypes komen vorm, functie en content samen, dus die experts werken samen aan dezelfde deliverable.
  • We can all do with less meetings.
  • Discover, Define, Design & Develop

    These four phases are the high-level steps we work through when designing your site, application, product.
  • Ook uw designer weet het niet allemaal
  • UX development – Drupaljam 2015

    1. 1. UX development Roy Scholten, Drupaljam 2015
    2. 2. Business DesignTechnology
    3. 3. Process
    4. 4. Definition Execution Double Diamond
    5. 5. Define the right problem/ opportunity Find the right solution Definition Execution
    6. 6. Define the right problem/ opportunity Find the right solution Plan ShipInsight Definition Execution
    7. 7. Define Design DevelopDiscover Plan ShipInsight Definition Execution Define the right problem/ opportunity Find the right solution
    8. 8. Define Design DevelopDiscover Plan ShipInsight Diverge DivergeConverge Converge Definition Execution
    9. 9. Define the right problem/ opportunity Define Design Find the right solution DevelopDiscover Definition Execution Plan ShipInsight
    10. 10. In more detail
    11. 11. Discover Frame the opportunity: “Why?” ‣ Market ‣ Customer ‣ Product strategy
    12. 12. Discover Market ‣ Who are the competitors? ‣ How do they differentiate? ‣ Market trend analysis Customer ‣ Persona ‣ User feedback ‣ Analytics Product strategy ‣ Value proposition ‣ Elevator pitch ‣ Prioritisation Frame the opportunity: “Why?”
    13. 13. Define Formulate the plan: “What?” ‣ Visual & interaction concept ‣ Experience strategy ‣ Content strategy ‣ Technical analysis
    14. 14. Define Concept ‣ Design mockups ‣ Customer journey maps ‣ Scenarios (epics) Experience ‣ Design principles ‣ Engagement metrics Content ‣ Key messages ‣ Messaging architecture Formulate the plan: “What?”
    15. 15. Design Deliver the optimal solution: “How?” ‣ Design exploration ‣ Interactive prototyping ‣ Content modelling
    16. 16. Design Form ‣ Sketching ‣ Storyboards ‣ Style tiles Function ‣ Wireframes ‣ Interactive prototyping ‣ Usability testing Content ‣ Sitemap ‣ Content modelling Deliver the optimal solution: “How?”
    17. 17. Develop Deliver the optimal solution: “How?” ‣ Detailed design ‣ Content production ‣ Code
    18. 18. Develop Design ‣ Detailed mockups ‣ Component based style guides Content ‣ Content production Code ‣ Backend (content model) ‣ Frontend (visual design and interactions) Deliver the optimal solution: “How?”
    19. 19. Design makes strategy concrete Define Design Design supports engaging experiences DevelopDiscover Definition Execution Plan ShipInsight
    20. 20. Tools
    21. 21. Design Form ‣ Sketching ‣ Storyboards ‣ Style tiles Function ‣ Wireframes ‣ Interactive prototyping ‣ Usability testing Content ‣ Sitemap ‣ Content modelling Deliver the optimal solution: “How?”
    22. 22. Define Design Develop Form Function Content Design
    23. 23. Define Design Develop Form Function Content UX development Design & development
    24. 24. Creative brief Prototype Content model
    25. 25. Creative brief
    26. 26. Creative brief: making sure that everybody is working on the same project
    27. 27. Creative brief Define Design Develop Form Function Content
    28. 28. Short form creative brief ‣ Project objective ‣ Personas ‣ Scenarios ‣ Design principles
    29. 29. Short form creative brief ‣ Objective = Why. What are the business goals? ‣ Personas = Who. Target audience ‣ Scenarios = What. What do people want to achieve? ‣ Principles = How. The values that drive how it will work
    30. 30. Content model
    31. 31. Content model: a formal representation of structured content as a collection of content types & their inter- relationships.
    32. 32. Content model Define Design Develop Form Function Content
    33. 33. It’s not about pages
    34. 34. Content model
    35. 35. Content model ‣ Different content types ‣ Fields per content type ‣ Relationships between types
    36. 36. Training & Events Industry topics Resource library Consumer topics News AboutContact
    37. 37. Training & Events Industry topics Position papers Facts & Figures Topic Success stories Position papers Topic Success stories Position papers Facts & Figures Topic Resource library Facts & Figures Re- sources Videos Info- graphics Market data Case studies Slides Consumer topics Article Success stories Video Article Success stories Video Article Video Article News Blog News-letters Industry news About Staff JobsContact
    38. 38. Content model
    39. 39. ndustry topics Resource library Consumer topics News About Content model Concept Design Implement
    40. 40. Resources Prototype
    41. 41. Prototype: an early sample, model or release of a product, built to test a concept or process or to act as a thing to be learnt from
    42. 42. Prototype Define Design Develop Form Function Content
    43. 43. Static deliverables are static
    44. 44. Why prototype?
    45. 45. Easier to understand = better feedback
    46. 46. Responsive!
    47. 47. Share the URL, use it on your own device
    48. 48. Forces you to use real content, working links
    49. 49. Prototypes can be tested
    50. 50. Prototyping is a team sport
    51. 51. Dus!
    52. 52. Define Design DevelopDiscover Plan ShipInsight Double Diamond Define the right problem/ opportunity Find the right solution
    53. 53. UX development Work together to fill the gaps
    54. 54. Instead of (only) wireframes…
    55. 55. UX development Creative brief Content model Prototype
    56. 56. Dankuwel
    57. 57. Resources ‣ Content modelling ‣ Short form creative brief ‣ UX checklist on github ‣ Usability rules of thumb ‣ The Pragmatic Designer’s 10 Things ‣ Books & more books ‣ All photos via New Old Stock

    ×