a responsive e-commerce site

target user

Sew & Stitch's target user is anyone looking for cheap clothing for any occasion.

goal

The goals of this project is to re-brand Sew & Stitch to a modern neutral look and create a good online shopping experience for customers by empathizing with users and identifying their pain points and unmet needs.

my role

UX/UI Designer

green/grey research icon

research

  1. Competitive Analysis
  2. Individual Interviews
green/grey strategy icon

strategy

  1. Persona
  2. Card Sorting
  3. User Flow
green/grey ui design icon

ui design

  1. Branding
  2. Lo-fi Wireframes
  3. Hi-fi Wireframes
  4. UI Kit
green/grey implementation icon

implementation

  1. Prototype
  2. Usability Testing
  3. Affinity Map
  4. Reflection

summary

Sew & Stitch is a clothing store targeting an audience looking for cheap clothing for any occasion. Sew & Stitch is very successful with 400 stores around the world and in 32 different countries. After years of customers desiring an online site, they have finally decided they would like to re-brand to a modern neutral look and create a good online shopping experience for their customers.

green/grey research icon

research

research goals

Since this is Sew & Stitch's first e-commerce site, it is important that we empathize with users and identify their pain points and unmet needs to create a good first-time online shopping experience.

methodologies - competitive analysis

First, I began doing secondary research on online shopping statistics to gather a solid background on the online shopping world. After, I found a few of Sew & Stitch's direct competitors such as Old Navy, Uniqlo, and J. Crew and looked at their websites to see how it was structured, what was working and what wasn't working within the site. Below are my findings.

successes

  • Has a very clean and organized navigation bar and tabs.
  • Good filter options.
  • There are little heart icons in the top right corners of the product so in case you’re thinking of buying a certain product but don’t want to commit just yet, you can save it to decide later.
  • Have a “Wear it with” section with different items and pairings to entice users to buy more products.

frustrations / pain points

  • Popup ads are distracting when you first enter
    the site.

methodologies - individual interviews

After conducting a competitive analysis, I was able to interview 5 participants who have recently shopped online in the last 15 days. During the interview process, I had participants describe their last online shopping experience by telling me the steps they took to browse through different items and how they decided on purchasing a certain product to ensure they will be happy when they receive it.
Below are my findings.

successes

  • Having a good return policy in case they item they bought wasn’t what they expected.
  • Making the returns easy by either mail
    or in-store.
  • Having low shipping costs. Having a better variety of models showing what the product looks like on different body types.
  • Having an endless scroll.

frustrations / pain points

  • Doesn’t like it when websites jumps back to the top of the page choices and you have to scroll all the way back down to find where you left off.
  • Doesn’t like when the website takes too long
    to load.
  • Doesn’t like when items saved in their cart. disappears the next day or next time they decide to visit the site.
green/grey strategy icon

Strategy

persona

Based on my research, I created groupings and similarities between the people I've interviewed to create a persona of a 23-year old college student, Christine Matsuhara.

asian girl wearing a jean jacket

christine matsuhara
young professional

age: 23
occupation: college student
Location: cerritos, ca
last online purchase: 1 week ago

BIO

23-year old Christine Matsuhara lives at home with her parents while attending her last year of college. This semester she is interning at a local marketing firm to gain experience before graduation. Not only does Christine shop for clothes to wear on a day-to-day basis, she now needs to think about adding more business casual attire to her closet for when she gets her full first-time job. Right now, Christine is using a mix of clothes she already has and a few semi-professional pieces that she bought for her internship. Because Christine plans on moving out after graduation, she is more conscious of her purchases and always looks for the best deals. In between classes, Chrstine shops on the Sew & Stitch site for their modern look and very affordable prices. She uses their large range of filters to easily narrow down her options for multiple occasions. She trusts the Sew & Stitch because she knows they have a great online return policy so she can shop with ease.

“It makes me extra happy when I recieve my order in the mail because I know I got the best deal possible!”

associated brands

ulta beauty logouniqlo logotarget logo

goals / needs

  • Provide cheap and affordable clothing online for quick and on-the-go purchases.
  • Have a good return policy to make returning items easy.
  • Likes to be able to view photos of the item she wants to buy on normal people to ensure a
    good fit.

frustrations / pain points

  • Not being able to filter through various pieces of clothing that can be used for multiple occasions.
  • Have a good return policy to make returning items easy. That model size for each item is an unrealistic body type and can’t make a good decision on whether that item will look and fit just as well on herself.
  • Confusing or misleading return policies to trick her into buying a lot but won’t be able to return to get her money back.

personality

extrovert
introvert
extrovert
introvert
extrovert
introvert
extrovert
introvert

tech knowledge

extrovert
introvert
extrovert
introvert
extrovert
introvert
extrovert
introvert

card sorting

For this card sorting project, I had 6 participants using the Optimal Workshop card sorting function. Participants were all female ranged in age: 24-46 years old. For this I focused on female types of clothing and groupings women would make them in. I allowed the participants to create names for the groupings they made. Here is what they came up with:

activewear

active leggins
active tops
Sports bras
sweatshirts

bottoms

cropped pants
jean shorts
maxi skirts
mini skirts
skinny jeans
straight pants

dresses &
Jumpsuits

jumpsuits
maxi dresses
rompers
short dresses

intimates

bras
underwear

outerwear

blazers
cardigans
leather jackets
trench coats

Tops

blouses
long-sleeve shirts
short-sleeve shirts
t-shirts
tank tops

site map

Based on the results of the card sorting project, I was able to create category names for the different types of clothing on the Sew & Stitch website. I then created a site map below.

sew & stitch site map

user flow

I then conducted a task flow on how to buy a shirt in a store. This created a better understanding on how an in-person task is translated to web. I was then able to create a user flow on how to purchase a top on the Sew & Stitch website.

sew & stitch user flow
green/grey ui design icon

ui design

branding

Sew & Stitch recently went through a new transition. Previously, they only sold clothes through their 400 global stores. Now, they have also moved their products online to their new e-commerce site. This gave them the perfect opportunity to re-brand into a modern neutral look. I took inspiration from other brands and boutiques who carry stylish neutral clothing. I wanted to create an elevated look for this re-branding. I decided to go with a modern serif typeface and modified it to create the final mark.

identity

various styles of the sew & stitch logo

iterations

various iterations of the sew & stitch logo

color palette

#3a3a38
#8f9996
#d6d9c7
#e1ddd2
#585959

lo-fi wireframes

With the information I've gathered from my research, and applying the wants/needs for the user, I was able to design lo-fi wireframes for the Sew & Stitch website.

lo-fi wireframes for sew & stitch website

hi-fi wireframes

After testing the user flow on the lo-fi wireframes, I was able to receive feedback and make minor adjustments to the hi-fi wireframes. I wanted to highlight the free-flowing product images in a collage format at the top of section to get users excited to shop for their desired clothing. I made sure to maintain a neutral, modern look and feel by highlighting their color palette and by utilizing the negative space throughout the pages.

hi-fi wireframes for the sew & stitch website

ui kit

After finalizing the hi-fi wireframes, I've created a UI kit to handoff to developers.

typography

Dresses & Jumpsuits

header - gotham | medium | 29px

product details

subhead - gotham | medium | 17px

Lovely dress - the pattern is nice, though slightly more washed out than in the photos, but I think this makes it look cute and vintage.

body copy- gotham | book | 17px

icons

search icon-shopping cart-account icon

social icons

instagram-facebook-twitter-pinterest-youtube social icons

buttons

category pages active button style
normal state
category pages hover button style
hover / click
shop now active button style
normal state
shop now hover button style
hover / click

product image
category page only

girl modeling short orange floral dress

product image
product page only

give modeling short orange floral dress

header image style

reviews

sew & stitch customer review style
green/grey implementation icon

implementation

prototype

To help with user testing, I've created a prototype for the Sew & Stitch website based on the user flow I've created and any unmet needs that were found in the lo-fi user testing round. Want to try it out? Let us know what you think!

test prototype

usability testing

The objective for this usability testing is to search for any user pain points or unmet needs of the design and functionality of the Sew & Stitch site and to test the user flow. User testing was conducted for both lo-fi and hi-fi wireframes.

task

Purchase the Button-Front Babydoll Dress in American Floral.

Task Goals

All users were able to complete the task. Majority of them didn’t have any frustrations or painpoints. I would say one user had a harder time navigating because the navigation bar didn’t have adrop down of categories similar to most e-commerce sites.

Script procedure

Hi my name is Shelley. Thank you for participating in today’s usability testing. I’ll be administering today’s test on a website prototype for a clothing brand called Sew & Stitch.I’ll give you a task and let you browse through the site and complete the task on your own.Please voice your actions and what you’re doing while you’re doing it so I can understand your thought process. During the test, I will be taking notes and I might stop you to expand on certain actions. Feel free to pause and ask questions at any point during the test. Not every item is clickable, so if something isn’t working then that action is not functional.

overall findings

4/6 users took the user flow that began with clicking the Women’s page on the navigation bar. 2/6users took the user flow that began with the Shop by Categories at the bottom of the Homepage.Most users wanted to choose a size for the dress they were purchasing.

reflection

This Sew & Stitch e-commerce site was my very first UX project. Through this project, I learned a lot. During the individual interview process, it was nerve racking because I wasn't sure if I was asking the right questions. Or which information was the most important. It wasn't until later in the project I felt like I should have asked certain questions during that time. This helped prepare me for the next project. Overall, this project gave me a great scope of what UX design is and how to make designs functional for the user.