GREAT SCOTT
A responsive website redesign and added features for an e-commerce, retail clothing company to ensure a smooth, seamless, easy, and more joyful shopping experience.
Project Type
Responsive Redesign &
New Additional Features
Tools
Figma, Figjam,
Whimsical,
Optimal Workshop, Maze
Role
Product Designer &
UX Researcher
1. OVERVIEW
THE BRAND
Great Scott is an e-commerce retail company operating out of the United States. Great Scott sells women’s clothing and accessories, as well as baby & toddler and dog apparel. Most items are handmade with the exception of some manufactured items. Great Scott is online only, there are no brick and mortar locations.
CONTEXT
Shopping online can be a fun experience that allows for universal convenience, however, without proper landing pages or a clear navigation, customers can grow confused and find it difficult to search and find items. The main goals for Great Scott’s website are to:
Create an easier/more enjoyable shopping experience for returning customers and to increase customer retention
Attract new customers and account holders
Make the checkout process as seamless and effortless as possible
THE CHALLENGE
Great Scott customers are hitting major pain points, specifically when they are trying to browse particular categories, making it difficult to find particular items. Customers are also feeling overwhelmed by the different background designs and inconsistencies.
THE SOLUTION
Restructuring Great Scott’s Information Architecture will help alleviate user pain points and allow users to better understand how to navigate to the item/category they are looking for, creating an easier and more accessible user experience. By re-establishing the site map, categorizing labels to user’s mental models, and creating a consistent and cohesive design system, users will be able to easily navigate the site and find exactly what they are looking for eliminating any confusion or frustrations.
DESIGN OBJECTIVES
SIGNIFICANT OUTCOMES/RESULTS
By implementing a site redesign, Great Scott’s business was positively impacted. By empathizing with Great Scott’s customers and discovering their mental models, I was able to design a clear, impactful, and user friendly shopping experience that eliminated frustrations.
2. EMPATHIZE
To understand the pain points and goals of current Great Scott customers, I employed 3 distinct research methodologies.
1. COMPETITOR ANALYSIS
Key similarities:
All companies offer a return window for physical products
All websites provide some sort of customer service/a way to get in touch
All websites have a customer review feature to view/write reviews
All websites have an account login for returning customers
Key differences:
Some competitor companies offer a rewards program/ensure customer loyalty
Some websites have more defined categories to help users filter to a more specific grouping of products
Some competitor companies offer free returns in-person and online
Some websites offer a live chat feature
2. USER INTERVIEWS
I conducted 10 user interviews with participants ranging from 28-70 years old. All participants identified as female and all participants have previously shopped and purchased from Great Scott’s website. Through affinity mapping, I was able to find common themes:
Shopping for specific items was difficult
Participants found it difficult to filter or find specific items to browse
Participants were frustrated that there wasn’t an easier way to find a category of items and had to sort through most of/all of the inventory to find what they were looking for
Struggles with website inconsistencies led to user confusion/challenges with trusting the website
Inconsistent designs and color palette led to user confusion and distrust
Customer reviews would help shoppers
Website isn’t responsive -- feels incomplete to users
Participants found the continuous scroll to be frustrating and were annoyed by the lag time
3. SURVEY
I created and distributed a survey to current and previous Great Scott customers through email. It was completed by 7 men and 53 women in their 20’s - 70’s. The following takeaways were noted:
Biggest frustrations while shopping on Great Scott’s website:
Hard to navigate
Difficult to sort categories/sub-categories
Lack of customer review feature
Inconsistencies within site/responsiveness
Website looks amateur/hard to trust
Endless scroll load times/difficulty finding items
Biggest frustrations when ordering items:
Lengthy checkout process
Not able to review/confirm order easily
3. DEFINE
I synthesized the insights gained from the interviews to create representative personas to humanize the user and to guide later design decisions. My research led me to identify two user personas: Gretchen, ‘The Gifter’, and Stella, ‘The Self-Shopper.’
Creating these specific personas allowed me to eliminate any personal bias I may have initially started with. The most crucial needs for users was to clearly browse categories, understand and learn more about the quality of an item they are viewing, and to checkout quickly.
USER JOURNEY MAP
From my research findings, I was able to scope the user journey of Great Scott’s current customers and visualize their feelings and pain points with their current online shopping experience.
IDENTIFYING THE PROBLEM & DEVELOPING SOLUTIONS
Once I was able to determine user goals, motivations, and current pain points, I was able to define the user’s Point of View and up with solutions through How Might We statements.
PROJECT GOALS
Before making any design decisions, I mapped out different business and user goals to showcase common themes and technical considerations. I then met with the Great Scott stakeholders, presented my findings and reviewed all considerations to make sure that all parties were aligned before proceeding.
BUSINESS GOALS
Increase sales
Increase number of account holders, returning customers, and new customers
Provide a joyful and fun shopping experience
Provide an easy browsing and checkout process
USER GOALS
Shop for items quickly and easily
Browse categories and sub-categories without confusion
Fully understand an item’s size, fit, and quality
Place an order easily without hitting any errors
Navigate website easily
FEATURE SET
In order to support my user and business goals, I prioritized the features that went into the product. Must Haves were high priority for this particular sprint, and Nice To Have are features that I will tackle in the future.
INFORMATION ARCHITECTURE: CARD SORT
Originally, Great Scott’s architecture was highly complex, so it was key to discover user’s mental models by discovering how they sorted different cards into categories. To gain insight, I ran a hybrid card sort:
Key Takeaways:
The majority of participants created a new category entitled, “Dog,” and placed all of the dog related cards under this newly formed category
“Tote Bags” category was unused and instead, participants nested “Tote Bags” under “Accessories”
Participants felt that a “Face Mask” category was unnecessary and nested “Face Masks” under “Accessories
TREE TEST
To get a better sense of how users navigated Great Scott’s original website when given specific tasks to complete, I ran a tree test to test the find-ability of topics within the site.
Key Takeaways:
Participants expected to find Tote Bags under the category of Accessories
Participants expected to have the option of sub-categories to refine their browsing when shopping for Denim Jackets in the women’s category
Participants were confused where to find dog items and searched under almost every tab before landing on Accessories
4. IDEATE
SITE MAP
I created an updated site map to reflect user’s mental models to use as a provisional blueprint of the site’s IA. Originally, Great Scott had 7 categories within the navigation: Accessories, Baby & Toddler, Women, Tote Bags, Face Masks, Sale, and Shipping & Returns.
At first glance, it seemed easy enough to navigate through the original site, but once users tried to complete certain tasks, they were confused, frustrated, and felt lost within the site. For example, when users tried shopping for dog items, they didn’t know where to begin since it wasn’t clearly labeled within the navigation. I relied on my card sort and tree test to help mitigate any confusion, to determine user’s mental models, and to create a more enjoyable and easy user experience.
Redesigned site map:
Sitemap Changes:
I created sub-categories under each initial category within the navigation so users will be able to browse a more defined item’s list and filter/sort their shopping interests more quickly and easily
I nested ‘Tote Bags’, ‘Face Masks’, and ‘Hair Accessories’ all under ‘Accessories
I created a separate ‘Dog’ category so that users will be able to navigate, shop, and browse for dog items with very clear and concise intention, making it a more enjoyable user experience
USER FLOWS
To help visualize the decision points and potential pathways that users may take in order to complete functions within the product, I created a user flow centered around browsing baby and toddler boy pants.
Once the user is on the ‘Baby & Toddler’ page, they will have to decide which sub-category to shop
After the user has chosen their desired category option, which in this particular user flow is pants, the user will be directed to the ‘Baby & Toddler Pants’ product page
The user will then have to filter/sort to ‘Boys’, where they will be taken to the baby and toddler boy pants to view and browse
TASK FLOWS
To center on each specific task, I created task flows to focus on one singular path. From my user flows, I created multiple task flows. The 2 task flows shown below are as follows:
Browsing boy baby and toddler pants
Browse for a dog sweater and read customer reviews
LOW FIDELITY WIREFRAMES
Once I identified the key pages I was designing for, I took pen to paper to sketch out different possibilities of the site’s design to then translate into wireframes.
Since 90% of users said they use both desktop and mobile to shop online, it was necessary to design a responsive site since Great Scott’s original product wasn’t responsive.
Through sketching, I experimented with different ways to group and design the visual hierarchy to represent the sub-categories and tested each one to find which was the most user friendly.
5. DESIGN
MID FIDELITY WIREFLOWS
After running a usability test on my sketches, I digitized to mid fidelity wireframes to ensure that the product was structured in a way to support and facilitate both user goals and business goals before committing to high fidelity. While designing the Wireframes, I kept the following considerations in mind:
Design responsiveness — users struggled when trying to browse and order from their phone on Great Scott’s original site so creating a responsive design was a top priority
Since current Great Scott users were hitting problems when it came to navigation, making sure that the product provided an easy way for users to navigate throughout the site & feel confident was important
LOGO, COLOR PALETTE, & UI KIT
Since Great Scott was an already established brand, the stakeholders wanted to keep their color palette and logo similar as to not confuse their users, however, they were open to subtle changes to improve consistency and accessibility.
Without making any major changes, I updated the logo to the new color palette. Because blue was never in the original Great Scott color palette and was only featured in the logo, I changed the cow to the brand’s pink color, while outlining it in a dark orange to create cohesiveness throughout the logo and entire site.
Due to button and overall inconsistencies within the site as well as major inaccessibility issues, I built a cohesive component library to better improve overall consistency within the product.
HIGH FIDELITY PROTOTYPES
With the color palette and component library updated, the re-design and additional features to the mid fidelity wireframes evolved into high fidelity prototypes. Below are screens of both desktop and mobile.
Desktop
Homepage: I wanted to keep the homepage simple and easy to navigate so I created clear and easy to read categories within the navigation which will allow customers to browse and shop the site without wasting time
Women’s Landing Page: Because users were extremely frustrated by the lack of being able to pick and sort through sub-categories, I created a landing page to allow users the option of sorting through sub-categories or being able to shop everything
Mobile
Homepage: I created a responsive web redesign so that the Great Scott website can be viewed from any size screen
Dog Landing Page: In order to create the most user friendly experience, I created a new dog category with a Dog Landing Page so that customers could pick between sub-categories or shop all dog items
Dog Sweater Product Page: Per research findings, I added a customer review section where users can either click on the stars or scroll down the page to view the customer review section
6. TEST & ITERATE
USABILITY TESTING
My goal was to see if users could successfully complete task flows to test the ease and usability of the product. All participants in this moderated test regularly shop online and/or have previously shopped at Great Scott.
The tasks were as follows:
Purchase the Yikes! women’s denim jacket in size medium (desktop)
Browse for baby boy pants (desktop)
Browse dog sweaters then look up/read reviews for the ‘Feather Sweater’ (mobile)
Findings:
All participants were able to complete their tasks, however, ease could be improved.
IMPROVEMENTS/ITERATIONS
I prioritized my feedback to make changes to my designs based on findings and results from usability tests and to adhere to standard design practices.
Homepage adjustments:
I adjusted categories within the navigation to user’s mental models, designed a larger search field, and condensed the logo to allow more space for the other elements within the navigation.
After user testing, I redesigned the top banner to only display news about the free shipping offer and moved the ‘sign in/sign up,’ ‘sign up for email,’ and currency down to its own section, creating length and spatial hierarchy within the navigation.
I designed a hero section with a clear CTA, something that was absent from Great Scott’s original design. Plus, I made sure that all copy was readable since not all copy on the original site’s images passed accessibility testing.
After usability testing, I added weight to the category titles copy in the ‘Shop By Category’ section to give them more significance than other copy on the page.
To create the most accessible site possible, I designed matching, consistent buttons and redesigned the footer, changing the email subscription colors to pass accessibility testing.
Landing page adjustments:
To mitigate user frustration, I designed a landing page to provide customers the option to sort and filter their search within sub-categories. A true landing page provided users a much more enjoyable shopping experience.
After my first round of iterations, I discovered that users also wanted the option to shop everything so I added a ‘Shop All’ link to the top right of the sub-categories.
Product page adjustments:
I added a customer review section so users can either click on the stars or scroll further down the page to read/write a product review.
I changed the size selection from a dropdown accordion to a click-able interactive element to create a faster and easier shopping experience.
To be more accessible, readable, and to create a consistent and cohesive design across the entire site, I changed the color and copy of the buttons while also making the size and font larger.
FINALIZED DESIGN
Click below to interact with my desktop and mobile prototype. Ease and accessibility were greatly improved which led to the increase of sales, increase in account holders and site sessions, improved find-ability, and overall user satisfaction.
Desktop Flows:
Shop for Yikes Denim Jacket, add to cart, and checkout
Browse baby boy pants
Mobile Flow:
Browse for dog sweater, ‘Feather Sweater,’ and read customer reviews
7. REFLECT
RESULTS
By empathizing with Great Scott’s customers and discovering their mental models, I was able to design a clear, impactful, and user friendly shopping experience that I’m proud of.
SEO Optimization: eliminated the continuous scroll, changed copy with key words, tightened spatial hierarchy and added a hero section with a clear CTA
Increase in Site Sessions, Sales, and Account Holders: responsive design, consistent design patterns and elements, cohesive site across all screen sizes
Decreased Return Rate: integration of the customer review feature
Improved User Satisfaction: The entire redesign proved that the user experience improved due to a cohesive design system with a simple and easy to use product that is accessible to all
WHAT’S NEXT?
As the Product Designer for Great Scott, I will continue long-term maintenance on the website and new project sprints
I will continue different research methodologies to iterate and improve my designs as well as add new features to create a more enjoyable customer experience that will also benefit the business goals