Agency | Fuzz Role | Visual Design Lead, UX & Research Client | Pret A Manger Link | Allergen Guide
Pret A Manager came to Fuzz looking for a way to address their allergens kiosk in a new way.
Pret has found itself in the news for misrepresenting their products which resulted in the deaths of a couple of their customers. Upon this happening, they found that their current in-store kiosk experience wasn’t enough to take care of the needs of those with allergies looking to confidently eat within a Pret. We took an approach lead by research and visual design and created a more holistic approach to the allergens kiosk that was made readily available in both at-home and in-store scenarios.
Allergens Kiosk research
Pret A Manger was in a mission to reveal full transparency of their menu items and ingredients after a few customers ended up passing away from consuming their food. As part of their efforts to do everything they could
to educate their customers on their full menu selection and ingredients, they wanted to elevate their Allergens kiosk experience.
The first step was to take a look at their current experience and conduct an audit to gain an understanding of what was working and what was missing. Along side this, we also conducted a comparative and competitive
analysis to get a feel for how the current UK market is handling the same situation.
Another bit of research that we did was that of consumer research. We compiled a list of ideal criteria consisting of finding individuals with food allergies who frequent to-go places. After vetting individuals
for questioning, we asked had them on site and asked them a handful of question on how they handled having a food allergy and maintaining a relationship with to-go restaurants. We also asked
them questions on how the current process is flawed and what their ideal consumer situation would be.
From conducting the audit of the original system, we found that there was a lot of opportunity to assist with getting the user more information and more quickly. One of the first things we noticed was the lack of imagery within the current experience. This meant that there was a lack of visual transparency. We also found that there was a two step process for getting the user into the main experience. We felt that this was a bit jarring and overall unnecessary given the simplicity of the purpose of this product. From a content hierarchy perspective, we found that there was a lot of real estate dedicated to filters rather than the actual menu items themselves.
Competitive and comparative analysis
We looked at a handful of UK based competitors like LEON, EAT, and Wagamama to see how they were handling their menu information on their digital platforms including apps and websites. We also took a look at their information hierarchy and paid attention to things like how they were categorizing their menu items and how they were calling out their allergens. We found a lot of commonalities like labeling and badging but we also found ways in which each brand was differentiating themselves including using lifestyle based categories an unique animations.
Over the course of two days, interviews were conducted in the NYC area to lean more about those afflicted with allergies and their experiences with go-to based establishments.
A range of allergies were questioned including shellfish, peanut butter, as well as someone suffering from Celiac’s disease. Through the interviews, there were a lot of commonalities found. Some of these commonalities included:
1. Consumers always wanted to be able to see the food. This included in person the most if possible, however, depending on the allergy, imagery could suffice.
2. Most found that they would look at a menu before going to a place to make sure that there were options fine for them.
3. Most always looked for labels, badges, or tags which helped them skim through content easily.
UX & Visual Design Exploration
There were a few things about the experience that we knew needed to change based on what was learned from the audit, the analysis, and the user interviews.
1. The experience needed to be catered towards those with allergens as well as those simply looking to browse the menu.
2. The filters while important, needed to have a less intrusive prominence within the menu experience.
3. Images were an absolutely must! and the branding need to be a bit more modern.
4. The entry into the website needed to be sooner meaning, 1 click maximum
5. Users needed to have the ability to add their own filter options.
6. This product needed to exist on web and product.
High Fidelity Ideas
Given the short timeline of the project, the next step was to present ideas in high fidelity wires. Some of the explorations included an exploration like the first one below that includes the idea of a traditional homepage. Here, a user is greeted with an introduction as well as a list of specials. From there, they can enter a traditional menu browsing experience (see third concept). The second introduction idea was that of a way of having the user choose what it is that they’re wishing to browse before they get into the main browsing experience. The second was toying with the idea of no introduction at all and simply “getting to the point” of the menu. Here a user can go straight to browsing, searching, or filtering without any sort of introduction. It was later found out that the latter wasn’t possible due to the need to track entries.
Quick Look & Feel Mood Board
With half a day (again, project with very aggressive timeline) it was important to explain to the client the type of look and feel that the app was aiming for. Leveraging their brand system as well as their photography, we set out to stay true to their aesthetic while bringing in their photography in a clean and minimal way without too much distraction from main action items.
The Final product
Given how widely used this product will be, it was concluded that this would be built for an in-store kiosk experience as well as responsive web.
That said, while designing, there was much thought put into the differences between an in-store experience versus that of an at-home experience. This lead to creating different grid systems that worked for all situations.
The visual direction was also settled at one that would match the aesthetic of the the in-store experience making it truly feel like Pret. We used imagery of their product and applied their brand and created a classic and clean UI experience that melded well with a product feel as well as one intended for the web.
As a way to initiate the experience, we created a homepage experience that tells the user what type of experience they’re about to enter and allows them to enter through a “This Way” CTA. From a visual design perspective, editorial design was a main influencer.
We’re leveraging a search style that allows the user to stay within the same area of the experience. A bar simply appears and a user can input their search information. After input, the user will be taken to a Search Results page where menu items matching the criteria appear.
After applying filters, the user enters the Results page. Here the user is able to view a menu that excludes their ingredient selections from the filter. The goal of the filter is to filter OUT what the user doesn’t want. If the user exceeds more than 3 or 4 filters, their selection is truncated until they tap on it.
Main Menu Experience
We allow the user to Search and Filter at the top as well as way-find through a primary and secondary navigation. Using imagery and light accents, we stepped away from traditional UI cards and went with a flatter and cleaner approach. We also use dietary tags and surface prominent allergens up front in this view.
After filters are initiated from the top right corner, the user will see the main allergens at the top. Below that they can add more granular allergens of their choosing based on ingredients within the Pret API. Below that they can also select Vegetarian or Vegan and then apply their selections.
Item Detail Page
When a user taps on an item, they’re taken to the item detail page. Here, the user is able to gain more insight into the product including a more granular view into the ingredients as well as nutritional information on the product. In order to leave this page, the user simply taps on the arrow to the left.
Responsive Web Desktop
Responsive Web Mobile
Documentation & The System
Towards the end of the project, we created a form of documentation that Pret hadn’t been given before. The documentation consisted of a cohesive style guide full of traditional elements like color and typography as well as UI elements for scalable design explanation down the road. We also made sure to include a change log of some of the final efforts to allow for context as to where the project ended up.
News & pr event
Given the serious nature that served as the catalyst for this product improvement, there was a lot of PR around it.
News outlets all over the UK reported on the new product as well as the labeling improvements on the actual products themselves.
With this new product, more transparency into ingredients will be made possible between Pret and customer.
Creative Director | Paul Sieka Production | Sergio Reynoso Developers | Samantha Gowda, John Vaghi, Ramtin Vaziri Project Manager | David Dominique