Authors: Frank Anderson Matt Blanco

Last Updated: 21 December, 2022

Before writing even a single line of code (even tests!) in any user-facing application, there is a very important task that must be completed: designing the UI/UX. UI, or user interface, is what your application will look like--the font you use, the color of your buttons, how the page is arranged, what the menu looks like, and every other aesthetic aspect of your page is part of the user interface. UX, or user experience, is how users interact with your app--what happens when they click certain buttons and links and, more broadly, the typical steps they would take to get the most use out of your app.

The Process

Typically, design follows the following process to pin down the UI and UX:

1. User Research & Features
2. User Flow
3. Site Map
4. Low Fidelity Mockups
5. High Fidelity Mockups

User Research & Features

Before you start thinking about where things go, you need to think about what you’re making. Think about who’s going to use what you’re making. What features will they find the most useful, how should you use this to prioritize the features that will be in what you’re making?

How do I do this?

• Make a list of features for your product. Be ready and willing to rearrange, clarify, add, and remove items as you research your user.

User Flow

Now that you have the features pinned down, think about how the user will access these features. How should you organize the information in a way that is best suited to their needs. What do they do first, what follows, etc.

How do I do this?

• Flowcharts are often a useful tool! Drawing them on paper or whiteboards is really easy, but if you want to use a tool like Lucidchart, that works too.

Site Map

It’s time to turn your User Flow into a Site Map. A Site Map is a graph of all the screens in your app. What will be on each of them? What purpose do they serve? How do they connect?

How do I do this?