My research began by looking at several other outdoor clothing companies and their e-commerce websites creating a competitive analysis. Here I research their strengths, weaknesses and who I believed their target buyers were. I also hypothesized what the goal of their website was and identified pain points of their site as well.

After completing my competitor analysis I began to recruit and conduct interviews. The requirements for participants were someone who had shopped and purchased an article of clothing in the past 30 days. My findings were that my participants were targeted buyers who conducted in-depth research before deciding on an item to buy. My participants also used general search terms when searching and two-three day shipping was very important to them.

After conducting this research I was able to create a persona that represented my main demographic. My persona’s name was Alan who was in his mid-thirties and married. He worked as a real estate agent in the Midwest. His main focus when purchasing clothing was finding the correct material that would fit his needs.

A variety of products to choose from was also important to him. After finding and purchasing the product he wanted two-three day shipping was a major factor as well. All of these goals would be met by Alan because of his intensive prior research.

One design tool that I used to help me decide how I should organize my content for navigating was card sorting. This tool then created my similarity matrix which is a simple representation of pair combinations, intended to give you a quick insight into the cards my participants paired together in the same group the most often.

The darker the blue where 2 cards intersect, the more often those terms were paired together by my participants. It also clusters related pair combinations together: the strongest pair are grouped next to the second-strongest pair that either of the first cards has, and so on.

After completing all of my research I can start my final step for planning, creating a user flow. Below shows the flow a user would take when given a certain task to complete. This shows the user’s entire journey of what pages they would visit, the decisions they would make to where they will end the journey.

I created three different versions for desktop low-fidelity wireframes based on all my research and planning previously done. I built these wireframes focusing on creating the best way for users to navigate the website to be able to find products in the easiest way possible.

After looking at my three versions again, I then narrowed it down to one and built responsive low-fidelity wireframes for desktop, tablet and mobile in Figma.

In Figma I then continued to build wireframes for the user’s entire purchase process. This journey would include the user landing on the homepage to reviewing their order and purchasing their item and every page in between.

The brand I wanted to create for this e-commerce website was something that represented the outdoors. I decided to name the company Oaken, like an oak tree. I decided on this because an oak tree is durable, strong and long-lasting. Like the outdoor clothing sold on the e-commerce website

I then needed to design a logo that would fit and look well on the website and other mediums the logo would be featured on. Below are the original iterations I designed that playoff nature and oak trees.

After designing many different iterations and applying them to the website header and other mediums I decided to go with the logo below. One reason I chose this logo was that it will fit well from a desktop to a mobile website view to the user.

To help build a consistent brand across the entire website I created a brand style guide that can be used when designing all the elements on every page. This includes the way the logo can be used, typography, brand color pallets, imagery and product imagery.

With these branding guidelines and wireframes, I created my hi-fidelity wireframes in Figma for each page the user would visit when searching and purchasing a product

With these wireframes created I could now build a prototype for participants to user test. Participants sat at my computer while I screen-recorded their process. I gave them just enough information to conduct the test. They were instructed to find and purchase a summer coat. They were aware that this is a prototype and not all functions worked.

When giving instructions to participants 1 and 2 to find a light summer coat they both scrolled down to view the Featured Wear section because their eye was drawn to the product images visible above the scroll. I did not want this, I wanted my participants to click the Men’s tab and then click coats. So I made the following changes below.

By adding these photos in place of the product images it did not make the user scroll down to view the whole section, but instead the user stayed above the scroll and clicked the Men’s tab to find the Coats section like I wanted.

Participants 2 and 4 both explained how when searching for products they like to see the reviews or something that represents the level of review status for each product. Seeing reviews for the product is a major factor when deciding to purchase a product or not explained my participants. Therefore below are the following changes I made to fix this problem.

The way I fixed this problem was to add a simple star rating icon that corresponded with each product on the product page. This allowed users to see a preliminary review ranking for the product before even clicking on the individual product page.

Participants 1, 2 and 4 all clicked the text associated with the radio button when choosing the shipping option. However, in my prototype, I only had the radio button itself clickable for the option. An easy fix for this problem was to have the text associated with the radio button to be clickable as well. Now when the user clicks to choose a shipping option, whether they click the radio button or the text, that option will be chosen by the user.

After completing this case study I would have done a few more things to strengthen my study. One would be to ask a few more questions when interviewing my participants to get a better knowledge of their online purchasing experience. However, I feel like I gained a pretty good understanding of their online purchasing experience.

Developing this high-fidelity e-commerce website was a valuable experience learning users’ habits and wants when purchasing something online. All of these things I learned I can apply when developing future websites.