Case Study | Taste the City
Design Process | Mockups
Hifi mockups
Once the lofi mockups were refined and approved, we moved onto hifi mockups which applied brand colours, imagery, and copy. In this case there wasn't really any branding save for a dark forest green from an early template website. The forest green felt appropriate so we built out the palette from there. Our designer has a general palette formula that includes a primary colour, a secondary colour that is often a lighter tone of the primary, then a brighter accent colour for buttons and icons when we want to draw the viewers' eyes to important buttons or information. In most cases the dominant colour should be easier on the eyes so it isn't distracting and is comfortable to look at daily for months/years.
There was no logo yet but with the colour palette and knowing the client well enough to get a sense of their vibe and personality, our designer created a wordmark that reflected the tone of the client and app.
Once the client approved the lofi mockups, we applied colour, images, and content. Usually we end up creating a couple variations to try out styling decisions and the client picks which option they like. Sometimes it is a mix of two options. After a couple days we landed on a style. Our designer trends towards a minimalist aesthetic to make information clear and for images to stand out. Typography is also carefully selected based on its reflectiveness of the brand identity and legibility.
The tasting’s details page with colour. Since launch, the dietary restriction selection has changed into a type field so the customer can offer more details. Whatever the customer writes is displayed on the restaurant’s dashboard on the reservation window. Payment is handled by an integration with Stripe so Stripe takes over as soon as the user “proceeds to checkout”. All bookings are tracked in the admin panel in addition to Stripe.
Restaurants are all able to log into a dashboard that displays their current and upcoming bookings. When a visitor arrives they present the host with their booking code which is entered when the "check-in" button has been clicked.
Fun usability fact: Originally the hostess would manually type in the 4-character length alphanumeric code but it proved awkward in practice because in enough cases, their long decorative nails got in the way. As seen below, we simplified the process
Continue on to read about the development process