- Lightning talk: the UX design process from concept to experience map to digital prototype
- Content Briefing: National Maritime Museum Hidden Histories
- Workshop: experience map
- Intro to prototyping
Let's look at some projects from Tate and Burberry. We will focus on the UX design process:
- defining the problem, aka research
- fleshing out the solution through experience maps
- prototyping physically and digitally
- user-testing
You can view/download the lecture slides here.
National Maritime Museum Hidden Histories
The NMM have now sent through 24 hidden history stories that will underpin our interactive interventions.
Let's divide up the class & the stories and take 10 mins to read through your allocated stories. Then we'll each take our stories and present them to the class on the main screen. That way we can cover them quickly.
You'll then have 15 mins to discuss how you could present these stories within your interactive with your team mates. I will come around and trouble shoot if there are any clashes or problems with fitting these into the concepts we have from last week.
You can view the NMM resoures here.
Once you have a concept, and before you dive into the details of it, it's very useful to map out the customer journey (aka experience map).
You can do that with post-its first (and optionally turn your map digital, if it needs many iterations).
-
List out each fundamental step in your experience.
A step could eventually become many screens, but in a customer journey map it can be condensed into one step.
Don't worry about interface for now. Focus on the purpose of each step.
- Connect the steps in a map.
In an iterative UX design process, prototyping allows you to quickly mock up the future state of a system and test it with users, team mates and clients.
Doing this rapidly and iteratively generates feedback early and often in the process, improving the final design and reducing the need for costly changes during development.
-
A prototype answers questions. The more specific the better.
-
A prototype stands between your assumptions and your users behaviours.
-
A prototype should be quick (and cheap) to make, re-make and possibly discard.
-
A prototype should be close to the real thing...
-
... but a prototype is not the real thing.
Start with paper, then go digital!
Each prototyping tool has its own feature set and strengths. Based on your needs and the requirements of your project, evaluate which tool is more appropriate:
- How easy is it to learn and use the tool?
- Are there collections of reusable templates or widgets available?
- How easy is it to make changes on the fly or to incorporate feedback?
- Does it have any collaboration features, such as allowing multiple people to work on it at the same time?
- What are the licensing terms and costs?
| Name | Platform | Free? |
|---|---|---|
| Moqups | Web-based | Freemium |
| Invision | Web-based | Yes |
| Adobe Experience Design | Mac and Win | In preview (they may charge you later) |
| Sketch | Mac only | Free trial, then $49 (education price) |
| Justinmind | Mac and Win | 30-days free trial, then $19/month |
| Balsamiq | Mac and Win | 30-days free trial, then $89 |
| Framer | Mac only | 30-days free trial, then $99 |
| Atomic | Web-based | 30-days free trial |
| UXPin | Web-based | 7-days free trial |
Prototype two user flows:
- The onboarding process: how does your experience communicate to visitors when they first interact with the product? How does it engage them with its content? What are the calls to action?
-
A problematic scenario.
For instance, what happens when your user makes a mistake, can't find what s/he is looking for, or generally when something goes wrong?
Whenever we design for a group of users that are not ourselves (which means, always) we make assumptions about their behaviours, goals and needs, attitudes, skills etc.
A common tool to get to know your assumptions about a group of user is creating a user persona.
Alan Cooper introduced user personas as a methodology to solve the elastic user problem. As designers, we are tempted to stretch the user to fit almost perfectly to whatever you are designing. The vagueness of the user causes many design failures, because the user is too elastic. We therefore need something much more specific.
A user persona allows you to visualise users with common behavioural patterns in their purchasing decisions, use of technology or products, customer service preferences, lifestyle choices, etc.
- Behaviours: what users do
- Attitudes: what users expect
- Motivations: what users want / need
- Limitations: what blocks them from doing what they want / need
Demographics are not really that useful.
Create (at least) two user personas for your interactive intervention.
Base your personas on the people you have interviewed (eg: this persona is based on four people we interviewed, and they all stated X and Y).
If you desperately need a template, you could use this as a starting point but don't just mindlessly copy it. Think of what dimensions will be useful in the design process.
Please no gimmicky graphs, unless they're based on research data and tell us something useful about the cluster of people they describe.
Pick your favourite digital museum experience from last week's presentation and blog about it.
Focus on these aspects (in no particular order):
-
What do you think is the goal of the experience you chose?
-
What design challenges may the people involved in your chosen project have faced? How did they solve them?
-
Why did you pick this project? What intrigues you about it?
-
Where does this project fit in the content - experience graph (in your opinion) and why?
