You know what problem you’re solving, you have your business objectives, technical requirements, and you’ve organized user feedback from conversations with users about their expectations; now you’re ready to start planning for the UI. Woohoo! This is super exciting because soon the efforts of all of this preparation and research will be a tangible product. It’s exciting, but it can be a daunting moment in the process no matter how experienced you are. How do you go about making sure you meet business objectives while meeting the needs of your users? How do you make something out of all of this information you have? The answer is to take things one step at a time.
Aligning Business Objectives and User Needs
Once the initial research of gathering requirements and interviewing stakeholders and users is complete, this is a natural time to pause to review the research and strategize. As UX professionals, it’s our job to balance business objectives with user needs and work to achieve both.
It’s critical to make sure the UX strategy aligns with business strategy from the beginning, so make sure you take the time to line them up. An experience matrix is a great way to keep track of the needs of the business and users in one place. When you present your design later to stakeholders, you’ll need to be able to explain how the design supports business objectives. If you’ve done this work up front before design, you likely won’t run into issues here.
Mental Models of Users
After analyzing research and aligning UX and business strategies, it’s time to start thinking about the UI and how it can accomplish everything it needs to. One thing to always keep in mind is that users will have mental models when they interact with your product. A mental model, put very simply, is what a user thinks they know about your site. Mental models “come from their prior experience with similar software or devices, assumptions they have, things they’ve heard others say, and also from their direct experience with the product or device” (UX Mag).
We need to build what makes sense to our users; that won’t always be what makes sense to us. You can start by studying established UI patterns and conventions. Users are going to be familiar with established patterns because they have seen them in other products/sites they’ve interacted with. One element that is vital to match up with users’ mental models is navigation. To accomplish this, you can perform a card sort exercise with them. If a newer, trendier pattern seems like it will work for your site, make sure you test it with users.
The important takeaway about mental models is that you should consistently be thinking about your users and ideally talking to them throughout the process.
Sketch… and then sketch some more
Not Sketch the wonderful UI design tool - I’m talking about low-fi sketching on paper. Before you begin building wireframes or prototypes with software, take the time to get some ideas on paper by sketching thumbnails. Sketching “keeps you from getting caught up in the technology, and instead focuses you on the best possible solution, freeing you to take risks that you might not otherwise take” (Smashing Magazine).
It’s easier and quicker to ideate on paper because you can try many different things quickly. It is also much easier to toss out quick sketches than it is to toss out a file you’ve spent hours on and will inevitably grow attached to. You can even do quick user testing with sketches to validate early ideas before you begin building out the prototype.
Take a Modular Approach
I recommend approaching wireframes/prototypes in a modular fashion. Interfaces are like puzzles and it’s our challenge to put them together in an effective way that makes sense to users. In my experience, tackling the UI in smaller pieces is helpful, especially if you are designing something that is content or data heavy - which can get complicated pretty quickly.
Think about all of the elements that will make up the UI and create a list and work on them one by one. For example, if you are using the card pattern, think about the content that will go into the card and start working on how to lay those pieces out. Consider things like hierarchy of information and iconography. Then figure out how the cards fit together. And so on. Pretty soon you’ll notice all the pieces of the UI coming together naturally.
If you’d like to learn more about modular design, I recommend reading Atomic Design by Brad Frost.
Prototyping and User Testing
Once you have an idea of how all the pieces are starting to fit together, you can build out a prototype for usability testing to validate your decisions. Develop scenarios for users based on goals and give them certain tasks to accomplish. If your testing results show that users are having difficulty completing certain scenarios, iterate and test again. The point is to make sure interactions make sense before you move into design and development.
Resources & Further Reading: