Opentable is a platform for restaurant reservation that allows a one stop dining experience for customers.
VIEW UX DESIGN
OVERVIEW
While confirming a reservation at a restaurant is easy, finding the right restaurant can be challenging, especially when customers are presented with a large selection. Our objective is to make restaurant exploration fun while making the selection process faster and easier.
TEAM
Ibtida Hasib
Annie You
Radiya Aheto
Elijah Hassan
MY ROLE
Research
User Persona
Wireframe
User Flow
UI Design
PROCESS AND TIMELINE
CHALLENGES
The app UI doesn’t invoke hunger as there are more pictures of restaurant interior compared to food.
While red is an appetizing color, a combination of red and white is not.
Typeface choice is clean but it’s sharp. Icon set is not consistent.
SOLUTION
Use of appetizing warm colors like red and yellow.
Make it visually appealing by using gradients.
Use of rounded typefaces to appear welcoming and friendly.
01. UI DESIGN
FEATURE 1: DINDER CRAVING
User is presented with the Dinder logo that reveals the filter page for preferences.
While swiping, user could scroll down to see the details of the dish itself or the restaurant as a whole.
FEATURE 2: SOCIAL DINING INSIGHT
Under restaurant details, user is able to see and read reviews that are extracted from social media.
They are also able to leave comments for others.
HOMEPAGE
Homepage reveals any new feature or announcements for the hero. User can scroll and find most popular restaurants at the time or browse by cuisine.
OTHER FILTERS
There are variations within filters based on what the user is looking for.
02. ART DIRECTION
DESIGN PRINCIPLE
Invoke Hunger.
Enhance food images through appetizing colors.
Be Welcoming.
Use rounded san serif typefaces and rounded frames to appear friendly.
Be Inclusive.
Reveal small amounts of information at a time.
ARCHETYPE
03. DESIGN SYSTEM
COLOR PALETTE
The new Opentable app utilizes warm colors to accentuate food images, creating an inviting and energetic atmosphere for users, and make restaurants appeal for reservation.
ICONS
Characteristics of Icons
Icons have rounded edges to appear friendly and approachable.
Icons may be filled or outlined.
Large icons (24px) are used for navigation, bookmarks and likes.
Small icons (8px) are used as guides or inside filters.
TYPOGRAPHY
The use of rounded typefaces make a welcoming and friendly approach.
TYPE PAIRING
TYPESCALE
ILLUSTRATION STYLES
We chose a flat illustration style with simpler shapes so it is visually appealing while being subtle enough to not grab too much attention.
COMPONENTS
BUTTONS
We continued the use of rounded edges in our buttons and filters along with our lighter primary color and secondary colors.
CARD STYLES
We used gradients and incorporated different radius on certain corners of our cards in order to excite our users.
05. KEY TAKEAWAY
WHAT WE LEARNED
User testing is important.
Having users test out the product help fix errors that are overlooked.
Community is Key.
Form an informed community, where users can share their experiences and provide valuable insights to others.
Appealing visuals is important.
When it comes to food, having an appetizing picture is essential to attract customers.
Make it exciting.
Make restaurant browsing fun is opentable’s differentiator.
NEXT STEPS
Enhance the micro interactions.
Design UI dark mode.
Increase legibility.
