Shopping app

SHREE HARI
Project overview

The product:
Online shopping app is a futuristic shopping o located in
the suburbs of a metropolitan area. Shope strives to
quality shopping experience, men’s and Women’s cloth.

Project duration:
October 2021 to February 2022.
Project overview

The problem: The goal:

Busy workers and commuters lack the time Design an app for Shopping app that allows
necessary to prepare a meal. users to easily order and Enjoy New, cloths.
Project overview
My role:
UX designer designing an app for Shopping
app from conception to Fashion.
Responsibilities:
Conducting interviews, paper and digital
wireframing, low and high-fidelity prototyping,
conducting usability studies, accounting for
accessibility, and iterating on designs.
 ● User research
Understanding ● Personas

the user ● Problem statements

● User journey maps
User research: summary

I conducted interviews and created empathy maps to understand the users I’m
designing for and their needs. A primary user group identified through research
was working adults who don’t have time to buy products offline.

This user group confirmed initial assumptions about Shope customers, but research
also revealed that time was not the only factor limiting users from working at home.
Other user problems included obligations, interests, or challenges that make it
difficult to buy offline.
User research: pain points

1 2 3
Time Accessibility IA

Working adults are Platforms for Text-heavy menus in

too busy to spend ordering products apps are often
time on Buying are not equipped difficult to read and
offline with assistive order from
technologies
Persona: John

Problem statement:
John is a busy working
adult who needs easy
access to Online cloth
options because they
have no time to buy
cloth offline for themself.
User journey map

Mapping john user journey

revealed how helpful it
would be for
users to have access to a
dedicated shope(shopping)
app.
 ● Paper wireframes
Starting ● Digital wireframes

the design ● Low-fidelity prototype

● Usability studies
Paper wireframes

Taking the time to draft

iterations of each screen of
the app on paper ensured that
the elements that made it to
digital wireframes would be
well-suited to address user
pain points. For the home
screen, I prioritized a quick
and easy ordering process to
help users save time.
Digital wireframes

As the initial design phase

continued, I made sure to
base screen designs on
feedback and findings from
the user research.
Digital wireframes
Easy access to
navigation
Easy navigation was a key that’s screen
reader friendly.
user need to address in the
designs in addition to
equipping the app to work
with assistive technologies.
Low-fidelity prototype

Using the completed set of digital

wireframes, I created a
low-fidelity prototype. The
primary user flow I connected
was building and ordering a T
shirt, so the prototype could be
used in a usability study.
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the
designs from wireframes to mockups. The second study used a high-fidelity prototype and
revealed what aspects of the mockups needed refining.

Round 1 findings Round 2 findings

1 Users want to order Cloths quickly

1 The checkout process has too many
unnecessary steps
2 Users want more customization
options 2 “profile” functionality is confusing

3 Users want a confirmation before

ordering
 Mockups
Refining
●
● High-fidelity prototype
the design ● Accessibility
Mockups
Before usability study After usability study

Early designs allowed for some

customization,
but after the usability studies, I
added additional options to
choose payment mode and
address. I also revised the
design so users see the profile
options when they first land on
the screen.
Mockups
Before usability study After usability study

The second usability study

revealed frustration with
the confirmation page. to
streamline this flow, I
consolidated the “Current
order” and “Checkout
screens” to one “Order
summary” screen.
.
Mockups
High-fidelity
prototype

The final high-fidelity

prototype presented
cleaner user flows for
ordering online and
checkout. It also met user
needs.
Accessibility considerations

1 2 3

Provided access Used icons to Used detailed

to users who are help make imagery for cloth and
vision impaired navigation easier. products to
through adding alt help all users
text to images for better understand
screen readers. the designs.
 ● Takeaways
Going forward ● Next steps
Takeaways
Impact:
The app makes users feel like shope really
thinks about how to meet their needs.
One quote from peer feedback:
“The app made it so easy to order I would
definitely use this app as a go-to for a fast, and
even on time delivery.”.
What I learned:
While designing the shope app, I learned that
the first ideas for the app are only the
beginning of the process. Usability studies and
peer feedback influenced each iteration of the
app’s designs.
Next steps
2
1
Conduct more user
Conduct another
research to determine
round of usability
any new areas of
studies to validate
need.
whether the pain
points users
experienced have
been effectively
addressed.
Let’s connect!

Thank you for your time reviewing my work on the shope app! If you’d like to
see more or get in touch, my contact information is provided below.

Email: kshreehari8@gmail.com