A UX/UI Challenge: Introduction

Posted on May 2, 2017 in case studies, design


Close up sketch of the design thinking process.

Close up sketch of the design thinking process.

I want to learn more about user experience (UX) and user interface (UI), so I have decided to dive into a hypothetical project. Since a huge part of UX is the process itself, I plan to document and write about every step along the way. I also plan to gather feedback from professional UX/UI designers and members of my target audience as I progress.

What is my project? I will be designing a unique flight booking website that will provide specific recommendations for where in the world to travel and when, based on the user’s preferences for what they want to do and in what kind of environment they want to be.

Here’s what the main steps of my project will look like, based on what I’ve learned from this online UX course as well as other talks, classes, and meetups:

1. Determine target audience
UX is a human-centered process. You’re designing for your audience – their needs, wants, desires. Thus, your target audience should be rather specific. Some experts recommend using the formula: the user is a ________ who wants to ________. For example, the user is a blind adult who wants to change the TV channel. Or the user is a parent who wants to help their toddler learn to walk.

2. Interview members of target audience
Now it is important to get to know real members of your target audience. You can do this through focus groups, surveys, interviews, etc. For my project I will be watching a few members of my target audience book flights using their preferred websites, apps and methods. They will narrate their experience, discussing what they like and dislike about it, and I will ask follow up questions as necessary (careful to not ask leading questions or project my own thoughts.)

3. Create hypothetical personas
From here you can create personas, which are hypothetical members of your target audience. Give them names, ages, professions, income levels. Talk about what they like to watch, read and do in their free time. But most importantly, determine their pain points, wants and needs. You can even create an empathy map, which outlines what they think, say, do and feel.

 — Get feedback on steps 1 through 3 —

4. Revamp all of the above based on feedback
I will get feedback from a UX designer on my process thus far and then rework the previous steps as needed.

5. Create site maps
Next I will sketch out a site map (or a few) for my website, showing the user flow from webpage to webpage. This is important to do prior to wireframing and designing because I’ll want to decide on which pages I’ll actually need and where they will be in the user experience.

— Get feedback on step 5 —

6. Revamp site maps
I will get feedback on my site maps and then rework them and choose one based on this feedback.

7. Hand-sketch low fidelity wireframes
It’s time for wireframing – but I won’t dive right into high-fidelity wireframes (wireframes that include example content, fonts, photos, etc.)  – I’ll keep it simple for now and stick with low-fidelity (showing where buttons and content will go without using actual sample content, colors, fonts, etc.). First I’ll sketch them out on paper to get my thoughts in order.

8. Create digital low-fidelity wireframes in Sketch
Then I’ll start digitizing these sketches with slightly more detail (I’ll use some sample content, for instance), but keep them pretty low-fidelity when it comes to the design. I’ll do this piece in a prototyping app called Sketch.

— Get feedback on steps 7 and 8 —

8. Revamp wireframes based on feedback
I’ll get feedback on my wireframes and then revamp and reorganize as needed.

9. Skin the wireframes
Finally I’ll skin the wireframes! This means I’ll apply actual fonts, colors, photos and copy, and prep the design for the next big step: prototyping.

— Get feedback on step 9 —

10. Revamp skinned website based on feedback
I’ll get feedback on the skinned website and re-design as needed.

11. Create and demo the prototype
I’ll create a demo of what the user experience will be like when they click through each button, showing where each click will lead them. I’d like to have a video or gif of this process to demonstrate the true user experience.

Reach out if you would like to be interviewed, review my work, or keep me accountable  – and then stay tuned for more posts throughout the process!