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?”
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
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
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
Notes de l'éditeur
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.