How to Prep for UI Design in 3 Easy Steps
If you’re working on a project and you’ve hit a creative roadblock, don’t beat yourself up. I’ve personally experienced the frustration that comes with being stuck on a screen and guessing what comes next. You’re indecisiveness doesn’t come from the fact that you’re not a skilled designer. You could have years of experience under your belt like me, but if you don’t do your prep work, you’ll hit a wall during the UI design process.
I think a lot of designers underestimate the power of planning until they’re stuck in this situation. We put so much emphasis on our digital talent that we forget that real success lives inside of our minds. I want to give everyone a glimpse of how I’ve learned to prep after experiencing this first-hand.
How can you prep for great UI design? Here are three crucial steps you should follow:
- Flush out all of the requirements
- Create a series of user stories
- Plan the task flow of your design
Understand Your Design Expectations
To truly understand what is expected of you, you need to flush out all of the requirements of your design. What action are you trying to accomplish – a purchase order or a new subscriber? Most of the time, there will be a product owner on the other end communicating the requirements to you.
If you’re working on a personal product, it is still important to know what you stand to gain from this design. On an individual level, this could mean driving traffic to your website or building your brand in the community.
Think about when you were in grade school and you went through all of that trouble to write a five paragraph essay. You started out with an outline involving a solid introduction, your main points, and a summarizing conclusion.
The three main points were supported by evidence and were kept organized in a bulleted list. Before you even started writing that essay, you needed to have a clear objective. Were you trying to persuade your audience of some truth, or influence their behavior?
Prepping for the UI/UX design process works in a similar capacity. Before you open up your computer, grab a notebook or a whiteboard and list these requirements out. I’m not talking about a general idea of what your website or app is going to be about.
Every single screen is going to have a different purpose when it goes live, and each should be considered separately. Create a list of bullet points for each screen that clearly communicates what a user will need. Here is an example:
In this example, I listed exactly what the product screen was going to require: a menu icon, order info, nutrition facts, the option to re-order, and additional category products. I also sketched out what the product screen would look like to make sure I was visualizing where each component would go.
Since I put in the leg work, I was able to open up Sketch and replicate my outline with minimal effort. I knew exactly what I wanted this screen to accomplish and how each different aspect was going to be laid out with the software.
“As a User, I Should be Able to…”
This leads us into understanding exactly what the user wants to do. In fact, it’s not just what they want to do, but what they should be able to do based on web standards and best practices.
If you own a restaurant that offers delivery, your customers probably expect that they can go online and order off the website. In my example above, you’ll see that I included a re-order option to help satisfy these expectations. Dominos does this by allowing its customers to create an “Easy Order” online to make the process as easy as possible.
It’s essential to remember that you’re designing from an end-user perspective. Everything that you create on the screen should reflect the anticipated actions of a user. If people can’t figure out how to do what they want, they’re far more likely to leave irritated than try to figure it out.
You’re prep work should involve a series of user stories starting with:
“As a user, I should be able to…” You’ll want to finish that sentence over and over again until you’re confident that you’re standing on solid ground.
Most of the time the story will have multiple endings, so you’ll need to steer clear of tunnel vision and consider multiple variables. Be careful, though, you don’t want to crowd your design by imagining every possible scenario that a user might get into.
Let the User Journey Guide Task-Flow
If you understand what users think they should be able to do, it will significantly help the overall “flow” of your design. Go back to your pen and paper, and start drawing boxes with arrows to help you visualize how people will navigate around a website or app.
There is no all-encompassing answer to creating a perfect plan because each company you work for will have specific needs. I usually start off at the “homepage” and then ask myself what should come next.
Imagine that I’m in Sketch trying to design a mobile app for a fast-food chain. I have a good idea of what the requirements are and what the users will expect, so I get started. By the end of the day, I am staring at a screen with twenty smaller boxes (each representing a different screen) but there is no established order.
It’s like having all of the pieces you need to solve a puzzle without ever getting to look at the front of the box. Eventually, you could probably fit the pieces together and make it whole, but how much time would you have wasted?
Don’t just plan out what screens or pages you are going to create- understand the overall interactions in your design. When a user wants to accomplish a certain task, they will flow around a website or app in a specific way. My job is to predict the behavior of these users, and create a task flow that is simple for them to follow.
Scribbling down notes and hand-drawing boxes might sound premature for someone established in the UI design world. But it’s this prep work that really drives the design home and creates the best user experience possible. Mapping out the “know-how” in your mind will save you from stress in the future, and allow you to move through the design process fluidly.