woo bryant

Introduction

The first impression is the one that counts most, or at least that’s what I have been told my entire life. A clean shirt and nice shoes are a prerequisite, but what about the statement piece? In today’s world, all eyes are on you whether you want them to be or not.

“Looking the part” can be nerve-wrecking, especially when you have no idea what it is you need to do so. Office jobs, in-person meetings, and wearing suits to work are now becoming a thing of the pass and working remotely, Skype meetings, and selvedge denim is our future. How do we stand out on the rare occasion we interact with anyone other than ourselves? For me, the easiest thing is to slap on a nice watch, but finding a quality watch that is within my price range isn’t the easiest of tasks.

For my capstone, I tried to solve this problem using a user-centered approach — empathizing with the user through a process of research and analysis, defining and ideating solutions, and validating the theories with prototypes and testing.

As I leaped head first into the world of UX, my role in this project (through Springboard) was to walk through the entire UX process from start to finish as a UX Researcher, UI Designer, Content Strategist, and more.

The Problem

Recently, I have noticed that I do not frequent brick and mortar business much anymore and tend to do all of my shopping online. Even when it comes down to purchasing groceries and toilet paper, I whip out the closest digital device I can find to place an order through the wide-world web.

Online shoppers, such as myself, want to best deal and the best product in a timely manner. But those of us who view watches as a mere fashion accessory, struggle with choosing a well-constructed watch that is within their price range. They typically have a limited income and do not want to spend over $200 for a watch and do not concern themselves with the watch mechanics. However, because there are so many watches out in the world, the selection process can become overwhelming and time consuming.

Getting To Know the User

The Survey
In order to solve this problem, I need to get to know the user as quickly and easily as I can, and what’s easier than simply asking a question? I surveyed 31 people to learn how they go about purchasing a watch and get insight on ways to simplify the buying process.

A few of the questions included:
• What do you consider the most important factor when buying a watch?
• What is your main reason for purchasing a watch?
• What is the maximum price range you are willing to spend on a watch?

User Interviews

After reviewing the results of the screener survey, I reached out to four (4) individuals for an in-person or remote interview. I asked them various questions discussing their experiences purchasing a watch, their experience as an online shopper, and things they feel would help them easily navigate through the watch buying process.

A few of the questions included:

• Can you share the experience the last time you bought a watch and expectations you may have had?
• What do you feel is the hardest part about the watch buying process?
• Describe to me your ideal process in buying your dream watch

During the interview process I learned that most users preferred in-store shopping because they were able to feel and hold the watch, but they would be more willing to shop online if they had a way to have the same experience without penalty.

Affinity & Empathy Mapping

The next step was to analyze my primary research through Affinity Mapping. I looked through my notes and re-listened to the audio recordings from the user interviews to write out key ideas, quotes, and any quantitative research onto sticky notes. After laying them all out, I started categorizing them into three main themes which were mechanics, ideation, and simplicity.

To further put myself in the user’s shoes, I created an empathy map based on the potential user group. During this exercise I considered what each of them would think, feel, say and do and noted the pains and gains they were having with the current process.

Through this, I was able to gain an understanding of their frustrations and start thinking about what would be helpful in a new product.

User Persona

A user persona was created in order to further empathize with the user. I chose to create one unique persona for the potential user.

The Entrepreneur. Erin is the founder of a non-for-profit organization located in Los Angeles, CA. She has multiple projects throughout the day that each have their own tasks and deadlines. Erin has the tendency to become indecisive if presented with too many options so she prefers to have narrowed information presented to her that in a organized way.

Each design decision was made with Erin in mind which made it easier to step outside of my own preferred design.

Heuristic Analysis of Competitors

To understand the competitive landscape of the website, I visited four sites and detailed the strengths and weaknesses of each. I looked at the user control and freedom, consistency and standards, and flexibility and efficiency of use for each of them. By reviewing these websites, I was able to see what’s working well and noting any gaps or places to improve.

1. Amazon.com
2. Jomashop.com
3. Watches.com
4. Thewatchhut.co

Strengths:
• The symbols for “search”, “shopping cart” and “login” are consistent on all platforms and featured in the top right corner.
• Each site features accelerators that narrows the number of options the user will view at once.
• The shopping carts were easy to navigate and edit.

Weaknesses:
• Many of the features on each site, while helpful, seemed very limited which did not aide in the user selecting an option.
• Lacking in personality.
• Most relied on gestures without much walkthrough.

How might we… Statements

The last step of the research phase was to create “How might we…” statements which provided me with the basis to start defining solutions. During this exercise I took the challenges noted during the research phase and turned them into opportunities to design.

How might we…
• make the online shopping experience feel like an in-store experience?
• reduce the number of options the shopper views at a time?
• help shoppers be more decisive in their decision-making process?
• help shoppers feel more confident in buying a brand that is not the most popular?

These simple questions were creating the foundation for the steps that were to come.

User Flows

This process involved thinking through every screen, choice, and action the user must take to do specific tasks within the app. As searching for available items for purchase and adding those items to the shopping cart are the two most crucial user tasks, these are the red routes that we absolutely must have. These flows became the blueprints I used to create sketches and prototypes.

The Design Process

Sketches & Guerilla Usability Testing

Next I created quick layouts for each screen in the flow. I sketched each page without worrying about the design, which gave me some room to try many things. As an art director and visual artists, this was not too far out of my comfort zone. However, creating sketches that would be used by several people instead of just myself was a little more difficult than I thought it would be.

Once I had my sketches drawn I went into quick guerrilla testing using Marvel to test the red routes. This feedback was very helpful as it showed me pretty quickly that there were quite a few pages I was missing

Wireframes

After getting some great feedback on my sketches and adding in the missing screens, I jumped into wireframes. Because I already had my sketches, this task was one of the least difficult. I ended with a set of wireframes that could be easily translated for high fidelity mockups. My experience as a visual designer really came in hand here.

High Fidelity Mockups

After completing the wireframes, the next step was to develop the high-fidelity mockups. Although creating the actual wireframes was not a daunting tasks, some adjustments needed to be made once I inserted stock images. I started to get more of a feel for the role of UI designer. Although not completely out of my comfort zone, I noticed the subtle changes between graphic designer and UI designer.

Prototypes, Usability Testing & Iteration

Using Adobe XD, I created a prototype from the high fidelity mockups for users to test. With this prototype built and linked, I conducted 3 usability tests with set tasks and scenarios for each of them to go through.

1. Browse all of the watches in the Best Sellers section.
2. Select a watch.
3. Add the watch to your cart.
4. Navigate through the purchase information section.
5. Process your payment.

After this final round of usability testing was complete, I made final tweaks to the prototypes based on user feedback.