When I started designing websites back in the olden days (circa 2005), I quickly learned that there were several rules that I needed to follow to complete a practical design. I needed to follow a grid and maintain consistency with my layouts. I needed to define my fonts, colors and elements at the beginning of a project. I needed several cups of coffee. But there was one rule that didn’t strike me as crucial until years later. After many successes and failures designing for the web, I can say with confidence that it is essential to know who I am designing for.

In a previous article, “The Power of User Experience (UX) Design,” I explained the basics about UX Design and why it is an important tool in designing experiences for users. To recap, UX Design is the art of identifying the intended users, learning about their needs, and coming up with a game plan to best serve them. In this article, I want to explore the ways UX principles can be applied to a User Interface (UI) design process.

1. Gather Insights About Users and Their Goals

The first step to designing for users is to get to know them. UX designers gather information about target users by finding the answers to some key questions. For example:

• How many different types of users will be using your product (customer, distributor, manager, etc.)
• What is the age range of your target users?
• What are their primary goals in using your product?
• How often will they be using your product?
• What kinds of resources, services or solutions will they be most interested in?

The easiest way to find the answers to these questions is by communicating directly with target users. This can be done through focus groups, surveys and interviews. Knowing the answers to these questions and more will cut out a tremendous amount of guesswork in later phases of the design process.

2. Develop a Website Blueprint

Once user information has been gathered and organized, a good UX designer will then move on to develop a series of basic wireframes for the website’s overall layout. They don’t have to be pretty, but they do need to reflect the website’s order of information and overall flow. Think of these as blueprints for the website’s basic structure. A good set of wireframes will clearly outline content order, navigation, and flow when it’s time to design the interface.

Once the first round of wireframes are completed, they should go through a review process to check for user requirement issues. Here are some things to check for:

• Is all the important information being represented?
• Is the homepage structured to lead users to their desired goals?
• Is the order of information optimal for intended users?
• Are any essential action items or resources buried behind too many clicks or too much scrolling?
• Are navigation items accessible and in predictable locations?

Asking these questions during the wireframing stage provides an opportunity to correct issues before the more detailed user interface designing process.

3. User Interface Design

At this point, the User Experience designer can effectively hand off the baton to the User Interface designer. This is where the theoretical becomes visual. While the focus of good UI design is not purely on polish and style, both are essential components of a good user interface. After all, no one wants to drive an ugly car, even if it rides like a dream. Since the UX process has eliminated a lot of the guesswork, the UI designer can now focus on fleshing out function with form. This is where carefully chosen colors, fonts, images and components can be applied to the wireframe to create an effective visual experience.

As explained in “The Power of User Experience (UX) Design,” UI Design is a subset of UX Design. This means that even the visual elements and strategy need to reflect the user’s expectations. If the target user is expecting brand unity, then colors and fonts should reflect a consistent brand. If the target user prefers mobile devices, then it should be designed primarily for mobile viewing. If the target user is elderly, then it should be designed with enhanced legibility and accessibility in mind. Again, having all the information compiled during the UX design process makes it much easier for the UI designer to develop airtight solutions.

4. Testing, Testing…

Before a website or application design is approved and developed, it is important to put the designs through rigorous screenings and tests. This part of the process is called “prototyping.”

With today’s design tools like Sketch and Adobe XD, UI designers have the opportunity to develop working prototypes that turn static interface designs into interactive experiences. Everything from working navigation to component animations can easily be simulated without a single line of code. A well-designed prototype provides an experience that is very close to the real thing, allowing users to experience the website’s flow and interactivity as if it were the final product.

Once a prototype is completed, it should be reviewed both by peers and a select group of potential users, if possible. The key is to gauge user reactions, however small, and determine if any corrections are needed. It can be helpful to provide a brief survey to testers with specific questions, such as:

• How easy was it to navigate the site?
• Was anything hard to read or find?
• Were you distracted by any of the design elements?
• Were you misled by any of the navigation or action items?

Sometimes, it can also be helpful to give users a basic task to perform, such as downloading a particular resource or making an item purchase. If a tester runs into any issues or has any negative reactions to their experience, that indicates a flaw in the design. Gathering reactions can help you determine the validity of the design and if the UI designer needs to make any changes. Once all issues are corrected, you can be very confident that the design is ready to be developed.

Recipe for Relationship

As a visual designer, I still get tempted to think of UI Design as a straightforward pursuit of a nice look. But a website is so much more than an ornamental frame for web content. It is an intricate weave of pages, actions and resources that multiple types of users access to perform specific tasks.

When User Experience principles are applied to the design process, it becomes clear how much the layout and flow affects users. The function of design is just as important on the web as it is in a store or airport. When its importance is ignored, it can be painfully obvious. That’s why UX principles are such an impactful investment.

As technologist and civic designer Dana Chisnell puts it, “Want your users to fall in love with your designs? Fall in love with your users.” It may take extra time and steps to identify your users and determine what they need, but every good relationship starts with getting to know the person. When a user interface reflects the knowledge you’ve gathered about your customers, it will indicate to them that you care and are committed to their satisfaction. Applying UX principles to the UI design process ensures that the final product saves customers time, guides them through their goals, and provides them with positive user experiences. That makes the process a recipe for long-lasting customer relationships.

A 3 Part Series on UX and UI

The Power of User Experience (UX) Design (Part 1)
UX and UI: Designing for a Positive User Experience (Part 2)
Measure Twice, Cut Once: Saving Time with UX Design (Part 3)