Case Study | Taste the City
Design Process | Mockups
Lofi mockups
Once the features and estimate were approved, our designer began creating lofi (low-fidelity) mockups, using the req sheet and client sketches as reference. Within a few days we created drafts of every required page and feature, in some cases with multiple options for the client to choose their preferred style.
The point of the wireframes and lofi mockups is the same as building blueprints. Decisions are made about where buttons, images, data tables, copy, etc, and how a user will move through the various processes. Making changes are cheap and fast to make at this phase and sets the foundation for the entire rest of the design and development process.
Admin Panel
We use a third party service for pre-built admin panels. It offers baseline functionality and we can add to it to cater to client needs. This will be detailed later in the case study.
The first page visitors see is the Browse Tastings page. Naturally, it lists the available tastings which are created by an admin in the backend admin panel. Originally, we were thinking of including multiple images per card but sticking with one was easier and encourages visitors to click a tasting to see further detail. The cards show enough information to get the visitor curious but also enough to not waste their time by clicking in over and over unnecessarily.
Cards display an enticing thumbnail, the tasting name, the duration, the walking distance between locations, and the cost per person.
The launch version focused on Calgary, Alberta with a roadmap that included additional Canadian cities. At the time of writing this, Victoria, Toronto, and Winnipeg have been added.
When a visitor clicks on a tasting card on the Browse page, they are taken to the tasting details page where they can read more information and choose to make a reservation.
All tasting details are created in the admin panel by the business owner. Tastings are curated and coordinated by the owner, her team, and participant restaurants. Each restaurant offers a particular dish/dessert based on dietary restrictions so there is no specific meal ordering, only booking the date, seats, and any restrictions.
In order to manage payments, we integrated with Stripe so the client can manage payments and tracking from the Stripe app.
The restaurant has their own dashboard which displays all their bookings. The left column defaults to today whether or not there are any bookings. If none, then it’s blank. If there are, then it lists individual reservations.
The restaurant can also see upcoming bookings on the calendar side. They can cycle through subsequent months to see more distant bookings. When one is clicked, those bookings are shown on the left.
When a reservation is booked, the customer receives a 4 digit booking code. When a custom arrives, the host will click the check in button which opens a modal asking for the code. Once the code is entered successfully, they are checked in.
When a custom secures a booking, it kicks off a chain of automated messages, both email and text. Messages are timed based on booking times and calculates intervals between stops during a tasting itself.