Mockups after redesign

Bar Voce-Digital strategy for a safe restart during Covid-19

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 and counted 228K cases, 135K recovered and more than 32’ooo victims, and unfortunately still counting. The month of May brought some hope everywhere, and in Italy also the lockdown became less strict: safety measures are still needed but activities are allowed to reopen, with precautions.

In this context, the owners of Bar Voce, a family activity in the heart of Rocca di Mezzo, in Italy, was looking for a digital solution to allow his customers to view the menu, and protecting both the customers and employees at the same time.

Duration: May 2020

my role

For Bar Voce I have designed a website-menu, mobile first optimized, to let the customers choose the wished product without the need to interact with paper menus, that are actually touched from many people and needed therefore to be disinfected at any use. 

The digital menu in a website is meant to facilitate the process, avoiding useless exchange of items and providing to the customers a solution in their hands. 

The idea of a website was very welcomed from my clients, also because until now the activity had none yet. 

The development part has been cared from Valerio Lucantonio, software engineer and web developer, and all the decisions were discussed with him and with our stakeholders. 

decisions

  • During the first discussion with our clients, their initial idea was to develop an app. I suggested them that this solution could have been very fancy but not user-friendly. Indeed, the use of the app implies that the users download it, furthermore using their own data, since a Wi-Fi connection is not provided. Additionally, the time needed for the operation was also not on the stakeholder interest, since would have slowed down the ordering process.
  • A parallel low-budget and fast idea was to publish a browsable PDF version of the menu. I made it very quickly but the final experience for the clients was not appealing as they expected. Moreover, it was not a user centered solution, due to the flat browser interaction on a small screen.

Finally, we all agreed that a mobile-first website could kill two birds with one stone: having a digital user friendly menu and a brand new website.

another important consideration

We also considered that asking to the customers to use their phone could delay the time of the ordering process, therefore we all agreed that the website has to be functional first of all and with as less distractions as possible.

Therefore:

  • Single page vertical scroll with the CTA for the menu’s categories and all the info of Bar Voce.
  • Additional pages are reachable only through the respective CTAs in the “Our menus” section of the Homepage.

research

The available time for the delivery of the website 3 weeks, therefore I focused on the users point of view. There was no need for a competitive analysis, but I have researched the web seeking for inspiration nevertheless.

user persona

Persona

circular plan

The structure of the website is very analogous to the architectures with circular plan, where central space or function is surrounded by subsidiary spaces.

Only the owners can view and access to the admin page to edit, delete or add content in the back end.

Screenshot of the Admin panel – mobile

USER flow

User flow

sketches

As usually I sketch a lot, mostly to ideate, and to brainstorm ideas, therefore most of my sketches are not adapt for the publication online.

Ideation sketches

design solution

The design solution has these features:

  • Landing with Value Proposition Message and scroll down;
  • Homepage with the Bar Voce Menu divided in food and drink categories, Those categories are CTA buttons for the relative page containing the product’s list and price for that category.
  • scrolling down in the vertical page there is a slide show with Bar Voce section and something about the Bar;
  • The section dedicated to the artisanal cakes;
  • Map linked with Google Maps when tapped;
  • Social icons and phone icon that bring directly to the phone system call.

about responsiveness

The website has a fluid responsive design until the desktop breakpoint, then the page shrink to the 50%.

Desktop

low fidelity

high fidelity

Wireframes

In the picture below it is shown only the connection with two of the 12 categories, but it works the same for all of them.

High Fidelity wireframes.

Prototype

Video of the prototype

If you’d like, the link below brings you to the interactive prototype, made using Figma.

Go to prototype

follows up

Barvoce.it was launched succesfully the 3rd of June. We were able to visit and follow the usability of the product on person thanks to a trip to Italy.

I took care also of the design of the QR code card holder to place above the tables.

The stakeholders declared that the product works efficiently and it easy to reach from the users. Only sometime they have to help older customers bringing their tablet to the table.

Qr code card holder placed on tables
Bar Voce’s menus