mobile sales app

1. BIKETT App Design
Michaela Kravakova

2. The product:
Bikett is a store that does not yet have a
sales app. Since they see that this product
is successful among competitors, they will
also try to create an application. He hopes
the app will increase the company's profits.
Project overview
Project duration:
March 2023 to May 2023

3. The problem:
People who are planning to buy a
bicycle or equipment can use the tool
for an easy and clear purchase.
Project overview
The goal:
Design an application that will
allow customers to purchase
cycling goods in an accessible,
convenient and intuitive way.

4. My role:
UX designer designing an app for Bikett from
conception to delivery.
Project overview
Responsibilities:
Conducting interviews, paper and digital
wireframing, low and high-fidelity prototyping,
conducting usability studies, accounting for
accessibility, and iterating on designs.

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

6. User research: summary
During the design process, I conducted interviews and created empathic maps to
understand the requirements and wants and needs of the users. the primary
group was people interested in cycling, some of whom promise from the app that
they will be able to buy cheaper.
The research revealed that users are interested in a detailed product description
because they are aware that buying a bike is a high investment. Users placed
great emphasis on the product filtering options.

7. User research: pain points
Time
Potential customers
are looking for a
means that will allow
them to byu cheaper,
or will bring them
some added value
whem buying goods.
Accessibility
Platforms for the purchase
of goods are not usually
connected as essential
technologies.
Product detail
Users feel that the detail
of the goods is
insufficiently described.
1 2 3

8. Persona: Ying
Problem statement:
Emma is a busy student who
is looking for a bike mainly to
get from place to place
quickly.

9. User journey map
Emma´s journey mapping
showed how useful a
bicycle and cycling
equipment sales app could
be for customers.

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

11. Paper wireframes
I devoted enough time to
creating paper wireframes, but
over time the result (as you will
see later) changed even more.
However, the pivotal body
according to the paper proposal
remained.

12. Digital wireframes
As the initial design phase
continued, I made sure to
base screen designs on
feedback and findings from
the user research.
The search
bar at the top
of the screen
on most
images is
used to search
for a specific
product.
This button
alolows you to
easily add the
selected
product to the
basket.

13. Digital wireframes
An overview of multiple
products at once is
essential in a sales
application.
Viewing
multiple
products
simultaneously
allows the user
to compare
individual
products.

14. Low-fidelity prototype
Using the completed set of digital
wireframes, I created a low-fidelity
prototype. The primary user flow of
I connect was the product search,
its subsequent addition to the cart
and the payment process.

15. 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.
Insufficient description of the product
detail
1
Confused with the ordery process
2
Reservations about the lack of an
option to filter goods by parameters
3
Round 1 findings
the products in the product list merge
1
A small amount of photos, suitable to
increase visual attractiveness
2
Round 2 findings

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

17. Mockups
Earlier designs did not allow
for customization visibility,
which is why filtering and
sorting options were added to
the application. Additionally,
the design was adjusted to be
more user-friendly and
intuitive.
Before usability studies After usability studies

18. Mockups
There were more comments
from the second usability
study, one of them pointed
out that on the product page
the individual products blend
together. The user suggested
that the products should be
better separated.
Before usability study 2 After usability study 2

19. Key mockups

20. High-fidelity prototype
The final high-fidelity prototype met the conditions for an easy process of purchasing goods.
Prototype view here: https://www.figma.com/proto/gJZNm5qtxMldoHBHsVMYba/Mobile-
sales-app-for-a-bicycle-shop?page-id=0%3A1&type=design&node-id=57-
2185&viewport=637%2C761%2C0.27&scaling=scale-down&starting-point-node-id=2%3A35

21. Accessibility considerations
Used icons to
help make
navigation easier.
Used detailed pictures
of the bikes to help
better visualize what
the bike looks like.
1 2

22. ● Takeaways
● Next steps
Going forward

23. Takeaways
Impact:
Ultimately, the application worked well for the
user. They particularly praised the fact that
they did not feel stuck anywhere during the
process. It can be said that the application has
fulfilled its objectives.
What I learned:
I learned that feedback is very
important and really makes a big
difference to the final designs.

24. Next steps
Conduct another round of
usability studies to validate
whether the pain points
users experienced have
been effectively addressed.
Conduct more user
research to determine any
new areas of need.
1 2

25. Let’s connect!
Thank you for your attention!
Email: michaela.kravakova@gmail.com

26. Thank you!