Designing the Online Shopping Experience


Design an online shopping experience that addresses user needs and the goals fo the business.

My Role:

UX Designer

  • User Research (Interviews)
  • Persona Development
  • Task Analysis
  • Affinity Diagram
  • Scenarios/User Flows
  • Sketches
  • Layout
  • Wireframes
  • Comps
  • Prototype
  • Pen and Paper
  • Balsamiq
  • Photoshop
  • InVision

The Challenge

Online shopping continues to grow in popularity with e-commerce experiencing 23% growth annually. Studies show that 51% of Americans now prefer shopping online according to Forbes. Businesses continue to seek solutions that meet business goals while also providing a shopping experience that is efficient and delightful for customers.

Shopping online for apparel or shoes adds another level of anxiety for consumers. Karavel Shoes is a local Austin shoe store that specializes in comfort shoes. They do not currently offer the ability to purchase their products online. How can we build a better online shopping experience while showcasing Karavel's pride in customer service?


Understanding The Business

To better understand the strengths and weaknesses of the online shoe shopping experience I performed a competitive analysis of eight online shoe retailers. This analysis would also inform my process in the future as I considered vital features in the design of the online shopping experience for Karavel's customers.

Competitive Analysis UX Design research findings chart for e-commerce site

The results illustrated in the above chart above reveal two significant findings. 

  1. Nearly every major online shoe retailer provides a search function, of course. However, the functionality of the search and filter features vary widely.
  2. Only one retailer offers consumers the choice to shop online and then pick up items In-Store.

Understanding The Customer

Affinity map of UX Design User Research for e-commerce site

I conducted five interviews with online shoppers ranging from ages 29 - 61. The principal sources of frustration for the people in my study had to do with inadequate or inaccurate search and filter functions as well a high level of anxiety regarding the possibility that their online purchase might arrive and not fit correctly. I created personas to summarize research findings and serve as the basis for the next steps in my user-centered design.

“I was looking for a dress. I hung in there and I did find the stuff but I kept scrolling and scrolling and I was like 'where are my sizes, what is happening?' It used to be a lot easier to find stuff.”
Primary Persona for UX Design User Research of e-commerce site
“You spend a lot of time going through results. Getting into the size part first is key because that’s one of the least negotiable parts of the shoe, the size.”
Secondary Persona for UX Design User Research of e-commerce site

Defining The Problem

Online shoppers are frustrated by too many choices. The overuse of Mega Menus and excessive category structures leads to a time consuming and chaotic shopping experience. This can be overwhelming and sometimes lead the consumer to simply abandon the process. Or they will research products online with the sole intent of purchasing the item in store due to anxiety about size and fit or other product level information.

Designing A Solution

I believe that a better experience is created by considering the user's goals implicitly in the search and filter functions of online retail environments. My research indicated that one method of achieving this is to present the essential filtering options first and limiting the depth of the site architecture to provide shoppers with a more direct path to specific items.

Site Map for UX Design Information Architecture of e-commerce site


Create a site architecture that represents a deep product database structure. This will limit the amount of entry points and allow the shopper to begin their search on a very focused path from the beginning. Implement a federated search function so people can search for an almost limitless combination of compound criteria that will yield only relevant results. Attributes that are non-negotiable (e.g. size) should be presented for filtering at the very top level to decrease the instance of a shopper spending valuable time searching for products only to find that it is not available in a version that is relevant to their needs.

    Early Sketches

    I performed rapid sketching exercises to unpack the idea of a streamlined landing page that would quickly direct shoppers to the simple, broad categories where they could browse for desired items.

    Sketches of Layout options for UX Design of e-commerce site


    I created wireframes using my early sketches. The initial wireframes were then developed into a mid-fidelity state so I could quickly test my proposed solution.

    Wireframe of Landing Page for UX Design of e-commerce website done in Balsamiq


    Format sketch for UX Design of e-commerce website
    Low Fidelity Wireframe for UX Design of e-commerce site done in Balsamiq
    Medium Fidelity Wireframe for UX Design of e-commerce site done in Balsamiq


    I composed specific user flows based on my research and tested my proposed solution using a clickable prototype built with the mid-fidelity wireframes. Due to the constraints of designing a lightweight prototype that functioned for specific parameters of a user's preference (size, style, etc.), I provided some direction for the test subjects. However, I observed users successfully navigating to the desired page and quickly understanding both the function and the array of filtering options.

    View Prototype

    Summary/Next Steps

    I believe I discovered a solution for some of the frustrations online shopping presents to consumers. The considerations of site architecture and features like federated filters seem to alleviate problems that might lead to abandoned carts or lost conversions. Through the incorporation of the In-Store pick up option during checkout, I was able to solve the business goal of showcasing Karavel's legendary customer service by continuing to drive customers to visit the brick and mortar stores. The option also compounded the benefit of this solution in alleviating the user's anxiety about completing an order without knowing how well the item would fit upon receipt.

    Next Steps:

    1. Development of a full feature set that allows me to test the federated search function better.
    2. More testing and further assessment and synthesis of testing and feedback already obtained.
    3. High Fidelity wireframes and Prototype.