Desktop E-commerce UX/UI Design

Role

UX Researcher
Information Architect
UI Designer

Applications

Adobe XD
Adobe Creative Cloud

Duration

2 Weeks

Mountainside Snowboarding Header Mock.png

Problem Area

Mountainside Snowboarding is an eCommerce store that sells all things snowboard gear. Data shows that 50% of users open 7 item pages on average and then abandon the site without moving any items into the cart. The hypothesis is that users are unable to determine which snowboard is best based on relative features.

Additionally, 70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.

I explored ways to improve the conversion from browse to completion of checkout to increase revenue on the product’s web experience.

Project Plan

I created a two week project plan to

make sure I hit certain deadlines.

Empathize

Understanding the problem is key to finding the solution.

Competitive Analysis

To start things off, I studied a couple industry leaders who solved similar problems and with similar business goals. I studied and learned how they did things so that I could analyze what did and didn't work.

Evo Industry Research

Burton Industry Research

The House Industry Research

Evo Industry Research

1/3

Secondary Research

Once I took a look at some industry leaders, I then moved onto doing some secondary research. I needed to get in the mind of the user and figure out what causes a snowboarder to purchase a board.

I found some videos online that were conducted by professional snowboarders that talk about why they choose certain boards. I found forums and other sites that talked about the most important things when it comes to choosing a snowboard.

There are a few things that snowboarders look for when buying a board.

Snowboard length
Types of snowboard: Your choices include all-mountain, freestyle, freeride, powder and splitboards. The right type of board depends on what type of terrain and snow conditions you plan to ride in.
Snowboard camber & rocker
Snowboard width
Snowboard shape

Another thing when it comes to shopping for a product like this is comparison shopping. When shopping, users want to be able to compare items, whether it's comparing price, size, color or style, having the ability to see that information on one page instead of opening multiple tabs is something users enjoy. This makes for an easy and positive experience.

When looking at other snowboard shop stores, it seems that a lot of them have kits. For example, when you click on a snowboard that you are interested in, when you scroll down you can see what bindings and boots are recommended to be purchased with it. This will help shoppers make quick and easy decisions.

Ideate

Time to put all the research to use.

User Flows

I created user flows to help me move forward in creating the wireframes.

Screen Shot 2020-12-02 at 10.29.04 PM.png

The first flow is of a user finding a product and then adding that to their cart and checking out with the option of guest checkout.

The second flow is of a user finding a product and comparing that product with another one and then adding their choice to their cart and checking out with the option of guest checkout.

Wireframes

With the help of the user flows, I started to create wireframes.

Validate

Testing design with users

Guerilla Testing

I conducted 3 guerilla usability tests. I was testing an e-commerce website design and flow that will make users have more successful user experience. I wanted to focus on being able to compare multiple products, that would make users have a more positive experience shopping which would lead to them completing a purchase of a snowboard product.

Findings

Issue #1

2 out of 3 participants had trouble finding the View Comparison button.

Summary:

One user successfully found and activated the Compare feature but then didn't know where to go or how to view the comparisons.

Recommendations:

One way to try and solve the problem is to make a popup that says “view comparison” when the 2nd or 3rd product is clicked.
Another way would be to just add a “view comparison” button that is more bold and stands out.

Issue #2

2 out of 3 participants were confused with the log in or continue as guest button and instructions.

Summary:

The participants were able to add products to their cart but when it came time to checkout they saw the Login Button and the instructions but were just confused after reading the instructions.

Recommendations:

One way to fix the issue is to have the Login Button and a button to checkout as a guest and then when one is clicked the correct forms will drop down.
Another way to fix it would just be to make the LogIn Button and instructions to check out as a guest more prominent and visible.

Issue #3

I wouldn’t consider this an issue but more of an insight. When asked to find a snowboard 2 of the 3 participants went to their gender in the menu before going to the snowboarding tab in the top nav bar.

Summary:

See above

Recommendations:

I could remove the snowboarding tab in the top nav
I could just keep the snowboarding tab in the top nav since it isn't really a problem and it is more of a preference per the user. I don’t believe that it will cause any negative feedback or that it will affect the flow of finding and completing a purchase on the website.

Usability Testing by Priority

Screen Shot 2020-12-05 at 3.44.50 PM.png

Prototype

Putting ideas into action

Product Identity

After I defined my problem and formulated my solution, I designed a brand platform and style guide.

High Fidelity Screens

After developing my brand style guide and conducting guerilla tests, I moved onto creating my high fidelity prototype of the app. I went directly off my
lo-fidelity prototype (with the test results in mind) and edited the colors and revised based on my findings from user tests.