Justinmind

BLOG

Expand your prototyping knowledge

9 step checklist for your best UX design process ever

9 step checklist for your best UX design process ever


Map your UX design process with our simple checklist and stay focused to create your best designs yet.

You know how it is. You have that initial flash of creative inspiration and you just can’t wait to start designing. After all that’s what you do right, you’re a designer. But the creativity brainload has to be channeled into designer best practice: a workable, SMART UX design process that benefits everyone. If you’ve ever wondered how to organize each stage of your process in a smooth flow, right from research through to user feedback, then we break it down for you into 9 must-follow steps for UX design best practice. You’re one checklist away from your strongest ever design.

ux-design-step-1-do-your-research

You’ve heard of the wheel, right? Correct, it’s already been invented (and designed, and prototyped). Which means you don’t have to waste time reinventing it. So start out researching your competition – how do they solve common problems, and could you do it better? Combine this with an analysis of your existing user feedback, garnered from surveys, customer comments and an in-depth data analysis to save a ton of time at the customer testing stage. Plus if you do the groundwork now you’ll know what hasn’t been tried yet, meaning you can fill the gaps that no one else has noticed.

ux-design-step-2-plan-your-process

Who’s the most important person in the design process? Not the designer (!) but the end user; after all, the product is intended for them. So plan for them from the start by harnessing user knowledge. How? Firstly, know who your target users are and develop user web personas; secondly, observe your users in action and break out some in-person usability studies. You can use this raw observation to create your user flows: this vital stage allows you to link objectives up with design flows, which obviously makes for a better user experience. At this point you can define those all-important red routes, key activities that people are going to perform with your product. Create smooth red routes at the planning stage and you’ll convert casual users into life-long advocates of your product.

ux-design-step-3-explore-your-options

Now comes the fun part. Grab sharpies, paper and your team, it’s time to get creative.  Leave your preconceptions at the door and don’t get precious about your ideas. Having designated time for free thinking means that you’re only bringing your strongest ideas to the wireframing process. Of course, your wireframes don’t have to be lifeless – prototyping tools like Justinmind let you create interactive wireframes for a range of devices, meaning you can get an idea of your finished product even at this early stage. Building these up into an impressive, shareable prototype is your next task: bsharing your prototype at the start of a project, colleagues and end users can be involved from the beginning, giving their feedback, validating your work and guaranteeing the best experience for all of your unique users. 

ux-design-step-4-communicate

Not just with your team (but yeah, that too) but with your users. Best practices in information architecture are designed to aid user experience, so design your product in a way that communicates with your user. Experiment with simulating navigation flows, hopping from screen to screen to create links between pages, simulate Breadcrumb Navigation, add drop down menus and add dynamic forms, tabs and accordions.

Now you’ve got your navigation sorted out, think about how culture or language might impact on UX. Judicious use of copy and context will help you create a brand identity that makes every single one of your users feel at home. That goes for those using your product on a different devices; all users should be getting the same great experience regardless of their skills or the technology at their fingertips. Luckily, prototyping tools let you test your prototypes on multiple devices, so you won’t get any nasty surprises later on.

ux-design-step-5-create

Assuming you’ve made the most of Justinmind’s custom widget libraries and templates, you’ve now got a host of reusable content that can span across your designs. The ability to apply global changes and set default styles means your creative process can be leaner and meaner. Have fun and play around with your product: what kind of gestures work best for your users and make you feel good as a designer? Don’t be afraid to try something new! This is the moment to tweak your design to be truly responsive – play around with resizing and then play around again.

ux-design-step-6-give-feedback

Have you ever sat watching that little eggtimer on your PC screen turning round and round and wondered what the hell was going on? That’s because the UI isn’t giving you the feedback you need to understand the situation. Give your users a hand to understand and they’ll thank you – errors can be explained with icons or microcopy (we’ve mentioned this before), and loading times can be made more fun by adding some cool graphics or dummy content. You can also communicate to your users’ touch gestures with subtle UI changes, making your interface feel super responsive and fast even when it’s hampered by a sluggish server. Responsive style changes are easy to test out in Justinmind so you can figure out what’s best for you and your users. And of course, integrate your prototypes with usability testing tools to get immediate user feedback.

ux-design-step-7-finalize

Now you’re getting down to the fine-tuning stage, the tweaks that will add value to your UI and pull your basic architecture together. Playing around with icons and images is a great way to challenge your own design peconceptions or habits: after all, when used well, icons contribute hugely to intuitive usage both on finger-operated and mouse cursor UIs; when used badly they can really mess with your navegation and turn users off. Justinmind’s widget library lets you add in common icons for all devices, meaning you can closely simulate user interaction. Colour schemes can also be used to support your IA and create a cohesive visual hierarchy. By using colour to guide users through the content you create a clear roadmap, allowing them to take action confidently. Your site will have an irresistable logic.

And don’t stop experimenting. What if you play with the hierarchy, the balance or the contrast? Taking a day off (if your project schedule allows) to let your design percolate can reap unexpected rewards: you might get that last creative lightening bolt that makes a good design great.

ux-design-step-8-delight-your-users

Sometimes in life it’s the little things that make all the difference. Same goes for your design process: paying attention at the ‘micro’ stage – microcopy, microinteractions, transitions – is a key factor in creating something that end users want to come back to time and again. Microcopy, those snippets of text that make you feel like you’re actually interacting with an app or site, is a great way to add ‘personality’ to your work. Like Smashing Magazine says, “These details trigger an emotional response, and if used purposefully and fittingly, they will help to form a personality that people will respond to positively when interacting with the product. This positive attitude will often lead to people sharing and even advocating for your product with their peers.” And that’s what you want, right?

It’s the same deal with microinteractions, those micro-moments that define single use interactions, such as clicking ‘like’ on Facebook or adjusting a setting. Your ultimate aim with microinteractions is to make them so smooth that users don’t even realize they’re mincrointeracting with your product; the interaction should just feel natural.

Transitions – how your app or site moves between pages, images or slides – are also a neat way to signal spatiality and intentionality. Think about it: a Slide Left transition in a mobile app gives users the sense of linear progression, whereas a pop effect can indicate causality.

ux-design-step-9-analyze-your-impact

It’s time to road-test your product with a bit of data-driven design. Start out by defining your KPIs – what do you want to achieve and how are your going to measure your success (or lack thereof…). You might want to make use of the HEART framework to define UX metrics and get meaningful data about how your users interact with your app or site. Once you’ve got your metrics down you can refine them further for use in A/B tests, which can of course save you time and money .

Finally, test, test and test again. Make use of a UX lab, surveys, session recording and other tactics to really understand your users’ experience. A wide range of user research methods mean you can go back and fix bugs before they damn your design to the trash can and can help you make the best design choices right to the very end of the UX design checklist.

download-justinmind-prototyping-tool-banner

Cassandra Naji

About the Author

Cassandra is Marketing Content Editor at Justinmind

Comments are closed.