what & 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 demanded cafeteria to disinfect menus on every person browse. In this context, the owners of Bar Voce were looking for a digital solution to prevent its employees to loose time in manually disinfecting the menus, and also allowing their customers to safely browse.
- Identification of the problem.
- User research.
- Feature ideation.
- Low Fidelity wireframes and prototype, iterate.
- Style guide, Pattern library and accessibility standards.
- High Fidelity wireframes, Prototype.
- Support during implementation phase.
- On person observations and iterate.
1 • empathy
stakeholders interview – REQUIREMENTS ANALYSIS
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. Most important, due to the flat browser interaction on a small screen, was a not a user centered solution.
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 yet.
Another client’s 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.
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.
2 • define
the 4 “w” for problem statement
|Who is experiencing the problem?||During the Covid-19 pandemic, customers don’t feel safe using a menu touched previously from many others.|
|What is the problem?||The Covid-19 virus transmits itself also through contact of an individual and an object contaminated form the virus.|
|Where does the problem present itself?||The problem occurs during the moment when the waiters bring to the tables a non-disposable menu.|
|Why does it matter?||The customers will feel safer knowing that using their own device will decrease the chances of infection.|
The solution is a single page website where the menu’s categories would be immediately accessible with secondary sections dedicated to all the other activity details.
3 • Ideate
I then proceeded with the design with paper sketches, also 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 offers.
- Scrolling more down there is an interacting slideshow proposing home-made pastry and artisanal cakes, which is the one of the most important business product 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 social media icons linking to the social pages, and the system phone call dialer.
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. I designed a fluid design, where the content would display on half of the screen width for bigger devices.
4 • Prototype
We agreed with the customer on the low fidelity proposal so I just moved into the design of high fidelity screens
5 • test and implementation
The design was much appreciated by the client 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. 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 provided two tablets for the waiters to bring to the table whenever they identify or are asked for help in the ordering process.