Rise and Shine Cafe
Mobile App & Responsive Website Design
UX/UI DESIGN
PROJECT OVERVIEW
I completed the Rise and Shine Cafe mobile app and responsive website using Figma. The objective was to create a platform enabling users to reserve tables at a local cafe and place orders for pickup.
My Role
Full UX/UI Design Process
User Research
Animations
Types of Research Included in this Study:
Interviews, Empathy maps, Personas, User Journey Maps, and Competitive Audits
Design Process Overview
Insights from User Interviews
For me to determine how I was going to design my app, I needed to know the usual process and steps that users would take for table reservations and the user pain points along the way. It was important that I included a variety of diverse people in my research so that I could find ways to improve the user experience and form ideas that would help users benefit from my design. I conducted an interview with five participants and found a few key insights that helped me kickstart the process of building my mobile app.
“Make sure the width of the headlines dont go past the description”
“List the dire and indirect competitors I analyzed”
Lack of Accessibility Considerations
Individuals with disabilities often struggle to complete online tasks because many websites do not have an accessible design or incorporate accessibility features.
Users Prefer to Reserve Online
Many places need customers to book tables by text or phone. Customers like booking online for convenience.
Long Reservation Process
The process of reserving a table can often be lengthy and perplexing. A quick and straightforward method is generally preferred by users.
Users need to make reservations in advance
Users want the ability to reserve a table in advance for events or future occasions.
So, based off further research and insights…
How Might We…
Develop a fast and user-friendly online table reservation system that is easily accessible, so that users' can book their seats in advance and eliminate the need to phone the restaurant beforehand.
Competitive Analysis
I researched similar apps and websites to compare competitors' strengths and weaknesses. This competitive audit gave me a clearer idea of how to design my app, create an efficient reservation and pickup order process, and identify unique features to differentiate from competitors.
Restaurants
Movie Theaters
Arenas
Bars/clubs
Possible Competitors
“Redesign the sitemap to make it visually appealing and fit on mobile and tablet version if I decide to use it”
Table Reservations
Order Pickup
Simple 2-5 page reservation process
Dining
Events (music, art, etc.)
Common practices of competitors
Simple and efficient reservation process (Stay within 2-5 pages in length)
Dining
Events (music, art, etc.)
Target Goals
Creating a task flow was instrumental in organizing content and planning the layout of my app. This preparation was key to designing both paper and digital wireframes. Research indicated the necessity for a short, concise reservation process, limited to a few pages.
Task Flow
Order Pickup:
Table Reservation:
I could visualize the steps users would take to navigate from one page to another. With this understanding, I was prepared to begin creating my paper and digital wireframes.
Sitemap
Ideation Sketches
Creating paper sketches is vital when developing a project as it helps plan content and features. Understanding user needs and turning them into visual sketches forms the basis for user-friendly app design.
Mobile App Paper Wireframes
Digital Wireframes
After making paper sketches, I designed digital versions in Figma. Sized frames, chose fonts, and styles. Added labels for accessibility and clear navigation. Converted to Lo-fi prototypes by creating connections.
Mobile App Digital Wireframes - Low Fidelity
Table Reservation
Order Pickup
Desktop Digital Wireframes - Low Fidelity
Testing
I finally began refining my designs based on the results from a recent usability study. I took into consideration the feedback I had received, and made updates to my design accordingly.
The parameters of the study:
Moderated study, 5 participants in the United States, with a duration of 20 to 30 minutes
High Priority Insights
Calendar is not accessible
Option buttons need to be converted to dropdown menus
Medium Priority Insights
Change the oval buttons to be square
Get rid of the "Back" buttons
Before
After
Design Fixes Round 1
Made my design accessible by replacing the calendar. Users could not read the text inside the calendar before
Replaced the oval buttons with square buttons with rounded corners
Replaced the option buttons with dropdown menu’s to more easily select dates, etc.
Final Round of Usability Testing
During the test phase, it was important that I determined if my design was accessible and usable. I conducted a usability study to test my design by having users complete a series of tasks. I then completed a UX research study to gain insights on my design.
Before
After
Design Fixes Round 2
Converted the grey buttons into orange buttons, in order to make my design accessible
Added more negative space to the bottom of the screen
Included a title bar at the top of the screen to inform users about their location within the app or website
Aligned the text and description for the menu item
“Put each update right next to the wireframes
”
Instead of the box below, put the updates next to the wireframes basically
High Fidelity Prototypes
It was time to start implementing new elements in my designs. I had to create my own color palette, add typography, and update the layout of my design. Adding images was also essential in building my app to its final product. These brought life to my designs and showcased how the final product looked and how it functioned. I finished connecting the screens and made both of my prototypes interactive.
Mobile App
Responsive Website - Desktop
Creating a Mobile Website
I had completed my Hi-Fi prototypes, and I was ready to start making my mobile website. I resized components and moved around different elements of my design to fit the new frame size. Once I had completed my mockups, I finished making connections and completed my Hi-Fi prototype.
Responsive Website - Mobile
Responsive Website - Desktop
High Fidelity Mobile Website
“Put wires right next to insights and write out more thoroughly the updates you are making”