Feather

Feather

An adoptive web design of woman's handmade shoe store focusing on customizing shoes and exact shoes size.

Project Overview

Feather is a school project focused on creating a website for customizable women’s leather shoes. The main goal was to design and build a prototype website that provides an easy-to-use shopping experience with options for customization.

View Desktop Prototype

View Mobile Prototype

As part of the project, the website includes advanced AI scanning technology on its mobile version to accurately measure customers’ shoe sizes.

Role

Team

Duration

Tools

UI/UX design

Group of 4

12 Weeks Part Time

Figma, photoshop, Google Form, Canva, Zoom, Word

Encouraging users to purchase leather shoes online
Simplify the process of customizing shoes
Designing a user-friendly interaction with smooth navigation

Design Goals

Provide a user_friendly online website for an existing handmade leather shoes store

Implement a customization feature that helps shoppers to personalize their shoe selections according to their preferences
Use smart technology for accurate sizing

Business Needs

Design Process

Discover

Define

Develop

Deliver

We used double Diamond method based on the Design Thinking Methodology.

Survety&Interview
Affinity Diagram
Competitive Analysis

Cart Sorting
User Persona
User Flow
Site Map

Sketch
Mild Fidelity
Useability Test
Wire Frame

Visual Design
Mood Board
High Fidelity
Useability Test and Iteration

Research

Design

Needs

Goal

Discover

Interview and Affinity Diagram Takeaway

We interviewed our target user and the affinity diagram that was made accordingly. We asked open-ended questions and let them talk more. It was the most educational part of our research and it really assisted us throughout our design process.

The affinity diagram that was made accordingly .In our research for designing this website, we found out some important stuff on :

True picture of style , material and color
They also really want to easily find the right size
Price awareness matters to them too
Customer reviews of shoes were also found to be important
Shipping details are regarded as important by customers

Survey

Competitive Analysis

User friendly structure of customize page
Filters and categories in pages

We analyzed nine similar websites, examining their features and workflows to gain insights and six similar Applications for exact foot size. Our approach involved studying websites an Apps with similar business models and getting ideas from them.

Instructions for how to scan user's foot
The steps of scanning the foot from the camera's phone provide the exact size and are user-friendly.

Define

Persona

Through surveys, interviews, and insight research, we developed a persona. The main goal was to display those patterns and pain points, which allowed us to further empathize with users.

Site Map

Based on the card sorting , the first version of the information architecture was made . However through out the design process, user testing and the competitive analysis , the final version of the information architecture was build

There are some iterations on the landing page that helped us to develop information architecture in the final version.

User Flow

User flow was developed accordingly.

Develope

Sketches

Based on the information we have received during our research, we drew some sketches to lay out ideas for our features.

Home page

All product

Order page

Wireframes

By using Figma and fallowing our sketches, we created mid-fidelity wireframes and prepared them for useability test.

Home page

Product page

High heel page

Custom page

Useability test & Iteration (Phase 1)

After creating mid-fidelity wireframes and before we go to high-fidelity, we did some useability test and we found our paint points and solutions.

(1) The placement of the AI exact size
feature on the homepage were missed by users. Through iterations, we put it in the hero image as a slideshow.

(2) The positioning of the customize
feature on the homepage was unclear for users. After iterations, we decided to include it in the hero image.

Before iteration

After ieration

Custome page

Home Page

Before iteration

After ieration

The first design caused confusion among users, so we made changes to the layout to make it clearer and more user-friendly.

Custom Page

Deliver

Mood Board

UI Kit

While creating the mood board, we were inspired by feathers, leather, wood and stylish shoes. Based on the mood board, we chose the primary color.

We made a UI kit with color codes, font sizes, icons, components, and variants for the design process. We have chosen

Challenges and Solutions

Upon thorough analysis of all our research data, we gained a comprehensive understanding of the challenges associated with our project and attempted to address them by incorporating a solution into our design.

Challenge:

Solution:

Hero Image & Menu

Product Page & Size guide

Challenge:

Solution:

Customize Process

Challenge:

Solution:

1- showing our value propositions, especially the customization.

1- Used eye-catching visuals, customization and value propositions in the hero image .

2-Showing easily find the AI exact size option on our website.

2- We added the AI exact size to the global menu and included a mobile mockup gif on the homepage .

3- understanding easily the different shoe styles on the menu.

3- Put a picture of each style in the category menu .

2- Showing our sizes with measurement .

2- Added a size guide chart with exact measurements .

3- Showing how the shoes would look on the foot.

3- Added pictures of shoes being worn on the foot in every product card.

1- Showing the true price on customized process

1- Showed the changing price at every step of the customization process.

2- Ability to show shoes in different angles

2- Added a 360-degree view at the end of the customization process.

3- Creating a user-friendly customization process .

3- Users can click on each customization step,visually showing their selections by changing the selected part of the shoe to white

Useability test & Iteration (Phase 2)

We conducted 10 user tests to assess the website's functionality. During high-fidelity prototype development, we tested to resolve confusion. Valuable feedback from these tests led to a lot of changes to the design.

Final

(1) The AI exact size feature on the slide show was missed again by users. So we showed it directly on hero image ensure better visibility and usability for users.

Home page

(2) After iterations, we changed the picture of the hero image to a high heel style to better express the understanding of the women's shoe website.

(3) The gift card icon was not perfectly understandable for users, so we replaced it in navigation menu.

Product Page

Final

(1) We replaced real images of shoe styles with the sketch images, to increase better visibility and clarity for users.

(2) Because both the 'order now' and 'customize' options in the product cards were linked to the same page, after iterations, they were combined into a single icon for better efficiency and clarity.

Custome Page

Final

(1) We showed customization shoe parts all at once to be more user-friendly and clear.

(2) To enhance user understanding, we implemented a feature where clicking on each step highlights the matching shoe part in white.

Mobile Scan

Users don't know how to scan their foot , we put instructions and a footprint picture to make it clear.

After

Before

A/B Testing

After running an A/B test with 10 participants to evaluate user satisfaction and functionality for category menu and AI exact size feature designs, we found a preference for sample B over sample A, both in terms of functionality and visibility.