Website Redesign

3screensblue.png
 

Overview

I was tasked with redesigning an e-commerce website, YETI. YETI is an e-commerce business that sells outdoor gear such as coolers, drinkware, accessories, and apparel intended for the outdoor enthusiast. This project aimed to achieve IA and Navigation design.

 

my role & process

Screen Shot 2019-02-23 at 1.06.27 PM.png

As the sole UX Designer, I conducted research, created information architecture, designed the wireframes, prototyping and user testing.

TIMEFRAME: 4 Days

 

DEFINING THE KEY PAIN POINTS

PERSONA

Typically, I would begin by researching with users to design a persona I would be designing for. However, with this particular project, I was also provided with a persona to design for.

 
Screen Shot 2019-02-23 at 1.26.12 PM.png
 
 

ANALYZING THE CURRENT EXPERIENCE

I wanted to redesign the website that would be an improvement and better experience for these groups, but of course, I couldn't just start redesigning the website.  I wanted to look at competitors’ websites and create a competitive analysis. I had to find users similar to Victor, and understand them, how they use the website, and the issues that arise.

 
Screen Shot 2019-02-23 at 12.54.47 PM.png

Competitive analysis

I began my research by looking at the competitors of YETI and compared each business’s assets. I also wanted to conduct a heuristic evaluation of YETI and it’s competitors. My findings allowed me to see what is working and what is not with similar e-commerce websites.  I found that YETI had the most issues and pain points than its competitors. I knew I wanted to focus on these issues when conducting user testing.

 
 
 
 
 

CONDUCTING USER TESTS

In order to redesign the YETI website, I needed to first find pain points of users experiencing the current website. To better design for my persona, Victor, all four users shared similar qualities of Victor.

I conducted a user test in which I watched the users individually complete a few tasks on the YETI website. As I watched and listened, I was able to gain further understanding of the user’s needs.

Screen Shot 2019-02-23 at 1.01.44 PM.png
 

PAINPOINTS

Once I was able to watch how users interact with the website by completing a few tasks, I was able to find common pain points and trends.

 
Screen Shot 2019-02-23 at 1.39.31 PM.png
 

PROBLEM

An extremely busy individual needs a convenient and simple way to  find gear for the outdoors to enjoy during their free time because they don’t have time to go shopping in stores.

 

DESIGN PROCESS

DESIGNING SOLUTIONS

The user testing allowed me to organize what changes were needed to be made.  I was able to focus on the pain points of the users and the needs of Victor. I wanted to focus on:

 
Screen Shot 2019-02-23 at 9.16.54 PM.png
 

With the little time that Victor has, as well as his struggles with organization and concentrating, I knew I needed to redesign it to be easy to navigate with a simple look and no distractions that would allow him to shop and purchase a product to create a positive customer experience.

 

SKETCHING & TESTING

Based on the findings in the user testing and competitive analysis, I sketched out a paper prototype to test.  I wanted to create two different sketches of the navigation bar and test them both to see which one the users prefer.

 
 
Screen Shot 2019-02-23 at 1.32.54 PM.png
 
 

Findings

Doing this was extremely helpful in choosing a direction to go with redesigning.  I wanted to test which navigation the user preferred and I found that they preferred a layout that allowed them to see all the products in one area, rather than a drop down menu option.  I was able to take the needs of the users and apply them into my next prototype.

 

User flow

 
flowmap (9).png
 
 

SOLUTION

During this project, I was able to redesign the YETI website that allowed the user to easily navigate and shop using improved information architecture. The purpose was not to redesign the business brand or style guide, so I wanted to create deliverable that focused on the main goals of the project. Using Sketch, I created a mid fidelity prototype that meets the following criteria:

  • Have clear ways of locating specific products

  • Steer customers toward popular products

Screen Shot 2019-01-07 at 3.03.44 PM.png
Screen Shot 2019-01-07 at 3.05.35 PM.png
 
  • Provide information about the store’s heritage

  • Establish the brand and its points of difference

  • Allow customers to contact the business

Screen Shot 2019-01-07 at 11.31.04 AM.png
Screen Shot 2019-01-07 at 11.56.22 AM.png
 
  • Support a single page for each product which can be linked to directly

  • Allow customers to read and write reviews  of a products

  • Allow for multiple images per product

Screen Shot 2019-01-07 at 11.37.26 AM.png
Screen Shot 2019-01-07 at 11.46.11 AM.png
 

  • Have an efficient means of purchasing one or more products

  • Steer customers towards similar products

Screen Shot 2019-01-07 at 12.00.46 PM.png
Screen Shot 2019-01-07 at 12.03.25 PM.png
 

CLICKABLE PROTOTYPE video