Feather
Handmade Shoes Online Store Adaptive Design for both Desktop and Mobile Devises
About Feather
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.
As part of the project, the website includes advanced AI scanning technology on its mobile version to accurately measure customers’ shoe sizes
Project Overview
Business Needs
Design Goals
Role
UX/UI Design
UX Research
Team
Group of 4
Duration
12 Weeks
Tools
Figma, photoshop Google Form Canva, Zoom
Encouraging users to purchase leather shoes online
Simplify the process of customizing shoes
Designing a user-friendly interaction with smooth navigation
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
Use smart technology for accurate sizing
Design Process
We used Double Diamond method based on the Design Thinking Methodology
Discover
Define
Develop
Deliver
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
Needs
Goal
Research
Design
Discover
Define
Develop
Deliver
Discover
Interview
We interviewed 7 potential 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.
Affinity Diagram Takeaways
Survey
To better understand our target audience and their challenges, we created an online survey and shared it with relevant communities. Based on the responses, we identified 2 common pain points, which guided our next steps.
In our website design research, we discovered several important insights.
Users highly value filter options for easy navigation
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
Competitive Analysis
We analyzed similar websites, examining their features and workflows to gain insights for our information architecture and customization flow.
We focused on creating easy-to-understand and navigate customization interfaces.
We ensured that the AI exact size finder tool was displayed in the global menu, on the homepage, and on the product pages for easy access.
We also analyzed similar Applications for exact foot size. Our approach involved studying these Apps and getting ideas for designing the process of scanning the foot using the phone’s camera.
Define
User Flow
Persona
Site Map
Based on the card sorting and competitive analysis, the initial version of the site map was created. However, throughout the design process and usability testing, we built the final version of the information architecture.
User flow was developed accordingly:
Based on user research, we created a persona. The website was then designed to address the needs and frustrations identified through this persona.
Develop
Sketches
Home page
Category page1
Category page2
Customize page
Home page
Product page
Customize page
All Product
Wireframes
Based on the information we have received during our research, we drew some sketches to lay out ideas for our features.
By using Figma and fallowing our sketches, we created mid-fidelity wireframes and prepared them for useability test.
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.
Home Page
Customize Page
The first design caused confusion among users, so we made changes to the layout to make it clearer and more user-friendly.
Challenges and Solutions
Challenges
Solutions
Solution 1: Used eye-catching visuals, customization and value propositions in the hero image.
Solution 2: We added the AI exact size to the global menu and included a mobile mockup gif on the homepage.
Solution 3: Put a picture of each style in the category menu .
Solution 4: Added a “Customizing” label on each shoe card and a “Customize” button on the product page.
Solution 5: Added a size guide chart with exact measurements for foot width and length, along with visual instructions.
Solution 7: Showed the changing price at every step of the customization process, allowing users to see the price update in real-time as they made changes.
Solution 6: Added pictures of shoes being worn on the foot in every product card.
Solution 8: Added a 360-degree view feature at the end of the customization process for users to see all sides of the shoe.
Solution 9: Implemented a feature allowing users to click on each customization step, visually showing their selections by changing the selected part of the shoe to white.
Challenge 3: understanding easily the different shoe styles on the menu.
Challenge 4: Users needed clarity on purchasing pre-designed or customized shoes.
Challenge 5: Users were unable to use their mobile devices to find their exact shoe size.
Challenge 7: Users were unsure about the price of a customized shoe.
Challenge 6: Users couldn’t visualize how the shoes would look on the foot.
Challenge 8: Users had difficulty visualizing their customized shoes.
Challenge 9: Creating a user-friendly customization interface for the website.
Challenge 1: Seeing our value propositions quickly, especially the customization feature.
Challenge 2: Finding easily the AI exact size option on our website.
Deliver
While creating the mood board, we were inspired by feathers, leather, wood, stone and stylish shoes. Based on the mood board, we chose the primary color.
Mood Board
UI Kit
We made a UI kit with color codes, font sizes, icons, components, and variants for the design process.
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.
(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.
(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.
(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.
(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.
Users don't know how to scan their foot , we put instructions and a footprint picture to make it clear.
A/B Testing
A
A
B
B
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.
High-Fidelity Prototype Desktop
