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.

Latest from our blog

Justifying and articulating why a logo works is an exercise fraught with well-worn cliches, creative psychobabble and straw-grabbing; for the most part one instinctively knows when something is right. In the case of our beloved 3B pencil the appropriateness of application seems endless; aside from the fact that the 3B pencil is specifically a creative one, it remains a direct link with our past whilst remaining relevant today.

Jan 18, 2019

Latest case study

What singles this particular project out as a deeply satisfactory Squarespace instance is that - for once - absolutely no code injection or css overrides were required; this site is absolutely standard in terms of code and template presets, and this reflected in the fact that it was delivered for less than half of the original estimated cost.