Retrofit Home

THE CHALLENGE

Retrofit Home is a furniture and home goods store. The online site is not meeting the users needs of easily finding items of interest, causing users to leave the website without purchasing, and compromising the interest in the overall brand itself. Retrofit Home’s website needs to be an intuitive and enjoyable experience that satisfies the target user needs, while simultaneously bringing more website based revenue for the company.

THE SOLUTION

I created a site redesign that simplifies the navigation bar and the e-commerce user experience. The site redesign ensures satisfaction and enjoyment through an intuitive, easy to use website. By reducing the workload, users are more likely to purchase items, return to the site, and recommend the business to others.

MY ROLE

I was the sole User Experience Designer on this project.

TIMEFRAME

2 -week Design Sprint

I utilized skills in:

  • Research

  • Content Strategy

  • Interaction Design

  • Information Architecture

  • Visual Design

  • Usability Testing

programs:

  • Sketch

  • Omnigraffle

  • Invision

This project tested my UX skills as well as time management, creative confidence, and problem solving. I was given a target persona to guide my research and redesign.


THE PROCESS

I found areas of opportunity for Retrofit Home’s site by researching the current users of the store and the website. I interviewed stakeholders at the company and observed users in the store, which allowed me to identify the target user. Understanding the target persona and competitors in the market informed my redesign. I sketched, created wireframes, and prototyped my designs based on the needs for the persona. I performed usability testing with clickable prototypes to validate my design decisions.


THE DESIGN PROCESS

RESEARCH

My research began with familiarizing myself with the Retrofit Home website to get an idea of the current site flow, and any immediate areas for improvement. I took notes of inconsistencies or redundant information that might be increasing the cognitive load of the user.

I would need to learn more about the company and the user before diving into a website redesign. My next step was to visit the brick and mortar store, ask questions of employees, and observe users and inventory.

I found that the physical store has more inventory than the website shows, and the website does not accurately reflect store environment.

I learned:

  • The business believes their customers do not want to pay for furniture shipping, therefore they do not sell furniture online

  • Retrofit Home sees about 100 website views per day but less than 5 sales per month

  • Users drop off at the shop now page

Speaking with the manager and viewing the store were very helpful for me to get an idea on the people that shop at Retrofit Home, and an idea of the strengths and weaknesses with the website. What I learned gave me an immediate opportunity for user research to find out if the assumptions about users were true.

IMG_7882.JPG

Using a Persona

Since personas were provided to us for this project, I needed to make the right decision based on what I had observed in the store and from my interview with the store manager.

Persona Provided by General Assembly

Laura is a typical user for Retrofit Home, and she personifies the type of shopper to frequent the online store, as long as it fits her needs.
Laura is often shopping on her mobile phone while she is on the go. Users like her need multiple, large photos, an efficient checkout process, and a responsive website to help her shop on the go. Laura likes to be able to submit product reviews and read others’. She wants to be sure of small product details and have regularly updated inventory on new/featured items. In order for me to complete a successful redesign, it was imperative for me to keep Laura’s needs and frustrations at the forefront of every design decision.

After viewing the store I began doing competitive and comparative analysis of Retrofit Home to similar stores as well as larger “curated” furniture stores. I compared Urban Outfitters, Perigold, Loft63, and West Elm.
I did a layout comparison to see the readability/scannability of the websites, and to see which sites had large pictures and well organized information. My persona, Laura, emphasized her need for large images and well organized information.

Layout Comparison.png

I did a feature comparison and simply evaluated if the websites contained the important features that my persona requires. (highlight important features)

Feature Comparison.png

And finally, I did an element analysis to analyze the information on the website in the layout page, header, footer, and checkout pages.

Element Analysis Comparison.png

With all of the needs of Laura outlined, I needed to understand her flow through the current website to purchase an item. I made a replication of the current sitemap in Omnigraffle.

Sitemap

As seen in the current sitemap, the Shop Online doesn’t have its own page, so a user cannot see everything to offer if they wanted to, they have to browse each individual section. I wondered if this could be an issue causing users to leave the site without purchasing, as mentioned by the store manager. Additionally, I noticed that several page links can be found at multiple locations on the site - this repetitive information causes confusion for the user.

Building the current site map really helped me see the site layout and find several issues that users like Laura were facing when navigating Retrofit Home’s site.


Canvas 1.png
IMG_7923.JPG
Canvas 2.png

Card Sorting

In my research phase, I completed card sorting of the information and inventory on the website. I performed 3 open card sorts to have people try to make sense of the items offered on the website and to come up with how many categories people saw fit for the site. Based on the categories that resulted from my open card sorts, I then I performed 4 closed card sorts and had people sort the inventory under given categories. Card sorting proved that I could narrow down the inventory into much fewer categories and my new category names were more intuitive as to what would be found in each category.

Design Phase

Using all the gathered data on Laura’s current flow through the site, the current navigation, card sorting data, and new user flow using the redesigned navigation, I was able to begin sketching ideas for the website redesign.

I used sketching as a tool because I wanted to quickly get my ideas from card sorting out on paper so I could visualize the new layout. After sketching I began creating wireframes that show at a low level, the new navigation and user flow through the site. My wireframes gave me a good testing point to see if the target user is able to complete their desired task easier than on the current site.

IMG_7935.JPG
IMG_7936.JPG

My redesign differs from the current site in that I drastically simplified the navigation header and the categories on the second level navigation.  I also took a look at the links on the footer, and only included unique navigation buttons in the footer – the site before had many links that were duplicates of the top header navigation.

I performed usability testing with 3 users on my first wireframes.

RF HOME Mobile_LandingPage.png
RF HOME Mobile Shopping Cart.png
RF HOME Mobile_LandingPage Copy.png
RF HOME Checkout.png
RF HOME Mobile_Product List Page.png
 
RF HOME Payment Complete Page.png
RF HOME Mobile_ProductPage Copy 3.png

Usability testing validated that the redesign simplified the entire e-commerce process. Users were able to find the item they were shopping for very quickly, and had the option to search if needed. Once finding the item, users said that having the product details and reviews available to them would help them in purchasing the product. Adding to cart and checking out was intuitive, with minimal cognitive load.

The redesign did have some usability issues – why were people not using the hamburger menu? Were they not seeing it? Was it not necessary for their desired task? Or was my wording in the task scenario leading them to images and copy before needing to explore the menu?

These questions informed my first iteration of the redesign.

I decided to enlarge the hamburger menu, to see if that would help users find it quicker. I also had the choice of changing the image copy or reframing my task scenario for the test. I decided to change the image copy, since my thought was these images would frequently change based on inventory. I kept my task scenario the same for the next round of usability testing.

In the second round of usability testing, users still wanted to browse the large hero images now showing “shop new arrivals” and “shop one of a kind” but ultimately needed the hamburger menu to complete their task flow. Having an easily accessible hamburger menu on the mobile site is important for my user, Laura. I know that Laura is usually shopping on the go, and she can be frustrated by convoluted searching or a lengthy checkout process. My final iteration of my redesign presents clear shopping categories, and a simplified checkout process for mobile shoppers.


Next Steps

For future considerations, I plan to build a high fidelity visual comp showing the mobile redesign and a desktop version. These would create more realistic usability testing. I would like to perform A/B testing with one redesign having a hamburger menu and the other having navigation links across the global navigation bar. My goal is to make the shopping experience as intuitive and easy as possible, and I think it is important to find the quickest way to help users find what they are looking for.

Users were pleased with the checkout process in my redesign. The only issue was needing a back button to get to the previous screen. I would like to incorporate a breadcrumb and perform usability testing to see if this satisfied user needs.

Understanding the business as well as potential competitors is crucial to getting to the core of user behavior on e-commerce sites. I would ultimately like to use analytics to find out if my redesign has increased the number of online shoppers.

I would like to add furniture to the website so that the online site is more aligned with the physical store. I would again use analytics to see if my redesign helps to sell furniture online.

What I Learned

In this project I really learned the importance of time management and time blocking. It is really important to set time frames for yourself, especially when you are the sole designer on a project. It is really easy to get caught up in minute details, and I learned that my wireframes do not need to be perfect, instead they just need to be able test my idea.

In this project, I learned the importance of button and image copy. The copy that I had on my hero images led my users to click on the image, and this was not my intent for the redesign. It is important to not lead users to answers through button copy or usability test scripts. We want users to find the answers on their own.

What I Would Do Differently Next Time

If I were to complete this project again, I would really like to perform more user research with Retrofit Home customers. I would like to create my own persona to ground my redesign in an even more realistic user for this business. In my design process, I would spend less time on small details in my wireframes and instead have time to complete another round iteration and usability testing. I would save more time for creating a high-fidelity comp and ideally perform usability testing