karavel-mockup-alternative.jpeg

Karavel Shoes E-Commerce Website Design

Karevel Shoes E-Commerce Website Design

 

Designing an e-commerce experience on Karavel Shoes website to help shoe buyers in the US find affordable, comfortable shoes that are right fit for their feet.

 
 
Karavel-Shoes-mockup-tablet.jpeg
 
 

OVERVIEW

Karavel Shoes is a heritage shoe store specialized in the best comfort shoes and sandals that look good and feel good. It has three stores in Austin and planning on adding an e-commerce site to its sales channels with the brand new design of its website.

I was given a task to design Karavel Shoes website adding e-commerce functionality. The current website displays catalogue of shoes under brands section but it doesn’t offer a detailed product page for each item. Also the shopping cart is mentioned as under construction.

User Goals
Shoe shoppers need a way to find shoes that are right fit for their feet and are at a good price, to have the ability to order, change and return them conveniently.

Business Goals
Karavel Shoes needs to reach to customers in the other cities, offer (its highly regarded) customer service to online users to establish its brand nationally and accelerate income.

Solution
An e-commerce platform that provides guidance to the shoe shoppers for choosing the right shoes for their feet, options to filter categories to find the brand and the type they are looking for at a good price and makes it easy to change and return the product if they are not happy with their purchase.

My Role
UX/UI Designer, Researcher

Tools
Balsamiq (Wireframes), InVision (Prototype), Paper, Pen (Sketching)

 

RESEARCH

I started by researching the company to understand its business and its customer profiles. The volume of positive reviews on Google and the customer loyalty expressed was impressive. The store is known for attentive, knowledgeable staff and great customer service. It seems to be the address for shoe shoppers in Austin, who prioritize comfort over style, too.

While the brands that Karavel Shoes sell have high price tags, the customers purchase shoes with confidence and pride, because they feel like they have made an educated choice. The staff, who are taking time to explore the options with each customer to help them pick the right type and brand, is the strength of Karavel Shoes’ business. Therefore, I decided to bring this customer service experience to its website. 

User Interviews
I interviewed with 5 people, who live in Austin, shop online, buy a pair of shoes at least once a year, had experience with buying shoes online.

I created an affinity map to synthesize the findings from interview to define major takeaways.

 
 
 
 

Common themes were size & fittingbrand loyalty, price sensitivity.

It was interesting to see people from different backgrounds and who enjoy different lifestyles pointed on same drawbacks of shopping shoes online. Lack of confidence in shoe fit, worries about the effort and time needed to change shoes if not a good fit were main pain points. Price advantage is the main reason they expressed for choosing to buy shoes online.

Comparative Analysis
After defining the pain points of shopping for shoes online, I compared features on some major online stores that are selling comfortable shoes and athletic shoes. I wanted to understand the different functionality offered by these stores to help the customers order shoes online.

 
 
 
 
 

IDEATION

Persona
Narrowing down my findings from user interviews I created a persona, Amy Taylor. I wanted her to represent the user, who has the lifestyle of a typical Karavel Shoes customer and is an experienced online shopper.

 
 

Customer Journey Map
I used customer journey map to review the steps Amy takes and how she feels while ordering hiking boots online.

 
 
 
 

The pain points were clear on the flow. She struggles with finding the pair of shoes that she likes at the best price and when she does she doesn’t feel confident about the size before ordering them.

User Flow

 
 
 

Site Map
I examined information architecture of the current website and redesigned the site map.

At the user interviews, looking for shoes on sale was mentioned as one of the common reasons for using online stores. Therefore, I included a “Sale” category on the main navigation menu. Also, I keep the “Brands” in main and sub-categories, due to my understanding that people like to buy from the brands they have positive experience with.

 
 
 
 

Paper Sketches
Before jumping on Balsamiq for creating mid-fi wireframes, I sketched some layouts for home and product pages.

 
 
 
 

Wireframes
I created wireframes for the screens where Amy Taylor would visit before purchasing “hiking boots” for her upcoming trip.

 
 
 
 

Challenges

  • There are different techniques e-commerce sites uses to give information about the fitting of the shoes. Although offering “free shipping & returns” is a common and accepted method to make the customer feel comfortable with ordering shoes online, the majority still worries about picking the right size. It was a challenge for me to provide enough information and tools to overcome this problem.
  • I incorporated “Live Chat” as a way to bring customer service experience that makes Karavel Shoes the store of choice for people who are not sure on the type of shoes good for their feet. It was challenging to communicate the benefits of Live Chat to the user without cluttering the interface with a lot of information and icons.

Usability Testing
I tested my mid-fi prototype with 4 users, using the task scenario I created for Amy Taylor, who has a budget of $95 and looking for hiking boots for her upcoming trip in two weeks.

I created a rainbow chart with my findings.

 
 
Rainbow Chart-Karavel shoes.png
 
 

I refined my observations and listed the main findings as below.

  • All of the users easily browsed through the categories and could find the shoes described in the task.
  • Most of the users started from “Sale” category or “Shop Sale” link under Women’s dropdown menu.
  • The users read and influenced by the customer reviews (even before deciding on the right size).
  • They found live customer support “cool” but didn’t feel a need to use for the task.
  • They liked to see the “free shipping” offer at the checkout.

Iterations

Home Page: I tided up the top navigation to improve visual hierarchy. During usability testing I noticed that the users first recognized the “Free Shipping & Returns” offer at the product page, before they make the decision to buy the product. So I removed the remark from the top navigation, while taking a note to do a further research on best placement.

 
 

Filters: Most of the users started browsing from “Sale” category and used filters to narrow down their search. Given that finding deals is the main advantage of online shopping, I decided add “Sale” filter on product pages and an option to filter by “Price”.

 
 

Sign Up: While the users could continue as a guest at the check out, and purchase the product by providing shipping & payment details, I have given the option to save the information by signing up in all steps. I decided to remove that option and instead suggest the users to get %10 off when they sign up after they complete the check out, just to avoid causing confusion.

 
 

Prototype

Please click on the image below to view the prototype.

 
Please click on the image to view the prototype.

Please click on the image to view the prototype.