Chris White

Isabelle Encela


4 Weeks



    User Flows

    Process Flow

    High-fidelity mockup

    Interactive prototype


    Project Brief

    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


    Stakeholder Interview

    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.

    Comparative Analysis

    REI Women's Shoes

    REI Women's Shoes

    Birkenstock Women's Shoes

    Birkenstock Women's Shoes


    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.

    User Survey

    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.

    Process Flow


    Diagram created by Isabelle


    We created the stories and services pages, not typical of e-commerce sites, to increase in-store traffic.

    Information Architecture


    Existing home page


    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.

    Women's Shoes.jpg


    Stories Section

    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.


    Home Page


    Product Listings Page


    Checkout Page



    Ordering Issues

    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.

    Other Work


    Connect the Spots

    A website allowing people to find pets in their area to adopt. 

    On Laptop.jpeg


    A redesign of the world's largest classifieds website.

    Journey Map.jpg

    Other Projects

    A collection of work from small projects.