For those of you wondering, pernice is 'partridge' in Italian!
My brother-in-law, Andrew Jillions, recently opened Pernice, a family-owned, pop-up Italian restaurant in South East London. Sourcing seasonal, sustainable ingredients, they focus on perfecting each meal, reducing food waste, and supporting local farmers.
So what's the problem?: Pernice is a new restaurant in London amidst all the other dining options that are currently present. Enhancing their website is crucial to attracting locals and potential customers, influencing their dining decisions.
Research goal: I aim to understand how users navigate and utilize Pernice's website to attract more customers and build a loyal customer base.
What do I want to know?:
Methodologies:
Major insights: I analyzed similar restaurants throughout London and noted some features that spanned across any restaurant's website.
The most critical being:
Restaurants lacking this feature, or overwhelmed with too many elements like excessive images, appeared disorganized and unprofessional, negatively impacting users' first impressions.
Who did I talk to?:
Interview method: Zoom and GoogleMeet
Interview duration: 30-40 minutes
Link to affinity map FigJam fileMajor insights: Aligning with what I found through my competitive analysis, I discovered 3 major insights:
Insight 1
The Pernice is a unique restaurant where delivery will be the main source of income.
POV
Users need to easily navigate to the delivery page of the website where it's intuitive how to order through the website itself.
HMW
How might we set up the delivery page of the website so that users easily find and understand how to order select items?
Insight 2
People rely on websites as a source for general information as well as a first impression.
POV
A design system should be imposed on Pernice's website as it gives first-time customers an idea of Pernice as a brand.
HMW
How might we implement different design elements so that Pernice as a brand is memborable and understood by its customers?
Insight 3
Customers questioned if their dining experience at Pernice was "exclusive" because of the infrequency in their openings.
POV
People need to know all of Pernice's dining options to avoid assuming their food isn't always available.
HMW
How might we promote all of Pernice's dining options so customers know their food is frequently available?
3 maps:
These maps offer insights (above) into users' mindsets as they search for restaurants and form initial impressions of the websites they visit.
It was critical for me to design with users in mind while adhering to the constraints set by my stakeholder.
A happy medium: I realized that by designing the site based on insights from user interviews, I would effectively meet Andrew's goals of growing his restaurant.
Thinking about priority: From what I gathered, I compiled a list of features for the website. Due to time constraints, I prioritized features to ensure a viable product was delivered to Andrew on time.
Ordering delivery through the site: Delivery is currently Pernice's primary source of revenue, as dine-in is only available through a reservation basis.
I needed to ensure users could get through this flow as it's integral for Pernice's growth.
Booking a reservation through the site: In addition to ordering through the site, users have the option to reserve a table at Pernice's pop-up location.
These 2 flows were prioritized as they're the only multi-step process on the site and are essential for generating revenue.
Exploring designs, I found inspiration in how current restaurants showcased their menus and websites with modern, unique approaches.
I experimented with various designs... But realized that simplicity might work better in this case.
Colors: My approach to colors began with keeping the blush pink from Pernice's current website. It's the only color on the site, and its warm undertones prove an appropriate neutral base.
Looking through the different color palettes I selected, I found it appropriate that the green reflected Pernice's sustainability efforts and the coral could be used sparingly to brighten the site.
Fonts: The header font from Pernice's current website was eye-catching and I decided to keep it as it matched the logo as well. The classy, serif font Andrew selected attracted attention in the best way.
For the pairing, I chose a clean sans serif to complement the serif without creating a tacky, overly-decorated look.
Keeping it!: Much to Andrew's satisfaction, everyone expressed how much they enjoy the current logo. Although I attempted different variations of it, again, simple was best and stuck with a single color.
Ensuring each component aligned with Pernice's aesthetic was crucial. Although this was a preliminary set of components that would eventually expand, I wanted to include all the essential elements needed for a functional restaurant website.
Homepage: The homepage needed to attract users and encourage exploration. After experimenting with layouts, I found that a simple hero section with a large, impactful image and the mission statement was most effective.
Delivery page: The delivery page is the main screen most users will encounter. It needed to be attractive while easy to navigate to ensure a seamless user experience, and therefore, returning customers.
Reservations: Reservations are crucial for securing diners at Pernice. I designed the process to be highly visual, allowing users to complete it without needing to exit the site and access other parts of their device.
Although I eventually achieved a functional prototype, the time and effort invested in this aspect of the project was more than I initially anticipated.
Falling into a rabbit hole: While developing my prototype, I extensively used local variables and if/then statements to enhance its realism and function. However, this consumed more time than I anticipated as I faced challenges syncing some components with their assigned variables.
Who?: 5 participants in London (referred to by Andrew)
Interview method: Zoom
Interview duration: 30-40 minutes
I felt confident moving forward with user testing as the flows I designed reflect common tasks users frequently perform when making reservations or placing orders at a restaurant.
Delivery... Check!: None of the users encountered any difficulties navigating the flow; they found it to be a quick and simple task, as anticipated.
There were mentions of minor interface issues that could be easily resolved with minimal effort.
Reservations... Check!: Similar to the first flow, no difficulties were encountered navigating through the second flow.
Users appreciated the visual layout of the calendar and time slots, which made navigation easier and more intuitive.
Extra bits and pieces: Regarding the rest of the website, users expressed their delight for the overall appearance.
The balance of images was just right to capture attention without overwhelming. All text was also well-written and effectively laid out, encouraging users to explore further.
The positive feedback was encouraging and reinforced my confidence in proceeding with minor iterations. The end was near!
Several suggestions from my usability tests pointed to issues where elements accidentally overlapped, making readability challenging in some instances. Additionally, some elements flowed over the footer, giving the prototype the appearance of having bugs.
With an opaque nav bar, visibility is clear even when scrolling over text and images. The overflow into the footer was also resolved.
While the iterations in this project were relatively minor, incorporating user input into my wireframes remains a crucial aspect of my design process. I'm quite satisfied with the outcome of this project, despite the challenging time constraints.
Andrew was equally pleased with the final design and requested to pass it on to his developer to bring the site to life!
I'm thrilled that Pernice's new design not only received approval from my stakeholder but also resonated quite positively with all the users I tested with.
Future iterations: Although I couldn't get it done within the time I had, I would've enjoyed refining my prototype further. As mentioned earlier, I encountered significant challenges with local variables and if/then statements and their integration into my delivery flow.
Collaborating with a stakeholder has been challenging due to difficulties in finding mutually convenient meeting times. Although it has been time-consuming, I've realized the immense value in engaging with a stakeholder and exchanging diverse ideas.
Fini:
