Objectives defined from meeting with the client:
Create a modern aesthetic that matches the in-store feel
Increase number of in-store customers
Improve the checkout process
Drive customers into the store
Our first step was to meet with the clients to discuss their expectations and goals. We were free to redesign the website from scratch to meet objectives above.
Since they use the website to drive in-store shopping, e-commerce sites aren't direct competitors. However, I analyzed the REI and Birkenstock websites for a comparative analysis. The main takeaways were their use of a modern aesthetic with many lifestyle images and large pictures of their shoes.
We surveyed over 60 people about the online shoe shopping process and thoughts of the existing website. Respondents were instructed to spend a minute on the site to get a sense of the site before answering the questions.
65% of respondents thought the site was for people aged 30 and up
41% answered that the site sells only orthopedic shoes or only provided information about shoes
The personas demonstrate that InStep doesn't just appeal to ladies over 30 but a variety of customers who use the website differently. The personas came from speaking to the employees and finding a pattern in the regular customers at the store. Each persona was assigned a different user flow based on how we perceived they would use the website.
We created the stories and services pages, not typical of e-commerce sites, to increase in-store traffic.
As seen above, current categories are Shoes, Sandals, Clogs, Boots, Slippers, Chef/Duty Shoes, Vegan/Leather Free, Orthotics, Care & Accessories, Brands, and Gift Cards. Each shoe category has a variation of the subcategories: Women, Men, Kids, and Orthotic Friendly.
To create new categories we:
- Wrote the product types on Post-its
- Sorted the products into an afinity diagram
- Named the categories
Instead of categorizing by type of shoe first, we separated the products into Womens, Mens, Kids, and Accessories to match the standard used by most shoe websites.
To decide what filters to include we:
- Combined filters mentioned in the survey with filters used on other shoe websites
- Wrote the filters on Post-its
- Had a few people sort from least to most important
We put the filters left to right by the average importance. All of the filters are seen open below but would be open one at a time when hovered over.
In this new section, InStep can post testimonials from loyal customers about their experience of the store and how InStep's products and services have improved their lives since InStep's reviews are very positive but aren't shown on their existing website. We created this section as a key to get more people in their stores. The services that differentiate shopping at InStep from ordering from a large e-commerce site can be highlighted and put into context in this section.
Sketches and Mockups
Isabelle and I used a Design Studio format to sketch the wireframes. We each created a sketch, looked at each other’s sketches, discussed our sketches and sketched the page again. Our sketches soon merged into an agreed upon wireframe for each page. We split the rest of the pages to sketch based on the format set by the key pages.
We created a low-fidelity prototype in Axure for usability testing. Our client mentioned that customers call confused during the checkout process, so we focused on this during the usability test. We made a few changes from testing including inline validation for the form and adding buttons to remove or edit products in the shopping cart. The high-fidelity prototype was created with Sketch and Invision.
Product Listings Page
The Instep website is not connected to the inventory so customers can place an order for an out of stock product. A popover informs users of this on the product listing page, telling users to call the store for availability before ordering and mentions services offered to encourage customers to visit the store.
We ended up redesigning the InStep website into a unique e-commerce website. Focusing on differentiating factors and having a few obstacles to overcome made it more interesting that a typical e-commerce website. Isabelle and I worked together closely, contributed evenly and communicated well throughout the process. I am proud of the results of this project, being visually appealing and meeting the objectives set by the clients and ourselves.
This project reiterated the importance of being informed by users and clients to guide the design. I have little experience buying shoes online and was surprised by what we found out during the process. Without speaking to the right people and asking proper questions, I would have made incorrect assumptions in the design.
The InStep owners were satisfied with our work and have taken our prototype to a developer to implement the design.
Connect the Spots
A website allowing people to find pets in their area to adopt.
A redesign of the world's largest classifieds website.
A collection of work from small projects.