MenuClose
JUST MAKE
IT SEW
Redesign of local e-commerce desktop site.
MY ROLE
UX Researcher
UX Designer
TIMELINE
2 week sprint
November 29 2021-December 10, 2021
TOOLS
- Figma
- FigJam
- uxmetrics.com
PROTOTYPE
PROJECT OVERVIEW
I was tasked with redesigning the site for Make It Sew, a small business located in Bordentown, NJ. Just Make It Sew sells a variety of fabrics, sewing materials, and patterns as well as acting as a makerspace, offering a variety of lessons and workshops.
As a sewist myself (I’ll use the word sewist throughout this case study– seamstress is outdated and sewer, while it sounds good when spoken, is a little too easy to mistake with the public utility when spelled out), I was pumped to find out about this independently-owned fabric shop not 30 minutes from my house. However, as soon as I took a look at the site, I developed some misgivings.
Just Make It Sew has a lot of great products and services on offer that I immediately felt were not best served by their current site. Based on my own experience buying fabric from both large and local retailers, I quickly noted the following issues with the site:
DATED VISUALS
What are key features common to all product configurators?
INCONSISTENT UI
How do existing configurators look and function?
LIMITED NAVIGATION
How do configurators work from a development perspective?
PHASE 1
DISCOVERY
This led me to the question which drove the redesign:
How might I help Just Make It Sew allow their products to shine by standardizing their e-commerce site without losing the essence of the brand?
While my past experience as a sewist drove my initial interest in and observations about Just Make It Sew, I wanted to ensure that my design decisions would not be based on my personal opinions. With that in mind, I created a research plan.
INFORMAL OBSERVATION
What are key features common to all product configurators?
COMPETITIVE ANALYSIS
How do existing configurators look and function?
HEURISTIC EVALUATION
How do configurators work from a development perspective?
MARKET RESEARCH
How do configurators work from a design perspective?
RESEARCH
INFORMAL OBSERVATION
I had four acquaintances take a look at Just Make It Sew’s site to get a general, unscientific temperature check and they did hold back. All commented immediately on the site’s dated visual style and noted inconsistencies in its UI.
It looks like it was built in 1998.
You have your work cut out for you.
The product page layout is really unusual.
COMPETITIVE ANALYSIS
JOANN FABRICS
Large national craft & fabric retailer
MOOD FABRICS
Well-known NYC-based retailer (you may recognize them from Project Runway)
GATHER HERE
Small, independent fabric shop based in Cambridge, MA.
RESEARCH: COMPETITIVE ANALYSIS
ELEMENT ANALYSIS
I began by compiling an element analysis based on the path a user would take when trying to buy a yard of cotton fabric from each of these stores. In a Google Sheets table, I listed the UI elements found on each page at every stage of this user journey. This helped me figure out the ways in which Just Make It Sew was deviating from the conventions of other online fabric retailers.
RESEARCH: COMPETITIVE ANALYSIS
VISUAL ANALYSIS
I also made note of the visual design choices used by Joann Fabrics, Mood Fabrics, and gather here. Each site:
- Has a clean and minimal design
- Has a consistent, grid-based layout
- Has a color palette comprised of black & white plus 1-2 accent colors
- Includes prominent faceted navigation at either top or left side of screen
Armed with more specific knowledge of what the competition is doing, I then moved back to Just Make It Sew for a heuristic analysis.
Inconsistent font sizes and colors
Heuristic Failure: Aestheic & Minimal Design; Consistency & Standards
Twitter button is clickable, Instagram text is not. Elements not aligned.
Heuristic Failure: Aestheic & Minimal Design; Consistency & Standards
Product Listing Page does not follow consistent layout
Heuristic Failure: Aestheic & Minimal Design; Consistency & Standards
Faceted navigation not immediately recognizable as interactive.
Heuristic Failure: Match Between System & Real Word
“Add to Wish List” is blurry & does not follow expected UI pattern.
Heuristic Failure: Match Between System & Real Word
RESEARCH
HEURISTIC Evaluation
To ensure that my redesign improved the most necessary elements of the site, I conducted an heuristic analysis.
- Method: 10 Usability Heuristics for User Interface Design, Nielsen Norman Group. Subdivided each heuristic into 3 sub-criteria
- Scoring: Each subcategory was scored from 0-4 (0 = no issues; 4 = critical failure). 12 possible points per heuristic. Overall score = 64/120
- Major Issues Found: Match Between System & Real World, Aesthetic & Minimal Design, Consistency & Standards
Aesthetic & Minimal Design
Is the user interface design simple and easy to understand?
- Aside from dated color palette, font choices, & layout, some design choices interfere with use.
Consistency & Standards
Is there a consistent design standard for all call to actions (CTA) on the website?
- No—can be unclear when an element is interactive and when it isn’t.
Is there a consistent design standard for headings?
- To an extent yes, but the incongruities between fonts confuses the user’s interaction.
Match Between System & Real World
Are UI elements and interaction prompts easily recognizable?
- Left navigation not immediately recognizable as interactive
- Green truck icon meaning confusing and never made clear until on product page (not interactive)
- Add to Wish List icon blurry and unclear, using arrow symbol rather than heart or star and borrowing gradient color palette from Instagram, which seems like a confusing social media integration.
RESEARCH
MARKET RESEARCH
Although user research was not the primary focus of this project, I decided to create a persona based primarily on research of the craft and sewing market. The persona allowed me to ensure that my personal behaviors and motivations around sewing did not overly influence my designs.
As I researched, I focused on emerging markets within the craft space. According to Mintel’s 2021 US Arts & Crafts Consumer Market Report, “While younger consumers still dominate the space in terms of participation and engagement, consumers aged 45+, dads and single parents have emerged as new target audiences for craft brands to consider.” Sewing is still a space primarily dominated by women, so I chose to make my persona a single, female parent.
From speaking with users of Reddit’s r/sewing, I discovered that gift-giving is a primary motivation of sewists in this age group. Based on this, I created Stacey to help guide my design process.
PHASE 2
DEFINE
Based on the market research, I created the persona “Stacey.” Building Stacey helped me define the problem statement that would guide the rest of my redesign:
MEET STACEY
“Sewing things for others is how I show that I care for them.”
- 47 years old
- Intermediate-level hobby sewist
BEHAVIORS
- Dedicates limited free time to sewing.
- Seeks out the best balance of price and quality.
- Prefers to sew own clothes when possible.
NEEDS & WANTS
- Wants to find best value (lowest price for highest quality).
- An easy way to get project ideas.
- A fast method of buying complete project materials for making holiday gifts.
- To be able to find fabrics that her different family members will like.
PERSONA SCENARIO
Back in September, Stacey decided that she wanted to give her family members home-sewn gifts for the winter holidays. Unfortunately, things got busy between then and mid-November.. Between work, her child’s travel soccer team, and visiting her elderly mother, Stacey hasn’t had much time to sew. However, Stacey feels strongly that personal gifts are more meaningful and memorable– she still has the blanket her grandmother crocheted for her when she was a child– and would like to get her sewing projects back on track. She prefers to shop at local, small businesses, and is hoping that her town’s fabric store will be able to help. She doesn’t have time to go in person, so she’d like to buy online. She hopes that the process will be efficient and inspire great ideas for projects so that she can sew each of her family members a heartfelt gift.
PROBLEM STATEMENT
Stacey needs an easy to use, idea-inspiring website so that she can make her loved ones heartfelt and homemade holiday gifts.
Users first used the left-side navigation to browse the site’s fleeces.
This is the only fabric show as a result of browsing for “fleece.”
“Sweatshirt Fleece in Navy,” the ideal fabric for completing this task, is only findable if the user scrolls through 4 pages of the All Fabrics category.
DEFINE
USABILITY TESTING
I had three users conduct usability tests of the existing Just Make It Sew site in order to verify where they encountered pain points within the user flow.
USER GOAL
Users can navigate to and purchase 1 yard of a sweatshirt fleece fabric with fewer than three errors.
METRICS
- Total time– over 5 minutes = fail
- Verbal expressions of frustration and confusion
- Whether the user resorts to using the search bar
- Minor & critical errors
SCENARIO
You are an intermediate level sewist who is planning on sewing holiday gifts for your family. You would like to purchase the fabric to sew your nephew a sweatshirt. His favorite color is blue.
TASKS
- Show me how you would find a blue fabric suitable for this project.
- Add two yards of the fabric to your cart and proceed to check out.
- Tell me whether or not you qualify for free shipping.
Fascinatingly, all three users failed to complete even the first task — not one was able to find a blue fabric suitable for making a sweatshirt. All users first attempted to find the fabric by clicking “Fleece” in the faceted navigation. Yet no options for blue fleece appeared. They tried to sort fabric by color, but realized that this feature is not available on the site. After trying several ways of locating the correct fabric, all gave up, saying:
- “I think I hit a dead end.”
- “I’d have to shop someplace else.”
- “There’s no colors filter, which is unfortunate.”
DEFINE
CARD SORT
As I got closer to actually designing the site, I realized that I needed to validate user expectations for the website’s information architecture. I decided to conduct a card sort to check whether the the navigation included in my sketches would match the users’ mental models.
Using uxmetrics.com, I created an open card sort using items for sale on Just Make It Sew. I was particularly interested in how users would categorize what the existing website calls “Notions and Novelty.” “Notions” is a sewing-specific term referring to all things additional to fabric that can help a person complete a sewing project. However, if a user is new to sewing, they may not be aware of this term and what it encompasses. Of the five participants in the card sort, only one had prior sewing experience. I was curious to see how this would influence the sort.
Interestingly, each user came up with a different term for these items, and none of them were “Notions.” To further hone in on the correct name for this section, I created a closed card sort with existing category names. I included both “Supplies” and “Notions” as possible categories.
In the closed sort, five new users unanimously sorted non-fabric items as “Supplies.” Not one used the word “Notions.” I therefore decided to use “Supplies” in the site’s main navigation.
PHASE 3
DEVELOP
Using the information gleaned from Discovery and Define phases, I began sketching ideas for the redesigned pages. I focused on creating consistent layouts and using expected e-commerce design patterns. Of particular necessity was a redesign and reorganization of the main and faceted navigation, both on the landing page and product list page.
LANDING PAGE
- simplified header
- simplified main navigation
- hero images
PRODUCT LISTING PAGE
- grid with fixed sizing
- option to favorite & add to cart directly
- faceted navigation to filter results
PRODUCT LISTING PAGE
- uses expected design patterns for UI
- image & image thumbnail sizes and standard
- option to read & write reviews
DEVELOP
LOW-FI WiREFRAMES
As I developed the low-fi wireframes, I continued to focus on solving for the main issues identified in my heuristic analysis: Match Between Systems & Real World, Aesthetic & Minimal Design, and Consistency & Standards. Rather than using unusual UI such as the original site’s unclear “Add to Wish List” button, I implemented the more standard “Heart” UI for liking/saving an item. The wireframes follow typical e-commerce design patterns, aiding a user like Stacey who has limited time and needs an easy-to-use site.
PHASE 4
DELIVER
Once I’d created the mid-fi wireframes, I narrowed in on the visual design choices that would allow me to meet my initial challenge: How might I help Just Make It Sew allow their products to shine by standardizing their e-commerce site without losing the essence of the brand?
DELIVER
VISUAL DESIGN
Color was an important element of both retaining the old site’s brand identity and updating its aesthetic appeal. Using the color picker tool, I extracted the tea green shade used prominently throughout the existing website. This color I then developed a palette
Updated faceted navigation gives users the option of filtering by both fabric type and color.
DELIVER
USABILITY TESTING
After bumping up the low-fi wireframes to high-fi, I had three users test the redesigned site. I wanted to check whether I’d solved for the issues uncovered in the original site’s usability tests: mainly, that items were not organized within expected categories, causing users to give up during their search. I used the same protocol, scenario, and tasks—all based on the needs of the Stacey persona—as used in the original tests.
I was relieved to find that using the redesigned site and information architecture, all three new testers were easily able to navigate to and purchase a blue fabric suitable for sewing a sweatshirt with no errors and in under 2 minutes.
DELIVER
NEXT STEPS
- Build Patterns pages & variations (Shop Women’s Patterns)
- Ensure consistency with fonts & button sizes/shapes.
- Continue to usability test