Mockups after redesign

Bar Voce – Digital strategy for a safe COVID-19 restart

what and why

From the beginning of March 2020 the world stopped due to the Covid-19 pandemic. Italy has been at the center of this tornado with a lot of cases and business shut down. The month of May brought some hope and some activities started to reopen with strict safety measures.

Among those, the regulatory requirements required bars to disinfect menus on every person browse. In this context, the owners of Bar Voce, having a big loads of clients, were looking for a digital solution to prevent its employees to loose time in manually disinfecting the menus still allowing its customers to safely browse.

my role

During the first discussion with the clients, their initial idea was to develop a mobile app. I suggested them that this solution was not optimal for their use case: the use of the app implies the users to download it from the store and the time needed for this operation would have slowed down the ordering process. Furthermore the bar did not have a Wi-Fi connection, so the users would have to use their own data connection to download the app.

I then moved the discussion towards the implementation of a tailored website-menu which was coming more easy to use and fast approaching, therefore more suitable for a fast serving bar. The website would be reachable through the scan of a QR code, easing even more the ordering process.

A parallel low-budget idea was to publish a browsable PDF version of the menu and expose it on a dedicated url. I implemented a light version of it but together with the owners of the bar we saw that the final experience for the clients was not appealing and not a user centered solution due to the flat browser interaction on a small screen.

Finally, we all agreed that a mobile-first website would be a perfect solution, delivering a digital user friendly menu which would look like an app but with a fast access. Additionally, this idea could kill two birds with one stone as the bar did not have a business website and the website could serve both the purposes.

Requirements Analysis

The customer most important requirement was to not delay the time of the ordering process therefore we all agreed that the website had to be very functional and with as less distractions as possible.

Therefore we decided to go for a very simple solution: a single page website where the menu’s categories would be immediately accessible with secondary sections dedicated to all the other activity details.

Additionally, the bar needed to have the possibility to change the products on the menu depending on the availability, so a back-office section dedicated to the staff was also strictly required.

design solution

I then proceeded with the implementation of some paper sketches to show to the clients a first prototype idea. We had a dedicated meeting to align on the expectations and we finally agree on a design proposal having the following features:

  • Landing screen with value proposition message to introduce the clients to the brand identity.
  • Scrolling down the menu’s categories, according to the rationale identified previously. Those categories are CTA buttons for the relative category page containing the product’s list.
  • Continuing scrolling down a second preposition message with an explanation of what the bar is doing.
  • Still going down an interacting slide show proposing home-made pastry and artisanal cakes which is the most important business content that the bar offers.
  • Then the address of the bar and a map which would be linked to Google Maps when tapped.
  • Finally a footer with some icons linking to the social pages and the system phone call dialer.

DESIGN CONSIDERATIONS

The website should have a mobile first approach for its primary purpose, so the first design proposal was optimized for small and mid sizes devices. On the other hand, being accessible also from desktop, the website should scale correctly for bigger breakpoints. We decided therefore in agreement with the client to go for a fluid design, where the content would display on half of the screen width for big devices.

low fidelity

Mobile Screens

Desktop Screen

high fidelity

We agreed with the customer on the low fidelity proposal so I just moved into the design of high fidelity screens

Prototype

Go to figma prototype

IMPLEMENTATION AND follows up

The design was really liked by the owners of the bar and the proposal moved forward to the implementation stage. The process was followed by a freelance web developer: we had an initial meeting where we went trough the design choices, the rationale of the decisions taken with the business owners and the prototype.

During the implementation we had a couple of points of touch to discuss and review the state of the work and once the website was fully implemented we had a final comprehensive review to evaluate the results on a UI/UX POV.

Finally I also took care of the design of the QR code holder which is on top of the table and introduces the customers to the online menu.

Barvoce.it was successfully launched the 3rd of June. Some days later I had a trip to Italy to visit the bar and see the product actually in use. The users declared that the product works efficiently and it easy to use. The only exception applies to the older people which are not really confident with technology. For those we still mitigated for a solution with the owner of the bar: they bought two tablets which the waiters bring to the table when they identify or are asked for help in the ordering process.