As designers, we’re trained to treat user happiness seriously. UX is at the very heart of our design process, and we constantly interrogate our projects to make sure they’re a pleasure to use.
However, we know that not all agencies and freelancers out there do the same. If you want to brush up on UX skills, this handy guide will help you take that first step!
Research stage – personas and user stories
Arguably the most important phase for thinking about UX is initial research. At the very beginning of each project you should ask yourself these two questions:
Who am I designing this product for?
and
What functionality do these people want from it?
There are two tools that will help you in this task – personas and user stories.
Personas
Personas are fictional characters that represent user groups. How many personas you need depends on how diverse your target audience is.
Make sure you don’t ignore the needs of users who are a minority, but at the same time keep the number of personas manageable – you’ll be referring back to them throughout the project. Don’t worry if you can’t cater for every single persona, it’s almost impossible to create something that does all things for all people.
Our personas are comprised of these key features:
- Basic info: name, age, gender, occupation (include a photo)
- Lifestyle information: Do they have a busy lifestyle? Do they work from home? Do they spend a lot of time pursuing their interests? What do they do on weekends? etc.
- Technology: How do they usually access internet? How good are they are using a computer? What kind of mobile phone do they use? Do they often shop online? Prone to showrooming? etc.
- Other information relevant to your project: for example, if you’re designing a website for a tea brand, how often they drink tea or what is important for them when buying a brand of tea would become very important.
Always make your personas sound like real people. Instead of a dry bullet point list of all the essentials, consider writing in a conversational style that is easy to read and gives these people personality. Including some quirky facts is welcome! You’re doing it right if you can tell straight away that you feel that you’d get on with one of your personas or they share traits similar to your friends.
Real people trigger emotional reactions, so personas that do the same are typically on the money.
If you want to learn more about personas, have a look at usability.gov’s guide.
User stories
User stories are short sentences that state what functionality your users would want your product to have. It’s a good idea to write these based on the personas you prepared earlier.
This is how a user story looks like:
As a [type of user] I would like to [goal], so that I can [reason].
Type of user
These are your personas, but instead of using names give them brief descriptions, such as ‘as a busy interior designer…’ or ‘as a working mum…’
Goal
This is what your user wants to achieve, for example: ‘I want to be able to filter the products’ or ‘I want to be able to find your address on a map.’
Reason
This gives context to the piece of functionality and helps you empathise with the user.
For example: ‘so that I can do it quickly and have more time for my children’ or ‘so that I can find my way around easily when I get lost.’
Here are two examples:
As a busy male who wants to buy flowers for my wife, I want to be provided with some guidance so that I buy the right bouquet for the occasion.
As someone who is used to buying things in a shop, I want the categories to match supermarket aisles so that I can follow my usual shopping route online.
User stories will help you visualise ways in which users will use the site, helping you decide what functionality is key and what can be left for future development. This way you can ensure that what you’re designing will meet the needs of your users.
You can read more about user stories in this helpful article.
Prototyping stage – UX testing against user stories
If you’re not prototyping your projects yet, start now. Diving straight into design software will shift your focus from the way it works to the way it looks. As soon as you start thinking about pixels, you may lose focus on all those important user stories.
At Marvellous we use three main tools:
- Pen and paper for the smallest of jobs or initial stages of planning out (think of this as a wireframe of a wireframe – wireframeception!)
- Illustrator + InVision for smaller projects
- Axure for bigger or more complex ones
As you work on the wireframe, consult the personas and user stories to make sure you’re on track. They will help you stay focussed on the real needs of your user. Before you sketch it in, take a step back and ask yourself if Mary, Tom or Rebecca would actually use it.
When your prototype is at a stage that it can be shown to others, it’s a good idea to run it past someone who hasn’t worked on the project. Ask them to test it against the user stories and see if there are any issues, as sometimes things other people may be able to stop thing that pass you by.
And finally, test your prototypes on actual users. User testing sounds like a long winded and costly process, but it doesn’t have to be! Jakob Nielsen says that you only need to test your websites on 5 users – they will help you discover 85% of problems.
These five people can be strangers met on the street, poor coworkers caught on their lunch break or even your friends and family. It’s better to have a small sample of non-perfect users that none at all!
Design stage – refer back to personas
With the prototype done and tested, all of the functionality should be fleshed out by now. All there is left is dressing it up with a beautiful UI. On this stage it’s worth regularly referring back to your personas.
Let’s say one of your key personas is an elderly lady. With a poor eyesight she’ll need a larger font size. All of your buttons need to be slightly bigger with plenty of whitespace around them to avoid accidental clicks.
If your personas would strongly prefer browsing your website on their mobile phones, you’ll need to consider choosing a dark text on light background combination, as a dark UI quickly become unreadable when sun hits the screen.
We’re all UX designers
Although it may seem time-consuming at first, we promise that when you make UX an integral part of your design process, you’ll actually save both time and money. It’s much more cost-effective to spot potential usability issues during prototyping stage, rather than try to fix them after the product’s launch.
If you follow this process you should significantly improve the quality of your projects. Smooth functionality accompanied by beautiful UI will delight your users and make them come back, what in turn, will bring more revenue to your clients. Double win!
Take a look at our blog on various elements of web design we’ve done in 2016!
