This is my First Portfolio Project that I made as a part of the Google UX Design Course. I worked on this project from July to November 2022. It is a design for an e-commerce app for a fictional shop selling sports equipment/clothing.

1. A. G. Sports World App Design
Anand Gopalakrishnan
Designing an E-Commerce App for a Shop That Sells Sports Equipment/Clothing
My First Portfolio Project as a part of the Google UX Design Course

2. The product:
A. G. Sports World is a shop that sells
quality sports equipment/clothing that is
located in a busy metropolitan area. They
offer a wide range of products at
competitive prices, and target customers
interested in sports or physical activity.
Project overview
Project duration:
July 2022 to November 2022

3. The problem:
Busy workers want to make time for
physical activity within their schedules, but
they don’t have an easy way to get the
equipment they need without going to a
physical store.
Project overview
The goal:
Design an app for A. G. Sports World that
would help users easily order sports
equipment/clothing without needing to
take the time to go to a physical store.

4. My role:
UX Designer tasked with creating the A. G.
Sports World e-commerce app from the
idea of an app to the creation of polished
designs.
Project overview
Responsibilities:
My responsibilities throughout this project included
conducting user research through interviews and
usability studies, creating wireframes and
mockups, creating low-fidelity and high-fidelity
prototypes, considering accessibility, and iterating
on the designs after carrying out usability studies.

5. Understanding
the user
● User research
● Personas
● Problem statements
● User journey maps

6. User research: summary
In order to understand who were the users I was designing for along with their needs, I
conducted user research through interviews, and I created empathy maps.
I identified that a major user group included working people who wanted more time for
physical activity and sports, but did not have the time to go to a sports store to buy things.
Although some initial assumptions were confirmed, it was found that a lack of time was not
the only factor. Other factors that affected the users included a busy schedule,
commitments and responsibilities to family members and unfamiliarity of the local
neighbourhood (for recent immigrants).

7. User research: pain points
Busy Schedule
Working people want
to make time for
physical activity, but
their busy work
schedules and
commitments to their
families prevents them
from going to an
actual sports store.
Accessibility
Online stores may not
be compatible with
assistive technologies
such as screen readers,
and may not have a
feature to translate the
page into another
language.
Filter Options
Working people are
conscoius of their
budget and have their
own personal
preferences, and so
want options to filter
the results of the
online store.
IA
Online stores may
have much more text
than images, and the
text has a very small
font size, making it
difficult to obtain all
the information about
the product.
1 2 3 4

8. Persona: Vikram
Problem statement:
Vikram is a busy software
engineer who needs an easy
and reliable way of order sports
equipment and clothing online
because he wants to make time
for physical activity amongst his
busy schedule and family
commitments.

9. User journey map
By making a user journey
map for Vikram, I saw
how important it was for
users to have a stand-
alone e-commerce app
for the shop.

10. ● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Starting
the design

11. Paper wireframes
I took the time to draw my
initial ideas out as paper
wireframes, iterating on each
one in order to align it with the
user pain points that I had
identified. I initially sketched
out a simple user flow by which
the user could place their order,
only including the major
screens.

12. Digital wireframes
When creating the initial
designs, I kept the user
pain points that I found
during my initial user
research in mind, and I
tried to incorportate
features that would help
to solve these pain points.
Simple way to
access the
Navigation
Menu; present
in all
wireframes
Easy-to-
access sort
and filter
options for
the users, as
users
mentioned
during initial
research.

13. Digital wireframes
Alongside addressing
pain points, I also made
sure to address
accessibility
considerations as early as
possible in the design
process, such as features
for enabling a screen
reader, or changing the
language.
Accessible
screen-reader
option,
present on all
pages initially
Simply way to
select a
convenient
date and time
range for
delivery of the
order

14. Low-fidelity prototype
After creating all of my
wireframes in Figma, I
connected them together, in
order to create a low-fidelity
prototype that would mimic
the user flow in the final app.
You can see the low-fidelity
prototype at this link.

15. Usability study: findings
I conducted two rounds of usability studies. The first round helped guide me when
creating my mockups, and the second round helped me refine those mockups into the
final designs.
Round 1 findings
The search functionality was
confusing to users.
1
Users felt confused in some parts
of the flow, as there were too
many animations.
2
Round 2 findings
Users needed an easy way to find
and enable accessibility settings
1
Users wanted a way to add
products directly to the cart
2
Users wanted an easier way to
select a date/time for delivery
3

16. ● Mockups
● High-fidelity prototype
● Accessibility
Refining
the design

17. Mockups
The usability studies
demonstrated that users felt
that the products screen was
too crowded, so the design of
the screen was altered to
make it easier to read. Also,
users wanted a way to add
items to the cart directly
from the products page. I
incorporated this as well.
Before usability study After usability study

18. Mockups
The second usability study
showed that users were
confused by the search
functionality in on the original
Home Screen, so this was
updated to a button instead of
a search bar. Along with this,
the position of the “back”
buttons was changed from
the bottom to the top of the
screen.
Before usability study After usability study

19. Mockups

20. High-fidelity prototype
The final high-fidelity
prototype featured an
updated search option
and simpler animations,
while also incorporating
all of the feedback from
the first usability study
as well. The completed
high-fidelity prototype
can be seen at this link.

21. Accessibility considerations
Provided access to
people who primarily
speak or use other
languages by giving
options to change the
language during the
sign-up process and in
the profile.
Used icons to make
navigation easier for all
the users. All icons are
also accompanied by
descriptive labels.
Provided accessibility to
visually impaired people
by providing alt text to
images and
functionality for an in-
built screen-reader.
1 2 3

22. ● Takeaways
● Next steps
Going forward

23. Takeaways
Impact:
Users feel that the app considers their
needs well, including being accessible to a
wider range of people. The following is a
quote from peer feedback:
“It was super easy to place an order on the
app, but what I liked the most was that I
could select the date and time I preferred
for my parcel to delivered! That way, I can
make sure I’m at home to receive it.”
What I learned:
While designing the A. G. Sports World
mobile app, I learnt about the Design
Process and the various stages involved. I
also learnt about the importance of user
research, and saw how it helped me to
iterate on my designs.

24. Next steps
Conducting a third
usability study to assess
whether the user pain
points have been
effectively addressed.
Adding/elaborating
features such as the
sort and filter options,
the “What’s Trending”,
“Favourites”, etc. on the
Home Page, as well as
the My Orders page
mentioned in the
Navigation Menu.
Conducting a fourth
usability study along
with more user research
to find out whether
these new features help
to enhance the user
experimence or not.
1 2 3

25. Let’s connect!
Thank you for taking the time to review my work on the A. G. Sports World App! If you would
like to get in touch, my contact information is given below:
Email Address: anandgopalakrishnan27@gmail.com

26. Thank you!