Green Room Website Redesign

Green Room is an outdoors sporting goods company located in southern California. They focus on beach sports like surfing and wakeboarding, as well as street sports like skateboarding. They also sell apparel for all their sports, as well as snow sports and fishing gear. I worked to improve their online shopping experience and streamline the customer journey and make it enjoyable to navigate the site.

My Role

 

  • UX Research

  • Interview

  • Testing Facilitator

  • Information Synthesis

  • Sketching

  • Ideation

  • Low-Fidelity Designs

  • Mid-Fidelity Designs

  • Artifact Design

Project Objective

The main objective of this project was to create a simpler shopping experience for site visitors. After conducting a Heuristic Evaluation, the main obstacle to overcome was the lack of functionality of the shopping cart and allowing customers to complete a purchase. In addition to enabling purchasing on the site, I wanted to rework the menu to be sorted and organized for better product access.

Research

I conducted a Competitive and Comparative Analysis of sites and brands that were both Direct Competitors to the Green Room and Indirect Competitors that were more aspirational in nature. I found that the Green Room was missing features like actionable Filters, Reviews and the ability to Favorite Items. Green Room has no issues with inventory.

They stock lots of brands and lots of options for the products that you would need for any of their promoted sports. The main issue with the site was the inability to complete a purchase. With that being the main focus, I redesigned the purchasing experience through to completion. I also reworked the product filters, allowing easier access to their products through filtering.

I conducted interviews of young active people who are the target market of Green Room and asked them to go through the site and accomplish User Tasks like finding a specific item, adding it to the cart and attempting to check out. They were frustrated with the lack of site organization, ease of use and, most notably, the inability to check out. This better helped me understand how to smooth out the friction points on the User Flow.

Card Sort

I wanted to know more about the menu setup and how to help with the Information Architecture. To do this, I conducted a Card Sort with classmates. Doing this helped me to bypass my own assumptions about how the main site navigation should be set up and organized and gave me insight into structuring those menus.

A card sort done by a classmate.

The current site menu had over 80 items in one column, this wasn’t helping people find products they were looking for.

Persona Creation

I developed a Persona to help remind me of who I was designing for and to keep me focused on the User’s Needs, and not my own assumptions. The target market for surfing, skating and snowboarding are teenagers and young adults that like to be active and be engaged in their respective sporting communities. Todd is an example of that target market and exhibits the characteristics of those who might shop at the Green Room. Say hello to Todd.

The Persona used for the project.

The Scenario

For this situation, I created a scenario to work within so that I could remain focused on the goal of creating a frictionless shopping experience for Todd. Todd works a lot and has a much-needed vacation coming up. How might we create a frictionless online experience for Todd, allowing him to shop locally for the goods he needs, and receive them before leaving for his trip? Let’s take a look at how we can help Todd.

Low-Fidelity Sketches

I started off with some Low-Fidelity Sketches to get some ideas on how the new site would flow, and incorporate the feedback from my research.

A Low-Fi sketch of the Homepage.

After doing User Testing with the Low-Fidelity sketches and receiving feedback on the clarity of the filters needing improvement as well as refinements on the spacing and product organization, I implemented those changes and moved on to Mid-Fidelity Wireframes.

A Mid-Fidelity design for the new home page. A cleaner, less cluttered look, focused on simplicity and finding products.

After User Testing on the digital prototype, I received feedback on the checkout process about a confusing item with a checkbox on saving the address for billing and mailing. Testers also showed confusion with the final steps of checkout and wanted to see more specific details on the order summary, exactly which items were in the cart, quantities of each item, and the price per item and total cost of the transaction.

Outcomes

The most valuable outcome of this project for me personally was conducting the testing in a consistent manner. In order to remove my own bias and not lead people to certain conclusions, I had to recognize the importance of having a script to read through to give users the most consistent experience possible.

I had to learn to ask questions when feedback or input wasn’t totally clear to me as the person administrating the test. If I, as the person collecting the data, don’t understand the data that is given to me, there is no way for me to be able to translate that data into actionable design and sensical flows.

Next Steps

Next steps with this project would be to take the designs to the High-Fidelity stage. With Mid-Fidelity wireframes set up and tested with users, it’s ready for the next iteration of its design with colors and elements chosen and tightened up. With the High-Fidelity stage done, more testing would be necessary and more iterations from that testing data. 

Setting up the shopping cart to allow purchases would be huge, enabling their online retail business to support walk in customers would be a great benefit.