2024
AR shoe app
Experience the ease of visualizing shoes directly on your feet with our AR shoe selling app.
UX Case Study
Hours
Screens
Designer
30+
1
84+
Step-up
About
Why I took this Specific
Challenge?
Imagine this: Sarah is browsing through our online shoe store, but she's hesitant to buy because she can't try them on. That's where our AR Sneakers app comes in. With just a few taps, she can see how those shoes look on her feet, right from her living room. It's like bringing the store to her!
Heuristics Usability
Secondary Research & Competitive Analysis
User Research
Information Architecture
Ux & Psychology laws Applies
Process & Tools
STEP-UP
Project Overview
Users can use their smartphones or tablets to virtually try on shoes at home. AR technology lets them see how the shoes look and fit on their feet without needing to visit a store.
Users can virtually try on shoes from the comfort of their own home using their smartphone or tablet.
AR technology enables them to see how different shoes look and fit on their feet without physically trying them on.
Example
Buying shoes can be challenging for me because I struggle with visualizing how they'll look and fit, often receive inaccurate sizing recommendations, and find it hard to trust reviews. These issues make it tough for me to feel confident in my decisions.
As I've been diving into the development of our AR Sneakers app, one aspect that's really caught my attention is the virtual try-on feature. We must prioritize accuracy and realism in this area. Users need to trust that what they're seeing on their screens reflects how the shoes will actually look and fit in real life. It's a key component of enhancing the overall user experience.
1
2
4
5
Empathise
Define
3
Ideate
Design
Testing
Problem
Solution
1.Empathise
In the first stage of design thinking, I understand users and their problems by observing, talking, and empathizing with them.
Says
This app is cool
Look how these shoes look on me.
Does this color suit me?
Are these shoes comfortable?
1.1 Empahty map
1.2 Persona
Survey
Thinks
Will these shoes fit me?
How will these look with my outfits?
Is this app accurate?
Can I trust the virtual try-on?
Does
Open the AR shoe app
Share virtual try-ons with friends for opinions
Compare multiple shoes visually using AR
Browse through different shoe models
Excited about trying new technology.
Confident if the AR representation
looks good.
Frustrated if the AR doesn't align well with their feet.
Uncertain about the accuracy of fit and size recommendations.
Feels
Using Chat Gpt
Using Chat Gpt
2.Define
2.1 User Research
2.3 Competitive Analysis
This user experience research method is a one-on-one discussion between the researcher and the participant on a specific topic
Doing a competitive analysis in UX design shows us what other apps like Shoe Application are good at and where they're not so great.
Source Ai
Goals
Analysis
I usually shop for shoes online because it's more convenient and I can browse a wider variety of options, but I go to physical stores when I want to try them on for the perfect fit.
When buying shoes, the most important factors for me are fit, comfort, style, and price.
My biggest frustrations with online shoe shopping are not knowing if they'll fit right, getting shoes that look different than the pictures, and dealing with returns.
I Would say my satisfaction with shopping for shoes is okay. It's easy, but it can be annoying when the shoes don't fit well or look different from the pictures.
Using Ai
User Goal
Enable users to easily visualize how different shoes will look and fit on their feet, helping them make confident purchasing decisions from the comfort of their home.
Features name
User Interface
Product Selection
Checkout Process
Customer Support
Pricing
App Performance
2.2 Defining the goal
Good
Good
Excellent
Good
Fair
Excellent
Good
Excellent
Good
Excellent
Good
Good
Project Goal
Using Ai
The main goal of the project is to create a user-friendly AR application that lets users virtually try on shoes with precise accuracy. This should provide a smooth and enjoyable experience, making the app easy to use and effective.
Using Ai
Business Goal
Increase customer satisfaction and engagement, reduce product return rates, and boost online sales by providing a unique and innovative shopping experience.
Good
Good
Good
Good
Good
Good
Fair
Fair
Poor
Fair
Excellent
Fair
Poor
Fair
Poor
Fair
Poor
Fair
2.Define
2.1 User Research
2.3 Competitive Analysis
This user experience research method is a one-on-one discussion between the researcher and the participant on a specific topic
Doing a competitive analysis in UX design shows us what other apps like Shoe Application are good at and where they're not so great.
Source Ai
Goals
Analysis
I usually shop for shoes online because it's more convenient and I can browse a wider variety of options, but I go to physical stores when I want to try them on for the perfect fit.
When buying shoes, the most important factors for me are fit, comfort, style, and price.
My biggest frustrations with online shoe shopping are not knowing if they'll fit right, getting shoes that look different than the pictures, and dealing with returns.
I Would say my satisfaction with shopping for shoes is okay. It's easy, but it can be annoying when the shoes don't fit well or look different from the pictures.
Using Ai
User Goal
Enable users to easily visualize how different shoes will look and fit on their feet, helping them make confident purchasing decisions from the comfort of their home.
Features name
User Interface
Product Selection
Checkout Process
Customer Support
Pricing
App Performance
2.2 Defining the goal
Good
Good
Excellent
Good
Fair
Excellent
Good
Excellent
Good
Excellent
Good
Good
Project Goal
Using Ai
The main goal of the project is to create a user-friendly AR application that lets users virtually try on shoes with precise accuracy. This should provide a smooth and enjoyable experience, making the app easy to use and effective.
Using Ai
Business Goal
Increase customer satisfaction and engagement, reduce product return rates, and boost online sales by providing a unique and innovative shopping experience.
Good
Good
Good
Good
Good
Good
Fair
Fair
Poor
Fair
Excellent
Fair
Poor
Fair
Poor
Fair
Poor
Fair
Splash Screen
On- Boarding
Login
Trending Searching
Search
Home screen
Recommended
Most Searching
Already Showing
category
Select by user
Sports, Casual, Kids, Sneakers
Age Category,
Types of Shoes, Jorden, Sneakers, Casual, Our Bestseller
AR
3D view
In Store AR Experience
Visual in Reality
Shoe Customization
About
Product Details
Pakaging
Social media Information
Update
Contact US
Career
Share app
Explore
Best Seller
Collection
Fresh Category
Must have this season
New In Now
Best of stepstyle
See Product in discount
3.Ideate
3.1 Information Architecture
3.2 User Flow
3.3 Sketch
Information architecture organizes and labels content so users can easily understand, use, and find it.
Architecture
Path
Sketch
The sketch provides a clear and detailed visualization of the design for users.
Sketch
Conform phone number
Add to cart
Want to Buying shoe
User want luxury shoes
Want to Explore
Luxe page
Product list
Explore
Home page
User want to search
Search
Enter phone number
Installation for app store
Want to skip
No
No
Click to checkout
User login via
phone number
Phone number page
Enter phone number
Proceed to checkout
Payment info
User have already payment info
COD payment
Cart payment
Online payment
No
Yes
Did User Enter phone number
Yes
Yes
Review checkout details
Checkout page
Add delivery address
Payment option
Created by Putri Afifah Octaviani
from the Noun Project
I'm creating a unique scrollable section, but it's not working well and has become more complicated.
1st version
I am facing many problems while working on the first version and not making much progress. The constant effort is challenging.
Scroll down
Here are some screens
This icon is not good and does not explain its purpose to the user.
It does not match the banner on the screen.
Images do not fit well in the circle.
Again, the images do not fit the screen well. Issues include color, borders, and other details.
Some icons are thin or bold and not suitable. For example, the first icon is sharp, not rounded.
The rectangle's corner radius is sharp, and the brand logo doesn't fit well with the image. The image also doesn't fit properly in the rectangle.
These are meant to convey naturalness and simplicity, but once again, they're not working well in the first version.
Not visible to small for user.
The images have inconsistent strokes and strange colors.
This icon is not visible, and the images are not consistent in type or format.
1st
2st
3st
last one
But I won't make these mistakes again.
Reading laws of UX
Learning grids
1. Jakob’s Law
2. Fitts’ Law
3. Hick’s Law
4.Design
4.1 Style Guide
Secondary font
Primary font
Noto Sans
Guide
Typography & color
#D9D9D9
#B2DE04
#E2E2E2
Mix
Gainsboro
Linear
Lawn Green
Gainsboro
Timmana
Regular
A
a
Regular
bold
4.2 Design
Screens
Design
Splash
3
Simple to start
Click to explore
Simple login process
Users can log in or sing up using a phone
number or Gmail. This is the easiest and faster way for the user to quickly go to the main purpose of the application.
Home page
Our new feature makes it easier than ever for you to explore and find your favorite types of shoes.
This feature lets users scan their shoe to find similar ones using image recognition or browse shoes by brand and model code.
Discover our new feature that helps you easily find and shop for your favorite fan t-shirts, shoes, and more. Explore now and show off your style.
Filters
Category
The feature offers a wide variety of filters to help customers find the perfect item.
Users can scroll through the section to easily find and explore different shoes.
More convenient and time-saving for you to explore and buy shoes.
Experience our new AR feature to explore and buy shoes with complete confidence and joy. Try it now and step into happiness.
This advertisement showcases an AR feature that allows users to find and try on shoes virtually, demonstrating how AR enhances the shopping experience.
5.Test
AR screen
The AR feature is extremely useful, allowing users to see how their selected shoe looks on them, which makes for a more satisfying shopping experience.
Checkout
During checkout, the customer goes through a few steps to buy their items, including entering shipping details and choosing payment options.
I started using grids in all my designs. This method made it easier to organize and structure my work.
5.1 Using Girds everywhere
Heatmap
A heatmap helps users by showing them where to focus. It highlights important areas, making it easier to see what's most relevant.
5.2 Applying Heuristics Evaluations
Evaluations
Match between system and the real world
Design with the user in mind, using simple, familiar language. Organize information naturally, reflecting real-life situations.
User control and freedom
Provide users with an easy "emergency exit" to correct mistakes and backtrack without a lengthy process. Ensure straightforward navigation for user control and freedom.
Consistency and standards
Maintain consistency by using familiar platform and industry standards. Avoid confusion by ensuring words, scenarios, and actions convey the same meaning.
5.4 Typography & Color
Color
5.3 components
Taught the importance of managing time effectively and meeting deadlines.
Pushed me creatively to develop an app that addresses a real-world problem faced by people from various backgrounds.
Provided valuable insights into user research by interacting with diverse individuals to understand their needs and requirements.
keeping users browsing for different shoes, similar to their experience in a shoe store.
Aimed to replicate that engaging experience.
Ensured the app remained simple and easy to use.
Gather more data from potential users.
Collect user feedback.
Identify areas for improvement.
Add new features to enhance the overall user experience.
My learning
Challenge
What’s next
