Six UX/UI steps to customize digital products to target your users
BY: Brandi Leath, Lead Product Designer
A good door is invisible: You enter a room without even thinking. That’s what Don Norman thinks. As the long-standing champion of human-centered design, Don advocates experiential principles like discoverability and feedback—because if you notice a door, it’s a problem. Next time you pull the handle of a sliding door (we’ve all done it), no judgment. You’ve encountered a Norman Door.
Your website can do better than a Norman Door. Much better. In fact, all your digital products—aka mobile apps, software solutions and custom CMSs—should be intuitive to the point of invisibility for your users.
Enter the world of user experience (UX) and user interface (UI). As iostudio’s lead product designer, I design positive user experiences built to make conversion as natural as walking into a room. But before I open my UX/UI bag of tricks, let’s clarify the difference between the two: UX is how a person interacts with an object, like a door or a digital product; UI is what the door or digital product actually communicates to the person about how it functions.
Got it? Good. Now here’s how you customize UX/UI to get your users to convert without even thinking about it.
1. Research User Personas (UX)
Our work for most of our clients begins with research about their target audience. We identify customer demographics and then take it a step further to discover their behaviors, emotions, intent and much more. All this influences how we align user problems with client solutions. It also allows us to create user personas for each type of customer.
Insider Knowledge: Beginners can use free Facebook Insights to pull user behaviors for specific demographics and even create focus groups. Or, even better, discover what people are looking for with usability testing.
2. Map User Journeys (UX)
Next, we identify where we want these user personas to go, examining possible points of entry that lead to conversion—be that a website, live chat, form, social channel, digital ad platform, search engine, phone call, email or something else. We document the desired paths, then model our ideal journey for each persona and design specific pathways for them to take. (You can map other journeys too, including a user’s emotional progression.)
Insider Knowledge: Whether you’re a first timer or a pro, I recommend Sketch. It’s affordable and highly intuitive. I really love how I can turn a Sketch file into a toolkit in order to simplify design and maintain consistency.
3. Implement Branding and Style Guidelines (UI)
Now we focus on branding. Whether we develop an entirely new brand or inherit a client’s existing brand, we ensure colors, fonts, imagery, iconography and other design elements are consistent. (Content style, too.) We publish brand standards for design and copy to illustrate acceptable and unacceptable uses, and maintain visual coherence and style across all media a user may encounter.
Insider Knowledge: Aggregate all your brand guidelines into a UI kit in Sketch that becomes the single source of truth for all design elements across your digital product.
4. Draft Wireframes (UX)
Wireframes are skeletons for design. Wireframes help us visualize where things will go on a web page or mobile app. It’s like an outline that shows where the user flow leads during a digital experience—and how we direct users toward the client’s value proposition. Making this visual literally creates a clear picture of the final deliverable.
Insider Knowledge: InVision has a great tool called Freehand that allows you to wireframe concepts quickly and collaborate with ease.
5. Design High-fidelity Mockups (UI)
Mockups ensure design looks and aligns with branding. In looking at the mockups, we better understand the psychology behind colors, buttons and other engagement tools. Here, you can see decisions involve more than just “Change the color of that button.” (Facebook invested 280 hours redesigning their “Like” button because different browsers and software programs rendered the button differently.)
Insider Knowledge: Sync your UI kit with InVision’s Design System Manager (DSM) using the Craft plugin to ensure collaborative consistency across the design team.
6. Start Prototyping (UX/UI)
Prototyping takes your high-fidelity mockups and makes them interactive. This is where you can discover intuitive gaps in UX/UI design. It’s also a vital way to demonstrate to the development team how a digital product should function, a step you will certainly never regret.
Insider Knowledge: Upload your Sketch prototypes to InVision using the Craft plugin. Give key decision makers access so they can experience how the digital product works and give informed feedback.
By allowing UX/UI design to work its magic, you make every user interaction intentional and draw users instinctively toward your value proposition. That means that every element on a digital product (down to the haptic vibrations on the phone) is customized to act like an invisible door. And that makes conversion as natural as walking into a room.
We hope you enjoyed a peek behind the UX/UI curtain with Brandi. Love her insights, but not sure you can do it yourself? Tell us where you want to go.
Brandi Leath is our Lead Product Designer at iostudio. As our UX/UI expert, Brandi has a gift for understanding user motivations and behaviors. From websites to apps and beyond, her intuitive designs empower clients to engage target audiences in bold new ways. Very simply: After Brandi touches something, it’s better, clearer and easier. (Even her spreadsheets are user-friendly.) She’s passionate. About life. About UX. About clients who make the world a better place.