Reservation seats and order at restaurants online

My role: UI Designer and Front End Developer

Timeline: 2017 -2018

Number with team: 4

Platforms & tools

  • Web
  • mweb
  • Adobe Illustrator
  • Adobe XD
  • usertesting.com

Context

A web-based application I was building with at MakeSense. This web app was a reservation for dining in a restaurant that allows people to pre-order and pay separately. There was also a feature that would enable servers to know a user’s food allergies/dietary requirements in advance. I focused on were the group payment methods, onboarding a new user who wanted to make a reservation, and organizing reservations on the restaurant side.

Design Process

Rinse and repeat

Discovery

Discovery:

  • Competitive analysis
  • User flows
  • Personas
  • Desk research
Ideate

Ideate:

  • Low fiedlty prototypes
  • High fidelity prototype
  • Content
Testing

Testing:

  • User testing

When dining out with friends or colleagues, some of these events may occur: someone wants to order in advice because of time, and there is no menu online, the hassle of spitting the bill as a group or getting interrupted by the server’s follow-up in a middle of a conversation. As users, we wanted to give them a space to plan their orders and not put a lot of effort into payment.

Understanding our potential users better

For the interview, we met with six people who had experience working in a restaurant and dined out often. We learned From the conversations that the service needed to be balanced; either the server came too often, making them uncomfortable, or lacking interaction for long periods. People also felt uncomfortable with spitting the bill. If they worked in the restaurant and had to handle organizing the tables, it took work to use paper or the technology needed to work how they needed to.

Persona page- Ashley

Sketching

wireframes of Chowdown experience

Prototype

With the information that we gathered and created personas, we used that information to start thinking about the layout of pages and how the user will navigate when onboarding, making payments, and reserving a spot at the restaurant. This is an application that I have been assisting. I had to organize and construct the mockups and wireframes and build about 55 pages. The stakeholders wanted the web application to have a similar feel to Foodler, GrubHub, and Domino websites and mobile applications.

Takeaways

Did we achieve our goals?

We learned more about people's expectations regarding scheduling and figured out methods to ensure we allowed them to customize their accounts for their dietary needs. The group payments feature created challenges, especially if the order and the restaurant were still live. We also found ways to have people go online or request a server and let them do the order.

Next steps?

  • Work on the product detail page and filtering experience
  • Creating design plans with PMs and leads for the backend for resturant to orgainze seating and reservations
  • Observe a restaurant and server when placing orders and reserving tables.