User Experience Design
UX Design
Through designing products with user interaction in mind we can provide meaningful, relevant and pleasurable user experiences. Happy users of your product or service may become paying customers, and happy customers will spend more of their hard earned cash with you.
UX design is an investment in the integrity of your product, the value of which is often underestimated.
User Experience (UX) Definition
User experience design is the practice of improving the usability, enjoyment and interactions with a product or service.
The aim is to improve user satisfaction, by tweaking branding, design, functions and interface.
UX design focuses on understanding users at a deep level including what they need and what they value.
UX Research
Competitive Analysis
How do others solve similar customer needs. Understanding the fundamental design decisions your competitors have made allows you to leapfrog their research and work on the next UX innovations in your industry. By understanding the market context of your product, you’ll be well prepared for every other step in your UX journey.
Data analysis
If this is a brand new product then you may not have all the useful data you need.
If this is an iteration of an existing product, then look at your user conversion journey (funnels), any analytical data on clicks, behaviour, bounce rate, page views, page speed performances etc.
The more data you have to inform your next stage of UX design thinking, the less you’ll need to rely on your gut, and the better your end result will be.
User feedback
Speak to the people who take care of the customers of your product! Curate new or find old surveys or videos, what does your customer say? What do they want? Check your online reviews, emails and complaints from customers, tweets and private messages. Every message with feedback could be your ticket to a new and improved product!
Planning your ux project
User stories
Have you created personas? Imagine who your end users are, are they school children, teachers, young professionals, builders or business owners? Put yourself in the shoes of your target audience(s) and write down their ‘user stories’. How would THEY want to use your product to fulfil their needs in-line with their values?
User flows
Create your user's flow based on the persona-based ‘user stories’ you created. These will form the basis of your testing when you get to wireframing user interactions.
On top of general user flows like resetting passwords, uploading profile pictures, or navigating your website via a menu, consider the hard hitting ones. We call these core user journeys.
Core user journeys dictate the minimum version of product which will satisfy the most people most of the time. Everything else is a lesser priority. Thinking like this enables ‘lean’ or ‘agile’ software development as the top priority tasks get completed first as soon as the project kicks off. You then have a ‘working’ product ASAP.
An example of this is a shop. You could design the most beautiful website for picking and choosing products but if users can’t pay, then your website is worthless.
Imagining your product (visual ux)
Brainstorms & sketches
It shouldn’t all be in your head. Get a room full of people, a few beers (which make people more creative), instil the idea that ‘no idea is a bad idea’ and get various sketches of various pages and user flows. This chaotic creative session could bring about a unique idea paramount to developing your competitive advantage in a market.
Wireframe
It’s time to get serious.
Create crude versions of pages on top of your user flows. Imagine how they’ll navigate from one to the other, and ensure your wireframe takes that journey into account.
If any stakeholders have strange requests for the designs, this is where you can portray the impact of their input, for better or for worse.
This is best done on paper until you learn what you need from prototypes (see below)
Prototype
What would you expect to happen with each element on hover, or on click? Would this be the same on mobile? Start with paper prototypes based on your wireframes and iterate until you’re happy. Pencil sketches will quickly encourage new wireframes to be drawn up, which then enables you to get people to test your latest ideas.
Develop these ideas with the feedback of your colleagues and friends until you have a digital representation of your best prototype, ready for high touch work.
Don’t let your prototypes be wholly biased by your own experiences and background. Get feedback from as many others from as many backgrounds as possible. This will result in an inclusive product, accessible to all.
Accessibility
How will your prototypes work on small, super-wide or super-tall screens? Is it worth revising how elements are displayed on your prototypes?
technical requirements
Information Architecture (IA)
So you’ve got your prototypes all drawn up. You understand your users, the different types of pages and the data they hold, and how people will arrive on your website.
It’s time to organise navigation and content. This is not a fun task, but it will inform the development of your product through to fruition. Knowing how to structure your content early on can ensure that your needs as a business are fulfilled, alongside those of your customers. It needs to be cost effective for you to manage your product data, which requires a thorough understanding of data structure and subsequent maintenance needs.
Creating your user experience
Elements of your user interface
If build cost is at all a consideration here (where isn’t it!?) then your prototypes should reuse elements across pages. Establish style guidelines for image sizes, aspect ratios, buttons and icons, paragraph widths, menu and logo placement. Don’t fret. Just comb your prototypes for similar elements and check how they’ve been wireframed. Consider how they could be tweaked ever so slightly to save on build cost.
Gestures
Although these should have been considered and noted in the prototyping stage, think through how your product could use typical mobile phone gestures e.g. swipe, pinch zoom and rotate.
instant user feedback
Page loading? Show them a loader rather than nothing.
Errors? Tell them what the user's error is. If it's your fault then you should say that!
Finalise designs
Populate your prototypes
Get some real content in there (not lorem ipsum!). Show imagery, icons and fonts as you’d imagine them to be for the final product.
Finalise layout
Come on now, it has taken a while to get here, but you’re seeing fonts, colours, images and icons exactly as you imagined.
You can now re-prototype without relying on your imagination! If something doesn’t feel slick, or could be improved, now is the time to say something.
Delighted?
Does your brand feel consistent across all pages? Is your value proposition well conveyed, and quickly? What could improve this? Obsessing over the details makes ‘good enough’ look like crap. Let’s make this user experience beautiful.
Happy? Then let’s build this!
