Gregg’s Cycle

website redesign


GCbellevueV4.png

CONTEXT

Gregg's Cycle first opened its doors in 1932, one of the oldest bike shops in the Northwest with three Seattle area locations. Gregg's Cycle current website doesn't successfully promote new features and doesn't reflect the latest product additions.  The redesigned website should reflect the Gregg’s Cycle brand values of inclusivity in an experience that instills confidence with a layout demonstrating simplicity.

ROLE: Interaction Designer, Visual Designer, Information Architect, Content Strategist

My role was to provide an unsolicited redesign of the website of an iconic local Seattle brand.

DURATION: Two Weeks

DELIVERABLES: User Flows, Competitive Analysis, Paper Prototypes, Lo-Fi Prototypes, High Fidelity Interactive Prototype, Comprehensive Samples


INSIGHTS

InsightPhoto2.png
P2QuoteV3.png

After interviewing the staff at a Gregg’s Cycle location, I discovered a feature that distinguishes Gregg’s from competitors.  ‘Grow with Gregg’s’ is a kids bicycle trade-in refund program that benefits parents who need to replace a kids bike when they grow out of their current bike. The target user persona provided was a budget conscious parent seeking confidence they were getting the best value on a bike purchase.  The vision became clearer, a redesign of the Gregg’s Cycle website to effectively promote competitively unique features while communicating the value of its products to customers.


SOLUTION

Solution.png

The main menu navigator was reduced to from seven to five categories. The revised secondary menu would have no more than eight choices per primary category. The one feature that makes Gregg’s Cycle unique is ‘Grow with Gregg’s’ a trade up refund program for kids bikes. On the current website, this feature was not discovered when tested with users. With a content strategy in mind, I used the details of this trade-in program to create a claim of up to 40% to entice users to click on the feature to learn more. This metric is based on the stated $130 refund on a bike type that had the lowest original cost of $325.


RESULTS

Results.png

The usability tests were conducted by asking participants to place themselves in the mindset of cost-conscious parent purchasing a kids bike. First on the current Gregg’s website then on the prototype. I learned from the first prototype that elevated the Grow with Gregg’s in the carousel didn’t work, users didn’t notice it. In this revised version users saw the feature on the home page as they scrolled down, indicating the new location of the feature was an improvement.

“It’s great how much money I could save is made so clear”

“I like that the bike reviews have priority at the bottom of the page”

”A cleaner look, less options all at once”


PROCESS

 

Competitive Analysis

CompAnaylsis2.png

Gregg’s Cycles doesn’t provide home delivery for bikes as some of its competitors offer. Purchasing a bike online from Gregg’s requires a buyer to pick up the bike from one of three locations in the greater Seattle area. This was to ensure a bike was correctly set up for the rider, this meant that the online experience would always be linked to the in-store experience. After interviewing the staff at the Greenlake location, I discovered a unique kids bicycle trade-in refund program that benefits parents who need to replace a kids bike when they grow out of their current bike.

 

Persona

John1copy.png
 

Problem Statement / Strategy

PROBLEM STATEMENT

A parent needs a way to be confident they have found the best deal on a kid’s bike purchase because they are cost conscious and have high expectations.

I believe that by elevating selected features at Gregg’s Cycle I will create satisfaction with money savings for a parent.

I will know this to be true when parents become repeat customers at Gregg’s Cycle.

STRATEGY

Elevate messaging of the kids bike trade-up refund feature

Prioritize latest additions and reviews

Create a simplified navigation experience, a logical content structure

Deliver an experience that will attract bike purchasing parents and increase customer retention for Gregg’s Cycle

HYPO+PROB.png

Current Sitemap

Before.png

A sitemap overview of the current Gregg’s Cycle website layout.

1 A notable aspect of the site is how many choices are placed in the drop window under ’Shop.’ A total of 10 subcategories and 68 items are displayed at once when the user clicks ‘Shop’ from the primary navigator.

2 The location of the "Grow with Gregg's" refund feature made it difficult for users to find.

 

Feature Prioritization / Card Sorting

The card sorting activities took place in multiple phases. The first was a closed sort of Gregg’s Cycle website features. I performed it myself by focusing on the mindset of the target persona. Taisha Vargas would assist in the next two activities.

The second was an open sort with the same goal but allowing someone to title the groups. The subject of the third and fourth card sort was to prioritize the steps of buying a bike. What I learned from these activities revealed overlapping themes for feature groupings and provided a starting point to apply to the prototype to come.

 

CardSort-FP.png

Revised Sitemap

After.png

The revisions to the sitemap were based on the previous content card sort grouping exercise and the purchase prioritization feedback. The goal was to verify my hypothesis of the persona’s mental model in the prototype to be built for user testing.

1 Analysis of the provided persona suggests that he would resonate with a succinct reduced amount of choices at once.

2 The relocation of the "Grow with Gregg's" refund feature to the home screen would be tested for more visibility.

Home Page Layouts

After sketching out the layout archetypes, I chose the horizontal format as I felt it would be better understood by the persona who frequents websites that have a similar overall layout.  

The page layout sketches focus on the key four to five screens: home, primary navigation, item list, item details, and review.

I next learned what might work by quickly iterating on where to message the ‘Grow with Gregg’s’ refund feature.

Layouts.png
 

Journey Map / Feature Strategy Map

The journey map highlighted where the potential pain points would align to the steps in the process of buying a bike.

The commentary in red highlight pain points, where the persona could become frustrated.

The Feature Strategy Map was useful in pointing out where the optimal moments in the process occurred to elevate the ‘Grow with Gregg’s’ refund feature.

I learned to focus efforts on shortening the path to selecting a bike with consistent terms and elevating messaging of money saving features.

Maps.png
 
 

Wireframes v2.0

P2ScreenNotes.png

Usability Test Debrief

Testees.png

The usability tests were conducted by asking participants to place themselves in the mindset of cost conscious parent purchasing a kids bike.  First on the current Gregg’s website then on the prototype.

I learned the first prototype that elevated the Grow with Gregg’s in the carousel didn’t work, users didn’t notice it.  They did notice the feature later in the process, indicating the timing of the feature was key.

I also learned to strive to keep terms simple, words such as ‘wearables’ or ‘advocacy’ could be replaced with more recognizable words.

An understanding of how the persona would go about buying a bike for a child was helpful in re-organizing the content.

An understanding of how the persona would go about buying a bike for a child was helpful in re-organizing the content.

In this revised version users saw the feature on the home page as they scrolled down, indicating the new location of the feature was an improvement.

“It’s great how much money I could save is made so clear”

“I like that the bike reviews have priority at the bottom of the page”

“A cleaner look, more simple….less stuff”

 

Wireframe Updates v2.1 - v2.3 Annotations

21-23WireframesV4.png

1 Relocate ‘Grow with Gregg’s’ feature

2 Location of feature message seems to be noticed but does the headline make sense?

3 The shipping address seems to blend with the billing address, some users may not realize they bought a bike they have to go to Gregg’s for pickup.

4 The height of the drop down menu is better aligned with the content

5 Footer area has grown in depth by 20 px, information area appears more deliberate and balanced

6 Shipping location has become a radio button, default to Greenlake location?

 

Higher Fidelity Review

Prototype can be found here: https://invis.io/WCNGEDDN6RZ

Prototype can be found here: https://invis.io/WCNGEDDN6RZ

Next Steps

Build the supplement features such as list sorting and user data entry to have a more complete prototype to test against competitors websites.

Review the latest comp with users to validate the higher resolution items that couldn’t have been tested in lower fidelity iterations.