App
Eli’s Patio
A beer garden serving alcoholic drinks & food to local clientele.
Eli’s Patio is a small business I invented to represent a local mom and pop, no frills beer garden located in bustling downtown Oakland.
To cater to their busy clientele, they need an app that allows customers to easily and quickly place an order online, and encourages purchases through a rewards program.
Responsibilities: User Research, Wireframing, Prototyping, Branding, Copywriting
Understanding the User
I conducted interviews and created empathy maps to understand the characteristics, feelings, and needs of the users I’m designing for.
Based on what I learned through the interviews, I identified three main pain points.
Difficulty re-ordering previously ordered menu items
Lack of incentive for loyal customers
Long, unorganized menu that is hard to navigate and read through quickly
I then created two different user personas to represent beer garden customers: Shira and Thomas. I also designed user journey maps for both personas to explore what steps they might take to accomplish their goal of placing an order.
Shira's Persona
Thomas's Persona
Shira's User Journey
Thomas's User Journey
Starting the Design
After gaining a clear understanding of my target user demographic, I created a set of paper wireframes for my website pages. I experimented with a number of different layout ideas until I was satisfied with my final choices. I then took these paper wireframes and transformed them into digital wireframes using Figma, making some minor edits in the process. My next step was connecting my digital wireframes to create a low-fidelity prototype.
Digital Wireframes (4 of 9)
Usability Study
Using my low-fidelity prototype, I conducted a usability study to find out how users interacted with the prototype. I asked participants to perform a set of tasks related to placing an order and recorded their reactions, asking them questions about their experience afterwards. I then used my findings to edit the prototype, making it more intuitive and user-friendly.
Research Questions:
How long does it take users to place orders in the app?
What can we learn from the user flow, or steps users take to order?
Sample size: 5 participants (2 male, 2 female, 1 non-binary)
Ages: 21-70
Main Findings:
Users wanted a “review order” option to confirm their order before checking out
Users wanted to be automatically taken back to the “order” page after adding an item to their cart
Mockups
After finalizing my low-fidelity prototypes, I added color, imagery, and text to create mockups resembling what the design would look like in its final form. However, since this was my first ever UX project, I still had a lot to learn and the design was nowhere near done. In the months following the creation of my mockups, the design went through countless iterations. As I learned new skills and techniques, I continuously revisited Eli’s Patio, until I was finally happy with the finished result, which can be seen here:
The Editing Process
BEFORE
AFTER
Top navigation bar eliminated in favor of a bottom tab bar
“Featured item” buttons and body and heading text enlarged
Color palette and drink images changed, icons added for menu categories
Drinks, burgers, and snacks categories are given separate pages
Cart button changed to icon on item category pages and “Finished ordering?” button on main ordering page
Navigational Changes
My mockup order page consisted of a long list of menu items, minimally separated by headings. I wanted to increase legibility and improve the experience of reading through the menu, so I decided to break it up. I created three separate pages for the different menu item categories: “Drinks,” “Burgers,” and “Snacks.” I then further sorted the items on the drinks page by type of drink, making them even easier to scan through when ordering.
Now, when the user wants to order, they go to the main order page. From there, they can choose which of the item category pages to view.
Imagery and Iconography
After designing my mockup order page, I realized that it needed to be more visually interesting. I tackled this problem in a couple of different ways. First, I worked on my image usage. I changed the drink images from drink company logos to pictures of the actual drinks. This created more unity between the different images and made the page look more put together. I also enlarged the “featured item” images, which had the added benefit of drawing more attention to the “featured items.” On the “Drinks,” “Burgers,” and “Snacks” pages, I added background images to liven up the pages.
The second technique I used to heighten visual interest was increased iconography. I designed icons for the three food category pages, placing them on the buttons for those pages. I changed the cart button from simple text to an icon of a shopping cart. On the shopping cart icon is a number representing the number of items the user currently has in their cart. I also designed a bottom tab bar to be used across the app, featuring simple blue icons for easier navigation
THE
BRAND
The Eli’s Patio logo utilizes a font that’s reminiscent of a handwritten scrawl, in line with the casual nature of the business. For the body and heading text, I chose a simple sans serif font for legibility. Beer garden customers may be quickly scanning through the menu, so the text should be easy to read at a glance.
Color Palette
Logo Font: Caveat
Body and Heading Font: Josefin Sans
To further develop the Eli’s Patio brand, I designed a mascot for the business. The mascot appears throughout the app design and would be featured on any printed materials and signage. The mascot is a sparrow wearing a backwards baseball cap, representing the casual, outdoor atmosphere of Eli’s Patio. I designed a number of different versions of the sparrow to use in different contexts:
Thanks for tuning in!
Have thoughts or questions? Let me know!