Paragon Sports — WEBSITE REDESIGN
UXDI @ General Assembly Project 2: E-Commerce Design and IA
The Challenge
In order to stay competitive in a market monopolized by large retailers, smaller outfitters have to fight to remain competitive. Paragon Sports, a specialty shop for high-end athletic equipment and clothing, is looking to design a new version of their website in order to streamline their e-commerce experience.
I was given and “inventory” of 100 products and two weeks to design and build a clickable prototype of my new website.
My Approach
After reading about the UK Design Council’s ‘double diamond’ approach to the the design process, I resolved to model my methodologies after their model.
Discover, Define, Develop and Deliver.
The double diamond diagram divides the design process into four distinct phases and frames the divergent and convergent stages, while depicting the various modes of thinking utilized by designers.
Discover
The first quarter of the double diamond model marks the start of what I like to call the “sponge phase”. This initial portion of a project begins with an idea or inspiration and is often characterized by extreme DISCOVERY. In short, I devoted myself to conducting market research, talking to users, gathering information, observing behaviors and defining the business and brand matrix.
“Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service.”
-Steve Jobs
Contextual Inquiry & Customer Interview
My design journey began inside the Paragon Sports store itself, one week before Christmas. Located in the Flatiron District of New York City, Paragon’s store is simply massive.
Upon entry, several qualities become apparent right away:
- Paragon’s employees are warm and provide a welcome sense of orientation within the specialty shop’s well-stocked walls.
- The business partners with many well-known and top-shelf brand names.
- Not only is the store massive (3 very large Floors), but it is a high-traffic location. Thank god they have staff members around every corner and a “concierge” to provide information, or I might have been too overwhelmed to function.
After perusing the floors and getting a feel for the layout, I began speaking to willing customers and staff members in order to identify pains, pleasures context & behaviors surrounding in-store and online e-commerce experience.
Quotes from Paragon shoppers:
“Paragon goes out of its way to deliver outstanding customer service. That’s how you build customer loyalty — by going the extra mile!”
“The staff are always super helpful and chatty. Most of them are athletes themselves and give great advice.”
“The staff was helpful and always asked if I needed any help no matter department I was in. The salespeople are also athletes, which was good. Who is going to know better?”
Experienced User Interview
In addition to speaking with shoppers in the store during my contextual inquiry, I made sure to gather Intel from experienced users or “Paragon Loyalists”.
Key quotes from “loyalists”:
“If you find any products online that are cheaper than their price, they will adjust with the price matching. If you buy a bike, it’s a lifetime tuning with no extra charge. Paragon really cares.”
“The store has a lot of different sport categories, the big visible sign definitely helps to find what you want. If in doubt, there is employee at every corner.”
Two weeks of frequenting the store, reading yelp reviews and conversations with commuters carrying Paragon shopping bags yielded the following results:
- Paragon is a not only a New York institution, but many of its customers are life time shoppers. It is not unusual to find a golfer of 60+ years who has spent her entire career on the front nine outfitted and equipped by Paragon alone.
- Loyalists enjoy the warmth and generosity of Paragon’s “perks”. (price-match guarantee, life-time bike tuneup and skate sharpening, run club etc.)
- The main draws by far are the top tier brands, knowledgable staff, exceptional customer service and large inventory.
Competitive/Comparative Analysis
In order to properly establish the project goals, I realized that it was important to devote the majority of my allotted discovery time to business analysis. At its very core, Paragon Sports is a business with its own KPIs, stakeholder objectives and direct and indirect competitors. A clear and complete understanding of the unique success metrics, competitive context, brand, culture and business model was integral to my design success.
After speaking with customers, employees and corresponding with management, I dove into competitive and comparative business analysis so that I could best research the problem space.
Primary Goals:
- Identify the direct and indirect competitors
- Identify the stakeholders, success metrics and business model
- Characterize the customers, brand and culture
Secondary Goals:
- Identify the tasks that users need to complete in order for both the business and the users to succeed.
- Subsequently, identify the obstacles and roadblocks to completing these tasks.
- Determine what success looks like in terms of the business goals
Feature & Element Analysis
At the end of the day, e-commerce is a business and Paragon is competing with other retailers for customers. Although Paragon Sports clearly provides top-notch in-store customer service, understanding the user experience presented by their direct competitors was crucial to redesigning their website. Conducting feature and element comparisons helps us asses what each retailer provides .
Heuristic Evaluation
Heuristics are “best practices” in the world of UX world. These established “rules of thumb” are practical methodologies that aid in problem-solving and facilitate optimal solution-building. As a die-hard Abby Covert fan and a self proclaimed “efficiency snob”, the eight honeycomb IA heuristics basically rock my world.
I conducted a qualitative analysis of Paragon Sports and its direct competitors’ e-commerce experience using the eight heuristics of information architecture.
I subsequently converted the qualitative analysis into a quantitivate matrix using the standard IA scale (1=the worst, 5= the best).
Both the qualitative and the qualitative analysis revealed that paragon’s existing site does not provide users with a truly bad e-commerce experience. When compared with its direct competitors, it ranked as “average” (Patagonia succeeded expectations while Sports Authority and Modell’s delivered mediocre shopping experiences). However it is clear that while Paragon’s navigation could be simplified, the e-commerce interface lacked the value, delight and learnability inherent to its in-store experience.
User flow comparisons
Building competitive user flows is an excellent way to asses the user experience of a given site. I asked 4 different users to complete a task on both Paragon’s website and the website of a competing retailer and mapped their user journey.
Users were asked to find a pair of hiking boots, consult customer ratings, add the product to their cart and proceed with checkout as a guest.
Card Sorting
A key portion of my “discovery” phase was devoted to determine the navigation of Paragon’s new site. Over the course of a week I conducted 6 card sorting exercises in order to understand how users interpret and construct mental models of item organization.
I began by conducting an open card sort in which participants were given 100 cards representing the “inventory” and asked to organize the cards in a way that they find most logical, while assigning their own categorical titles. The open card sort is intended to determine the taxonomy and hierarchy of my site navigation.
After several rounds of open card sorting patterns began to emerge, and I came to understand that users typically sorted my inventory by activity or brand NOT gender. Additionally, I was able to flag the “problem areas” (kids, jerseys, tools & technology).
Subsequently, I began to conduct closed card sorting where participants were given a categorical architecture and the same 100 product cards, and asked to sort.
I found that conducting closed cards sort were tremendously helpful with establishing the secondary and tertiary navigation. Additionally, I was able to determine that paragon’s inventory and users truly call for a gender-neutral navigation (with “gender” being a filter option)that instead prioritizes utility and activity.
Personas
A key factor in my research involved understanding the pains, pleasures context & behaviors of the given personas. A Persona is a common tool within the UX arsenal that functional as an archetypical character embodying the traits most commonly found in the average end user.
My primary Persona is John; a tech-savvy parent of a tween-girl who appreciates brand loyalty, streamlined shipping/returns, social proof and intuitive navigation. As a designer I can best serve John by simplifying affordable gifting offering, customer service and highlighting trending items.
As I move into data synthesis, unifying the information gathered from my contextual inquiry with the needs of my personas will help me to establish the my design goals.
Define
The second quarter of the double diamond design approach represents the definition stage in which interpretation and alignment of the objectives is achieves. During the discover phase I was hellbent on solidifying my understanding of the business, the user and the brand contained within the problem space of my assignment. Although I believe in user-centered UX, it goes without saying that good design and true problem solving only occurs at the intersection of the business, the brand and the user.
Thus my data synthesis aimed to consolidate the goals, success metrics, behaviors, needs and challenges of these respective players.
Data Synthesis
Problem Statement
Conducting heuristic, element and feature competitive analysis reveals that the main sources of frustration within Paragon’s existing site stem from the discrepancy between Paragon’s well-established in-store customer service and lack of online support.
Paragon loyalists speak highly of employees’ expert advice, the concierge , and an overall feeling of exceptional service and community within the business’s 18th street store. It is clear that the Paragon Sporting Company brand is characterized by excellence, with respect to both customer service and the products themselves. However my inquiry lead me to discover that the current website does not deliver this same promise. Resources are hard to locate, inventory is overwhelming and perks (such as the price match guarantee) are basically hidden. Without the expert employee around every corner, it no wonder users opt to visit the store in union square.
Furthermore, I fond that many of Paragon’s competitors successfully offer in their e-commerce experience these deliverables that Paragon provides s in store. REI, Patagonia and Northface all manage to include top of the line customer service, brand loyalty, simplified navigation and additional resources WITHIN ONE CLICK.
Develop
Solutions
Based on the combined needs of the business, users, primary persona and synthesized research findings I constructed a list of solutions aimed at triaging the damage of the problem as I defined it.
- Add activity guides/expert advice to steer users towards sport-specific products (geared towards experienced and first time athlete)
- Tailor features and UI to mirror the high-customer support and expert advice Paragon loyalists expect.
- Add “environmental footprint” to product page (working conditions, environmental responsibility supplier chain and material sustainability to product page
- Establish three distinct stores located in primary navigation: including a gift guide and a winter store to facilitate the current traffic
- Include floating support window, much like the Paragon employees at every corner
- Streamline checkout process
8. Establish gender neutral navigation and focus secondary navigation on activity/utility
9. drastically clean up features navigation and footer, while maintaining the current lack of left-hand navigation.
Sketching
As all designers know, ideation as its best occurs with a pen in hand. After defining a problem statement, laying out my design goals and establishing deliverables I sat down with the stacks of visual research accumulated during “discovery” and began to sketch out my ideas.
Information Architecture
Based on the data that I gathered and the patterns that I observed within my card sorting endeavors, I was able to translate the given inventory into an organized site map.
I established my site map with the following goals in mind:
- Minimize cognitive load by abiding by the “rule of 7”— Thus, I contained the secondary navigation to only 4 categories: “apparel”, “sport”, “accessories” & “footwear”.
- Decrease decision paralysis by organizing secondary navigation by activity.
- Eliminate the need for a left-hand navigation and additional taxonomy by including gender, size, brand and color as options for filter/sort
In order to ensure that my IA was clear and cohesive, I participated in a pinup with my fellow designers and collected feedback.
Prototype
Using Sketch I digitized my designs for the re-vamped Paragon website created an annotated wireframe of my website.
Testing
After building my wireframe in Sketch, the designs were imported to my prototyping application of choice (InVision) and my site was live and ready for user testing!
I tested my initial clickable prototype on 5 participants who boasted a range of technological and product experience. Participants were directed to the home page and given a task.
User testing task: You wish to gift a foam roller to a friend who is training for a half marathon. Locate the foam rollers, compare products, read reviews, select a product, add to cart, check shipping and proceed with check-out as a guest.
Through testing my prototype I was able to identify several areas of opportunity where my designs could benefit from improvement. Subsequent iterations were made.
As depicted in the annotated wireframes above, my clickable prototype has 6 main pages including three separate stores (Paragon sports, the gift guide and the winter store). Additionally, the prototype is fully functional and allows users to purchase a product (the vibrating foam roller) in various user paths depending on their preferred point of entry, navigation and product experience.
The following user flows represent three separate users’ journeys from the home page to checkout.
Deliver
The final quarter of the Double Diamond model represents the “delivery stage” in which targets are met, projects are delivered and the feedback loop continues. On the final day of our two week sprint, I presented my data, analytics, problem, solutions and next steps to my fellow designers in a client facing presentation. — And I’m ecstatic to say that it went very well!
Next Steps:
Short Term:
- Continue user testing and iterating
- AB test with potential users to flush out the specifics of the filter and sorting navigation
- Establish clear IA for the “Winter Store” and brainstorm methods to transfer it’s structure to future specialty shops
Long Term:
- Conduct user research to asses specific features intended to reflect brand
- Make Live!
