InStep Redesign

 

Brief

The Project

As the final project of the General Assembly User Experience Design Program, my team was assigned the redesign of the InStep website. InStep is a local shoe store chain that specializes in foot-friendly, fashionable shoes.  InStep would like help with improving the shoe shopping experience, a brand refresh (including logo), and bringing the site up to date with their current social media channels.

Team

Chris White 

Activities

UX Design, Research, Information Architecture, Taxonomy, Visual Design

TOOLS

Pen and Paper, Trello, Typeform (Survey Software), Adobe Illustrator, Axure, Sketch, InVision

 
 
 

Problem

Users are having difficulty with the checkout process. Users end up calling the store or abandoning their carts.

The client has difficulty keeping online inventory up to date, as the online inventory and store inventory software are currently separate. The client has to manually update their online inventory, which sometimes causes online sales of shoes that are not available.

The current website does not reflect the atmosphere of the store and current social media channels. Users believe the site is an informational website for shoe/foot health or that it is only selling orthopedic shoes.

Solutions

The checkout process needs to be streamlined, and users need to be made aware of size limitations and additional services offered early in the shoe shopping experience.

Traditional design and taxonomy conventions need to be applied to the layout and navigation.

 

 

 

 

Research

SURVEY Insights

  • 39/60 votes assumed the website was targeting 31-60 year olds

  • 56% said InStep did not offer customization

  • 11/27 said the website offered orthopedic/medical shoes and/or information about shoes

COntextual Inquiry

  • Users were having a difficult time with the check out process, which caused more work for staff as they would have to walk them through the process by phone
  • Sales are updated on a daily basis in store, but users that visit the site are unaware of them
  • Customers are having a difficult time locating the stores
  • Over half of the customers that come to the store are repeat visitors. Some customers have been coming back for over six years

Heuristic Analysis

  • Aesthetic and Minimal Design
    • Distracting information
    • Dated design
  • Error Prevention
    • Assistance is available post-purchase
  • Consistency and Standards
    • Layout and style is consistent
    • Navigation is not in accordance with design standards
  • Flexibility and Ease of Use
    • Lack of accelerators for frequent users

COMPETITIVE / Comparative analysis

 

Karavel Shoes

  • Design aesthetic consistent, but dated
  • Navigation difficult to follow
  • One breaking point
  • Lacks online purchasing option
  • Site lacks a cohesive Information Architecture: Information is not in a clear top-down hierarchy,
    no breadcrumbs

Zappos.com

  • Large cognitive load competing with relevant information
  • Extensive mega menus making taxonomy problematic
  • Shopping cart cluttered with "suggested items" and advertising

Aerosoles.com

  • Simple/clean/easy to overview design
  • Category buttons organized in horizontal nav, clear breakdown of merchandise
  • Progress bar and breadcrumbs helpful
  • Shopping cart simple and clean, advertising below the fold
 
 

PERSONAS and User Stories

Utilizing our demographic research, we worked with our client to develop personas to keep the design in line with the final goal.

 

Susan

65, has never worn custom fit shoes

Needs
Comfortable shoes for a family vacation
Shoes that are fashionable
Pain Points
Cannot stand all day because of foot pain
Not tech-savvy

As a recently retired person I want to find a variety of comfortable shoes so that I can find shoes for my upcoming travels.

Anita

28, has high arches

Needs
Has a prescription from her doctor and needs shoes custom for her feet
Pain Points
Worries about giving up style for comfort

As a person with high arched feet I want to get custom fit shoes so that I can walk more comfortably.

Karl

32, works 12 hour shifts as a chef

Needs
Shoes that will last while on a budget
Style is not a concern
Pain Points
Stands all day at work
Wears the same pair of shoes daily

As a worker on my feet all day I want new work shoes so that my feet don't hurt at the end of the day.

 
 

RESEARCH TAKEAWAYS

 

1. Store Impression

Users are not understanding the content and purpose of the website. Most users thought that the website was an informational site about orthotics or Birkenstock shoes.

2. Inventory

While the store began as a Birkenstock reseller, and the store is nationally known as the Birkenstock Store, and over 50% of their sales still revolve around Birkenstock, we want to make sure that we highlight all the other brands that the store offers as well. 

3. Target Market

While the website appeared to be targeting an older demographic, the business was actually targeting a younger, more active demographic, which was much more apparent in their current social media channels.

4. Relationships

We discovered that InStep focuses strongly on their customer relationships and that many customers come back over the years.


 

Plan

INformation Architecture

In the following section we address the navigation, site map and taxonomy of the website to improve the structure and ultimately the flow of the site.

Mindmapping at Austin Bouldering Project.

Mindmapping at Austin Bouldering Project.

NAVIGATION

The current navigation of the site is not naturally organized, neither does it follow any conventional footwear e-commerce site standards.  Additionally, it is split up into two different navigation menus, one for products and one below for additional store information.

Existing Homepage

Sitemap

The current navigation of the site is not naturally organized, neither does it follow any conventional footwear e-commerce site standards.  Additionally, it is split up into two different navigation menus, one for products and one below for additional store information.

In the below gallery you can view the reorganization of existing content and redevelopment of the sitemap.

TAXONOMY

As the existing website did not have any groupings, the new site needed to group similar types of content. We created appropriate taxonomies for the different types of shoes and other filters that are normally used to find desired shoes on e-commerce sites.

User Flow

Utilizing the developed personas, we created user flows for each of our target personas. Susan searches for her ideal shoes online but would like to try them in store before purchasing. Anita receives a prescription and referral from her doctor and creates a wishlist online. In the store, the employee is able to access her wishlist and fit the desired shoes to her prescription. Karl is an existing InStep customer, has been fitted before, and is able to make a confident online purchase. 

New FeatureS

Informative Popover. We needed to provide the user with an informative popover early in the shopping process to inform them of possible discrepancies of shoe availability. 

Stories. In order to highlight InStep's strength in keeping their customers to come back, we created a new section on the website that would showcase a few of their customer success stories. To tie the feature to e-commerce, the stories would then link to these customers' favorite shoes available for purchase.

 

 

Design

Home Page Sketch

Product List

Product List + Filters

Product Close Up

Checkout Sketch

First Sketches

The main purpose of the site is to encourage users not only to purchase shoes online but also to encourage them to come to the store and get their shoes customized and fitted to their feet. 

We wanted to create a modern and simple feel and look, and designed a top navigation common for online retailers, which also matches design standards of the retailers we reviewed previously.

Home Page

Product List

Product Close Up

First Iteration Digital Wires

Once we came narrowed down our designs for the hand sketched wires, we developed our first digital wires in Axure. Throughout the transfer process we were able to refine the flow and interactions of the pages. 

NEW FEATURES

Informative Popover. Above to the left, you can view the wireframe for the Informative Popover that will let users know of available sizes. It will also show information about customization services and encourage customers to visit the store.

Stories. Above to the right, you can view the initial wireframe for the Stories feature. It will include a short interview of a happy customer alongside pictures of their activities with their favorite footwear. To further peak readers' interests and their purchasing power, the bottom of the article will provide a link to purchase the featured shoe.

User Testing

Over two weeks, we conducted several user tests including card sorting exercises and usability testing with the Axure wireframes and the final mockup.

  • The lack of input validation and error prevention in the checkout process was still limiting users from completing order submissions, which was addressed in the final iteration
  • Feedback validated that the shopping and checkout experience was easy to understand and navigate
  • The card sorting exercises confirmed our filter choices for the shoe searches and helped us sort them in a relevant order
 

FINAL HIGH-FIDELITY MOCK UPS

Our final design addresses issues in usability discovered during our user tests. We included input validation and error prevention in the checkout forms to improve the payment process. We incorporated informative pop-ups and notes on the product pages to notify users of size availability and to encourage customers to shop in store. 


Lessons Learned

My greatest takeaway from this project is that it is important to respect your clients limitations. While it would have been great to design for a perfect client, it was a great challenge addressing their software and inventory limitations and being able to solve this problem for them.