website for restaurant

1. Website for a restaurant
Michaela K.

2. The product:
The restaurant On the hill is a family restaurant that
emphasises high quality service and a pleasant
environment. At the same time, it offers delivery of
meals that can be ordered via an online form.
Project overview
Project duration:
June 2023

3. The problem:
The available online pages are quite confusing
and would need a redesign. Visually, the need
to revive and diversity.
Project overview
The goal:
Design a Tee’s Shirts website to be user
friendly by providing clear navigation and a
quick food ordering process.

4. My role:
UX designer leading the On the hill website
design
Project overview
Responsibilities:
Conducting interviews, paper and digital
wireframing, low and high-fidelity prototyping,
conducting usability studies, accounting for
accessibility, iterating on designs and
responsive design.

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

6. User research: summary
I conducted user interviews with potentials customers of the restaurant. I tried to find out whether
people order food this way more from work or privately. The design needs to be adjusted
accordingly.

7. User research: pain points
Navigation
Order page designs are
often confusing and
contain too many steps.
Interaction
Some restaurants prefer
the visual over the
functional, just to show
off how beautiful their
premises are. But that
does not mean
everything.
1 2
Experience
Online ordering websites
don’t provide an
engaging browsing
experience
3

8. Persona: Jane
Problem statement:
Jane works in an office as
a bank teller and is used
to ordering food from an
online store every day.
He is looking for a quick
and efficient solution
because she does not
have mucb time at work.

9. User journey map
I created a user journey
map of Jane’s experience
using the site to help
identify possible pain points
and improvement
opportunities.

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

11. Sitemap
I tried to design the site map in
such a way that it best meets the
requirements of potential
customers. I paid attention to
simplicity, overview and an ideally
fast way to order.

12. Paper wireframes
Next, I drew paper wirefrmes for
each screen, keeping in mind the
smooth flow of orders.

13. Paper wireframe
screen size variations
Because On the hill
customers access the site
on a variety of different
devices, I started to work on
designs for additional
screen sizes to make sure
the site would be fully
responsive. Menu - desktop
Menu - mobile

14. Digital wireframes
The transition from paper to
digital wireframes made it
easier to understand how the
redesign could help solve user
pain points and improve the
user experience.
The well-thought-out layout of
the individual boxes formed
the main stratégy of the design.
The clear layout clearly shows
what services the restaurant
offers. CTA buttons allow you
to order the service directly.
The user can access tha daily
menu in two ways.

15. Digital wireframe screen size variation(s)

16. Low-fidelity prototype
To create a low-fidelity prototype, I
connected all of the screens involved in the
primary user flow of ordering and paying
for food.
I then conducteda usability study that
pointed out problematic parts of the
design. I made sure to listen to their
feedback and implemented a few
suggestions for places that addressed user
concerns.
View low-fidelity prototype

17. Usability study: parameters
Study type:
Unmoderated usability study
Location:
Czech republic, remote
Participants:
5 participants
Length:
15 minutes

18. Usability study: findings
These were the main findings uncovered by the usability study:
Users cannot order more
than one serving.
Choice of food Impossible to order by phone Missing feature
Users did not find the
option to order food by
phone.
Users missed the function
of remembering personal
data.
1 2 3

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

20. Mockups
Based on the insights from the usability study, I made changes to expand the options for ordering
meals.
One of the changes I made was the option to choose whether I wanted to order food online on the
website or by phone. It is because some people prefer to order by phone.
Mockup 1 before
Before usability study After usability study
Mockup 2 after

21. Mockups
It is possible that customers working in companies will order food from the restaurant repeatedly.
For this case, I have added the „remember data“ option. Users will not have to fill in their data
every time, but only once.
Before usability study After usability study

22. Mockups: Original screen size

23. Mockups: Screen size variations
I included considerations for additional
screen sizes in my mockups based on my
earlier wireframes. Because users shop
from a variety of devices, I felt it was
important to optimize the browsing
experience for a range of device sizes, such
as mobile and tablet so users have the
smoothest experience possible.

24. High-fidelity
prototype
My hi-fi prototype followed the same
user flow as the lo-fi prototype, and
included the design changes made
after the usability study, as well as
several changes suggested by
members of my team.
View the Tee’s Shirts high-fidelity
prototype

25. Accessibility considerations
I used headings with
different sized text for
clear visual hierarchy
I used landmarks to help
users navigate the site,
including users who rely
on assistive technologies
I designed the site with alt
text available on each
page for smooth screen
reader access
1 2 3

26. ● Takeaways
● Next steps
Going forward

27. Takeaways
Impact:
Our target users shared that the design was
intuitive to navigate through, more engaging
with the images, and demonstrated a clear
visual hierarchy.
What I learned:
I learned that even a small design change can
have a huge impact on the user experience.
The most important takeaway for me is to
always focus on the real needs of the user
when coming up with design ideas and
solutions.

28. Next steps
Conduct follow-up
usability testing on the
new website
Identify any additional
areas of need and ideate
on new features
1 2

29. Let’s connect!
Thank you for reviewing my work on the Tee’s Shirts app!
If you’d like to see more, or would like to get in touch, my contact information is provided below:
Email: jmartinez@email.com
Website: jmartinezdesign.uxportfolio.com