This website is under heavy construction. Some parts are missing, incomplete and not working probably.
Happy Italy is an Italian food restaurant chain with 20 locations across the Netherlands. Their goal is to grow to over 40 locations in the Netherlands and open several locations across Europe within 5 years. To go along with this goal they want to give the customers a platform to collect rewards, give them personalized promotions and collect valuable feedback from their experience. I was responsible for the research, visual-, UX design, prototyping and validating. We kicked off the project with an analysis phase, where we came together with the stakeholders to define Happy Italy and ideate on possible solutions and features for the app. Doing so, we gained insights into Happy Italy’s needs and wishes. The next step is to know the user what their needs are and where the paint-points are currently at. This is done through user interviews, online surveys and metrics like Google Analytics and Hotjar. The example below is from a survey where 90+ people were asked about the use of apps in restaurants. They were selected from various Facebook groups, newsletter(Mailchimp), Reddit and other mediums.
By collecting all this information and data, the next step was to bring this all together and create a persona. As one persona is not enough for a restaurant chain to comprehend the needs, 2 personas are made to bring in a better perspective on what can and does not fit within this project scope.
With all the insights we gained from the analysis phase, I mapped out the app's entire navigation structure — for which I also needed to consider all the different user situations. In this phase, any idea was good, but we had to scrap many ideas from the flow, as it did not fit within the first scope of the app. This means these features will be added in version 2 and so on. The focus is to have an MVP and then build on some more useful features.
The client had a desire for a clean, easy to use, and modern feel to the app that would accommodate the branding provided by Superrebel agency back in 2018 with some tweaks to upgrade it to 2021 and distinguish it from the familiar apps like Burger King and McDonalds. As there was no design system made for web and app purposes, I took responsibility to make sure this was made to make it easier for new members in the team who will surely join along the way and to assure consistency across all platforms Happy Italy uses.
Before making high-fidelity visualizations, low fidelity wireframes were created to test out the ideas to validate them and then turn them into high-fidelity frames. Some examples are shown below. These are menu wireframes. The first one shown is the one which the users were the most positive about and it feels natural for them.
After validating them with some testers we choose a path to work from and visualised everything to high fidelity. Some variations were made to again validate that with some testers. One of the important parts of the app are coupons. These are shown directly on the main screen, to make sure the user sees them.
When the first high fidelity was made, another iteration was made to refine the design with the feedback we collected from testing. The first complete version of the app was completed!
While having a mock-up, the interaction and transition between screens are a vital part of the user experience. So, we made sure that the mock-ups were turned into a functional prototype. This is again tested on a small group of testers to check on the experience and find further improvements.
From this, we found out some valuable insights to further improve on the app. One of the key changes we made is the ordering flow and payment flow. The buttons were enlarged, and the fonts were sized up, to make sure the users could read it. When the user added something in their chart, a red button appeared, which clarifies it for the user something happened. Other improvements were applied all over the app, see some select examples below and compare the before and after yourself.
When validating again, all seems alright to make everything ready for the MVP app, where we can further improve on the app as time progresses and more users use the app in real life scenarios with uncontrollable circumstances. One final prototype is made to finalize everything.
Before handing everything off to the developer team, the component library was further refined.
While the app was developed, we conducted further testing and reviewing of the design to find improvements which we could implement in version 2 and onward. In the progress of the development, we found out that some features needed an upgrade from the API(cash register and online ordering platform) we depend on. That led to a downgrade, workaround or needed to be scrapped completely till the update on the API is applied. Sadly, we needed to drop claiming perks from the collected points, and we substituted it with a menu till this is possible within the API. One of the things we have applied is loading states Since the app talks to multiple external sources, we needed to think about what the app would show users when data loading takes too long. We decided that the best way to do this is to add various loading states, as that would give the user a clear indication of something happening.
One of the project's main goals was full accessibility; in other words, all residents — including those with disabilities — should be able to use every feature of the app. Therefore, I ensured that every design choice was thoroughly tested against the Web Content Accessibility Guidelines (WCAG) 2.0. I did this with a tool called Stark, a plugin for Figma, Sketch & Adobe XD. It lets you quickly check contrast by selecting two layers with different colors and see whether there is sufficient contrast between them. If not, changes will be applied to meet the requirements and make the app accessible for everyone. The first screen the users see has to be welcoming and should accommodate the core features relevant to them. That's why we start with a welcoming message adapting to the time of the day. Later on this is further improved to change the design from dark to light and visa versa depending on the time. Nighttime = dark, more relaxing for your eyes to take in, especially in low light, and don't draw as much power as brighter colors. Day time = light as it brightens everything up and makes it more readable in the bright daylight settings.
While the app was further developed by the development team, my time at Happy Italy came to and end and the next assignment started. Changes to the design in the launched version may be different from what you see here, as times passed on and new insights helped shape the app to another level.