Case Study for a casual restaurant website.

1. L’Orque Royal
Rudy Alvarenga
8/4/23

2. The product:
This website is for a small casual pub/ restaurant in the
heart of Brussels, Belgium. I wanted to make a place based
off of research that was affordable, not too far away, and
most importantly welcoming to everyone.
Project overview
Project duration:
I’d say I started this project the last weeks of
April through July so 3 months time.
Preview of selected
polished designs.

3. The problem:
During the initial interviews I did, the most
common issues were atmosphere and the
complexity of the food. It was important to
have a welcoming/ cozy atmosphere with an
easy menu to satisfy the standard patron along
with fussy eaters and children.
Project overview
The goal:
The goal was to try and solve the problem by
creating a restaurant & pub hybrid, that gives a
promotes a cozy and welcoming atmosphere.
This place has a simple, easy menu that the
people of Brussels are sure to be familiar with.

4. My role:
Is the lead project creator, designer,
researcher.
Project overview
Responsibilities:
User research, competitive audit research,
creating wireframes, prototyping.

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

6. User research: summary
I had it in my head to go through the user research process with no expectations. However that
didn’t stop me from having a few. One is that I didnt think people would drive downtown or further
for a restaurant that wasnt deemed “fancy”. During the research I asked what draws them to a
particular restaurant, what factors determine the restaurant they pick, issues with their current
ordering system and their experience with delivery apps. The answers ended up being similar,
people dont mind distance as long as they have a positive, welcoming atmosphere; something
budget friendly, and rewards loyal customers. With food delivery, the main complaint was
consistency with food, and even with delivering the items ordered.

7. User research: pain points
Pricing & Payment
This pain point has to do
with pricing. Users are
frustrated that they are
spending too much at
restaurants - much to do
with the current rising
costs in today’s world.
Here we use this point to
point us towards quality
and simplicity with the
menu.
Pricing & Payment
This second pain point
goes along with the first
- People would also like
to be rewarded for
loyalty. This guided me
to implement a rewards
system onto the website.
Service quality &
Accuracy
Here - people are
frustrated with the
accuracy of their orders
being delivered.
Sometimes their order
could be completely
wrong or maybe one or
two items are missing. I
focused on the display of
the users order and
accuracy during
checkout.
Convenience &
Order customization
It was discovered that
users would like
someway to customize
their order as well as
have a user friendly way
to order. The website
has an option to choose
between delivery and
curbside pickup as well
as an additional request
box at checkout.
1 2 3 4

8. Persona: Name
Problem statement:
Samira is a mother and
processional illustrator, who
needs a convenient, cost
effective restaurant to order
from because Both her and
spouse work full time and
sometime their schedules dont
leave time to cook dinner for the
family

9. User journey map
Here my goal and thought
process was trying to make
this user journey as realistic
as possible. Trying to get into
the headspace of a parent
busy with work wasnt all too
difficult, so I hope this journey
map somewhat accurately
depicts believable thought
processes from this user.

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

11. Sitemap
My Goals here were to
create user friendly
navigation and a nice
seamless online ordering
experience. My line of
thinking was that I wanted
to make ordering as easy as
possible for any user.
Image of
sitemap/IA

12. Paper wireframes
These are my final wireframes
for each page. My thoughts
through drawing and planning it
out were to streamline the
process as much as possible.
The menu I wanted to be simple
with a side collapsible tab that
shows the users current order.
On the receipt page i thought it
was really important to show an
order tracker for the user.
Image of paper
wireframes

13. Paper wireframe
screen size variation(s)
Resizing the desktop
versions was a little bit of a
challenge but in the end i
think I was able to simplify
the layout enough so the
user wouldnt have to do a
ton of scrolling or going
back and forth in between
pages.
Image of paper
wireframe
screen size
variation(s)

14. Digital wireframes
The goal for this one was to
make a simple menu that
made it easy to navigate
and to prevent the user
from having to scroll a mile
long to see the whole menu
Menu has 6
tabs dividing it
into sections.
The other
design change
was to widen
the menu into
4 rows for the
same reason
too.
Insert first wireframe
example that
demonstrates design
thinking aligned with
user research
This element
right here is a
collapsible
shopping cart
displaying the
users order,
the total as well
as the checkout
button.

15. Digital wireframe
screen size variation(s)
Like in the last slide, shrinking
down from a desktop design
to a phone design was kind of
difficult, but going from
desktop to tablet to phone
was easier though. What I was
going for was to keep the
same feeling as I had on the
desktop for the tablet and
phone.
Insert wireframe
example that
showcases
different screen size
variations

16. Low-fidelity prototype
https://www.figma.com/proto/xeDjkePd
IroM1bZXf9nFdg/Project2-Le-orc-royal?t
ype=design&node-id=1-2&t=1wpRmzbIE
fTNa3vy-1&scaling=min-zoom&page-id=
0%3A1&starting-point-node-id=1%3A2&
mode=design
The user flow here is to start and complete a
curbside pickup order. We start at home >
order> curbside & start order> menu with
shopping cart dropdown menu > select items
and continue> review order & enter info >
place order > receipt page
Here i realized that it doesnt make much
sense to tell the restaurant “im here ” from a
desktop screen so I had to make that change
in the final design.
Screenshot of
prototype with
connections or
prototype GIF

17. Usability study: parameters
Study type:
Unmoderated usability study
Location:
United States, remote
Participants:
5 participants
Length:
5-10 minutes

18. Usability study: findings
Insert a one to two sentence introduction to the findings shared below.
This one I understand for
the initial prototype, I
learned here that I didn’t
differentiate it enough or
make it obvious enough
that this was the starting
page for the user flow.
Home page Keeping track of
order
Checkout button
This one, I ran into some
early hurdles, but, I had a
collapsible cart that really
didn’t show any real
information for
prototyping purposes.
User request was a way to
keep track of their order.
Here for this one the
finding was that the
checkout button was not
visible to the user and well
some unfortunately could
not find a way to continue.
1 2 3

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

20. Mockups
This is the menu area which i wanted the user to have a smooth experience. During the prototype, I had set the
checkout button too low, so users had trouble finding it and continuing the flow. After feedback, I corrected the
issue, by decreasing the space in between the text, reducing the size a little, and moving the button up. So now
during testing, the button is within the borders so the user shouldn’t have to scroll to thee the button.
Mockup 1 before Mockup 1 after
Before usability study After usability study

21. Mockups
The receipt page is one where the feedback I received was to make the tracker available elsewhere on the page. My
solution was to have the receipt/ tracker be texted to the user as well as having the receipt tied to the user profile.
If the user is not signed into their profile, well, then they will only have the copy texted.
Mockup 2 before Mockup 2 after
Before usability study After usability study

22. Mockups: Original screen size
Main
mockup
screen for
display
Main
mockup
screen for
display
Main
mockup
screen for
display
Main
mockup
screen for
display

23. Mockups: Tablet Variations
Main
mockup
screen for
different
screen size
variations
Main
mockup
screen for
different
screen size
variations
Main
mockup
screen for
different
screen size
variations
Main
mockup
screen for
different
screen size
variations

24. High-fidelity
prototype
Screenshot of
prototype with
connections or
prototype GIF
https://www.figma.com/proto/xeDjkePdIroM1bZXf9nFdg
/Project2-Le-orc-royal?type=design&node-id=96-3&t=W
MJbI1TVjgpNaQvS-1&scaling=min-zoom&page-id=95%3
A2&starting-point-node-id=96%3A3&show-proto-sideba
r=1&mode=design
My user flow here starts off at the home
screen from the user has the option to sign
in to their profile. Continue to order
curbside and user is taken to the menu
with a shopping cart. The user goes to
checkout, and the user is taken to the
checkout page, where the user has the
option to sign in again, from their they can
enter payment info and place order and
receive their tracking information and
receipt.

25. Accessibility considerations
Color Palette was one of my
bigger concerns, mostly
because deciding the palette
usually seems to be one of
the more difficult parts. I
found some colors I liked,
some high contrasting ones,
found the hex code and ran
them through an online
color blindness checker to
make sure the colors stayed
high contrast.
High contrast text was
another accessibility
consideration. Especially
because there is text
everywhere this too helps
with those with
colorblindness.
One of the other
considerations I took was
language. Most of the
restaurants I initially
researched in belgium
already had a translate
function English/ French/
Dutch - I took it further, by
implementing a language
Icon to the mockup to
indicate more than the three
languages can be used.
1 2 3

26. ● Takeaways
● Next steps
Going forward

27. Takeaways
Impact:
“This was miles better than your first project.”
What I learned:
I learned so much from this project. Especially
Animations and components, I can’t believe
how useful they were during this project. I
learned that I need to carefully choose my
color palettes as well - make sure they’re color
blind - friendly early on. This was a great
learning experience.

28. Next steps
First thing I would do is to
add more promotional -
style pictures and
language. Maybe some
updates for events or
something of the like, to
make the website feel
more “Active”.
Next, I think I would add
and “About us” page. Most
restaurants seem to have
this, especially smaller
ones. I usually read these,
im sure others do as well,
so I think it would be
another feature to add life
to the project.
There is still more id like to
do with the project the more
i think about it, but I think it
would be great to expand on
my “Rewards” page, Right
now it shares an animation
thats presented on the
home page and a visitation
function where the user gets
a freebie every 4 visits.
Maybe i’ll add a merch
section for mugs and shirts.
1 2 3

29. Let’s connect!
Thanks for reviewing my case study and my prototype/ project. I had a lot of fun creating this, and I
hope you had a good time reviewing it as well. I added a couple of fun references in there too ;).
You should be viewing this on CARD.io if, not the link is included. You may text me at
+1407-858-8107, Email address is Alvarengarv@gmail.com