Overview

Standard Goods is a lifestyle boutique located in the heart of Capitol Hill in Seattle, Washington, USA. With an emphasis on products made in North America, they thoughtfully offer customers quality and unique products at both their retail location and online store.

The goal of the project was to improve the eCommerce site by performing an evaluation of the site’s navigation system and overall usability to better meet the needs of the client supplied customer/user persona.

Project Timeline: Two Weeks
The UX Team of One: David McLean

My Role

Research | User Testing | Information architecture | Interaction design

Including research, competitive/comparative analysis, site navigation audit, wireframes, interactive prototype, user testing, design iteration and SUS score evaluation based on a user survey.

DISCOVERY

Problem

We have concluded that Standard Goods isn’t meeting users’ needs to make informed choices during their online shopping process, which is causing a feeling of confusion, frustration and distrust. How might we improve so that their online experience is more successful based on increased online sales and email signups?

Solution

An eCommerce website that creates trust, eliminates frustration and confusion for it customers should offer these features:

  • An intuitive navigation system
  • Relevant categories and filters for site organization and search
  • Multiple beautiful product photos with detailed and creative descriptions
  • An easy and efficient checkout process
  • The ability to opt-in to receive email marketing via a global call to action banner
  • The ability to write reviews about the products or Standard Goods on platforms like Yelp.
  • A responsive desktop and mobile friendly design

Competitive/Comparative Analysis

The analysis of two retail stores within two miles of Standard Goods revealed that Standard Goods does have some unique advantages, but there are things they could be doing better. For example, Hammer + Awl’s website reflects the store’s brand, they have an email sign up call-to-action, well-written content and their site has a good navigation system. Standard Goods does have more unique, edgy products choices that are urban/retro in style.

Standard Goods

Offers men’s and women’s clothing and accessories, bags, housewares, paper goods, games, puzzles

eCommerce service: Shopify

The website does not reflect their brand

Poor site navigation and filters

No Call To Action

Little to no written content

Email signup in the footer

Unique: 

150+ brands/400+ products

Offers humorous edgy products

Urban/retro styles

Hammer + Awl

37 brands/100 products

Offers men’s apparel, accessories, personal care, bags, housewares

eCommerce service: Shopify

Unique:

The website reflects their brand

Email sign up Call to Action

Well written content

Good site navigation and filters

Offers free local shipping to Seattle

Eurostyle Your Life

250 brands/280 items

Accessories & gadgets, fashion, green cleaning, house & kitchen, interior decor, toys & games

eCommerce service: Custom

Poor site navigation and filters

No Call To Action

Little to no written content

Laura Berlinger

“It’s not whether I can afford it, it’s whether I can afford NOT to have it!”

29-year-old scriptwriter | Cares About: Authenticity, exclusivity, and uniqueness of purchases

Laura has a well-developed collection of fashion and jewelry and is a big fan of ‘retro-chic.’ When something catches her eye, she must have it, whatever the cost. She considers herself a digital native and a smart consumer, and she loves to download new apps, check out technology trends, and show off her purchases. As a writer, she has a keen eye for sharp copy and likes brands which express their personality through their words.

Needs from an online store

  • An authority on product inventory
  • Regularly updated inventory
  • Fast shipping
  • Able to purchase from mobile
  • Able to submit product reviews

Pain Points

  • Poorly written website copy
  • Too little choice of retro stuff
  • Lengthy checkout process
  • Services that don’t work on mobile
  • Wants to be sure of small product details

How can we serve her

  • Characterful copywriting
  • Efficient checkout process
  • Responsive website
  • Multiple/large product photos
  • Ability to submit reviews of products

Tech empathy: High

Purchase cycle: Short

Has: MacBook Air, iPhone, iPad

Favored brands: MailChimp, Uber, Urban Outfitters, Scotch Malt Whisky Society

Favored channels: Mobile web/apps, Twitter, Instagram

Bringing Value

How might Standard Goods create value for Laura and the business? Becuase they offer a number of products, have a mobile-friendly site and efficient checkout process, they are already meeting a number of Laura’s needs as an eCommerce consumer. By incrementally addressing the poorly written product details and restructuring their site navigation, they could make an immediate impact.

Standard Goods

Pain Points

  • Attracting customers
  • Competition from large business
  • Cost/fees of running a small business
  • Taxes
  • Managing a store and online business

Business Goals

  • Earn a profit
  • Maximize reach
  • Improve their image/brand
  • Connect with customers on a business and emotional level

Laura

Pain Points

  • Poorly written website copy
  • Too little choices
  • Lengthy checkout process
  • Services that don’t work on mobile
  • Wants to be sure of small product details

How can we serve them

  • Characterful copywriting
  • Efficient checkout process
  • Responsive website
  • Multiple/large product photos

INFORMATION ARCHITECTURE

A closed card sort exercise was performed with users. Prior to the card sort, the main site navigation categories were determined along with the sub-categories. Users were asked to sort the products based on the pre-set main and sub-categories. Based on this exercise, the new site navigation system was created. To better organize the products under the sub-categories, mega menus were introduced.

DESIGN

Sketching and Prototyping

Alternate layouts for the home page were explored.

Standard Goods - Home page - Sketch Options

USER TESTING, INSIGHTS & ITERATION

After a busy day at work, you have arrived at your apartment. You have plans to meet friends for a late dinner. After pouring a glass of your favorite wine, you head to the couch with your new laptop to spend some time researching backpacks at a favorite local store with online shopping. If you find one you like, you’re ready to purchase. The thing that is important to you for this purchase is functionality. Black and white are your favorite colors. You also like reading the details and stories behind the products you buy.

From the website, find backpacks and choose one that fits your style and shopping preferences.

Finding the Product

All three users used the Accessories Megamenu and Filters to narrow the search for the backpack.

Decision Process

All three users preferred to scan the page of available products in the bag/backpack category first. Two applied filters to narrow the search to backpacks, followed by the colors black and white. One filtered to backpacks only.

“I prefer to filter to a default. Once there are only a few products on the page, I’m comfortable viewing all the products to make my choice.”

Purchase Choices

Users made their choice to purchase based on the features and the product that had the best story associated with the product.

Insights/Iterations

  • Where a product is used (outdoors, city etc.) should be considered as a filter
  • There was confusion about which item was selected from the filtered and sorted results below the select image. Adding an indicator of the previously viewed item in the list should be considered.
  • Because this user prefers searching for items by scanning left to right, a filter to set the number of images viewed on a row/page should be considered.
  • The font size of mega-menu links was an issue for this user. A larger font size should be considered for the mega-menu links.
  • Not seeing “sold out” until you click into the product details page caused a negative reaction. Labeling out of stock items in the product category should be considered.

Based on the user insights the view menu was added to the products pages allowing the user to set the number of products they could scan/view on a page.

Standard Goods Bags/Backpacks

System Usability Scale (SUS)

A system usability survey was given to each user who participated. A SUS score above a 68 would be considered above average and anything below 68 is below average. Standard Goods scored an 80 or a grade of B+ during the usability tests of the wireframes.

NEXT STEPS

  • Address the site architecture/navigation
  • Audit of products (goal to reduce their manageable inventory)
  • Audit of site categories (to improved filters and search)
  • Update product descriptions (to include better details). Update them incrementally starting with the most popular products first.

WHAT I LEARNED

Never design a website without first creating a good site architecture. GOOD = Designed with the user input and needs in mind.

Capuli Club

Capuli Club

How might we create a subscription service that gives patrons a positive experience while educating them about sustainability and wellness?

Visual Design – Project Management

Jane

Jane

How might we create an effect and engaging meeting experience for both the facilitator and participant?

User research – User testing – Interaction design – Visual Design

Orca Card 2

Orca Card 2

How might we improve the Ocra Card experience by providing transit riders with a solution that aligns with their on-the-move lifestyle?

Visual Design – Project Management

Blueberry

Blueberry

How might we create a mobile application to improve the grocery shopping experience?

Interaction design – Visual design