UX development – Drupaljam 2015
Download as PPTX, PDF2 likes988 views
The document outlines the UX development process as discussed by Roy Scholten at DrupalJam 2015, emphasizing a structured approach to defining problems, exploring solutions, and delivering optimal designs. It highlights the importance of creating a comprehensive creative brief, understanding content models, and utilizing prototyping as a means of gathering feedback. The central framework is based on the Double Diamond methodology, which guides the entire design and development workflow.
UX development – Drupaljam 2015
- 3. Process
- 5. Define the right problem/ opportunity Find the right solution Definition Execution
- 6. Define the right problem/ opportunity Find the right solution Plan ShipInsight Definition Execution
- 7. Define Design DevelopDiscover Plan ShipInsight Definition Execution Define the right problem/ opportunity Find the right solution
- 8. Define Design DevelopDiscover Plan ShipInsight Diverge DivergeConverge Converge Definition Execution
- 9. Define the right problem/ opportunity Define Design Find the right solution DevelopDiscover Definition Execution Plan ShipInsight
- 10. In more detail
- 11. Discover Frame the opportunity: “Why?” ‣ Market ‣ Customer ‣ Product strategy
- 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. Define Formulate the plan: “What?” ‣ Visual & interaction concept ‣ Experience strategy ‣ Content strategy ‣ Technical analysis
- 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. Design Deliver the optimal solution: “How?” ‣ Design exploration ‣ Interactive prototyping ‣ Content modelling
- 16. Design Form ‣ Sketching ‣ Storyboards ‣ Style tiles Function ‣ Wireframes ‣ Interactive prototyping ‣ Usability testing Content ‣ Sitemap ‣ Content modelling Deliver the optimal solution: “How?”
- 17. Develop Deliver the optimal solution: “How?” ‣ Detailed design ‣ Content production ‣ Code
- 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. Design makes strategy concrete Define Design Design supports engaging experiences DevelopDiscover Definition Execution Plan ShipInsight
- 20. Tools
- 21. Design Form ‣ Sketching ‣ Storyboards ‣ Style tiles Function ‣ Wireframes ‣ Interactive prototyping ‣ Usability testing Content ‣ Sitemap ‣ Content modelling Deliver the optimal solution: “How?”
- 23. Define Design Develop Form Function Content UX development Design & development
- 25. Creative brief
- 26. Creative brief: making sure that everybody is working on the same project
- 27. Creative brief Define Design Develop Form Function Content
- 28. Short form creative brief ‣ Project objective ‣ Personas ‣ Scenarios ‣ Design principles
- 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. Content model
- 31. Content model: a formal representation of structured content as a collection of content types & their inter- relationships.
- 32. Content model Define Design Develop Form Function Content
- 33. It’s not about pages
- 34. Content model
- 35. Content model ‣ Different content types ‣ Fields per content type ‣ Relationships between types
- 36. Training & Events Industry topics Resource library Consumer topics News AboutContact
- 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. Content model
- 39. ndustry topics Resource library Consumer topics News About Content model Concept Design Implement
- 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
- 44. Why prototype?
- 45. Easier to understand = better feedback
- 46. Responsive!
- 47. Share the URL, use it on your own device
- 48. Forces you to use real content, working links
- 50. Prototyping is a team sport
- 52. Dus!
- 53. Define Design DevelopDiscover Plan ShipInsight Double Diamond Define the right problem/ opportunity Find the right solution
- 54. UX development Work together to fill the gaps
- 56. UX development Creative brief Content model Prototype
- 57. Dankuwel
- 58. 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
Editor's Notes
- #3: This is our job. Find the best fit solution in the overlap.
- #4: Hoe vind je die overlap? Ik doorloop eerst in vogelvlucht het strategische process voor digital product design.
- #5: Introducing the double diamond: Proudly found elsewhere. Voordat je een oplossing kunt leveren moet je eerst weten wat nou precies de vraag is.
- #6: So when we talk about user experience design, we first focus on clearly framing the question. Define first, execute second.
- #7: 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.
- #9: Why are these diamond shapes? Discovery and Design are exploratory, generating multiple options Define and Develop are focussed, converging on the best path forward
- #10: Discover, Define, Design & Develop These four phases are the high-level steps we work through when designing your site, application, product.
- #11: So lets look at each phase in a bit more detail and see what the activities and deliverables are
- #12: Discover phase is about answering some important questions in a couple domains
- #13: 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?
- #14: 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.
- #15: 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.
- #16: Definition is there. Time to start executing!
- #17: 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.
- #19: 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.
- #20: 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.
- #21: 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.
- #22: Recap design part: Form, Function, Content
- #23: Won’t be talking about the Form part today…
- #24: 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?
- #29: 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
- #30: 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
- #32: 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
- #34: Clients, stakeholders are often still thinking about ‘pages’. Try to avoid using that word.
- #35: 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
- #36: 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
- #37: Het mooie is dat je van heel globaal naar heel gedetailleerd kunt gaan.
- #39: 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!
- #40: Zorg er voor dat je de juiste vorm gebruikt voor de juiste doelgroep.
- #44: Wireframes, sitemaps etc, zijn Plaatjes Van Het Ding Prototypes zijn Het Ding zelf.
- #46: Wireframes en sitemaps zijn abstracties, het zijn plaatjes van het ding. Prototypes zijn het ding zelf.
- #47: Er van uitgaande dat je HTML/JS prototypes maakt…
- #48: Als mensen het gewoon op hun eigen telefoontje of tablet kunnen gebruiken, da’s wel heel fijn. Creeert weer meer betrokkenheid.
- #49: Je komt niet weg met Lorem Ipsum
- #50: Usability testing FTW
- #51: 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.
- #52: We can all do with less meetings.
- #54: Discover, Define, Design & Develop These four phases are the high-level steps we work through when designing your site, application, product.
- #55: Ook uw designer weet het niet allemaal