The Process
Problem statement
The challenge
Slice ‘n’ Brew had already started to establish itself as the go-to pizza spot in Nottingham. However, their initial website, built on Squarespace, failed to reflect the unique energy and appeal of the brand. The website lacked visual impact, didn’t engage users effectively, and didn’t provide a seamless user experience. The challenge was to create a digital presence that not only matched the restaurant’s physical ambiance but also enhanced it, making it more accessible and engaging for online visitors.
Goals
- Brand alignment: Create a website that truly reflects Slice ‘n’ Brew’s reputation and ‘vibe’.
- User engagement: Develop an interactive and visually appealing experience that keeps visitors engaged with their goal.
- Improved usability: Design an excellent user experience that provides users with key information, and intuitive, easy-to-navigate structure.
Moodboard photos of Slice 'n' Brew's in-restaurant atmosphere
A mockup of Slice 'n' Brew's original website
Research & discovery
Stakeholder discovery interviews + workshop
To kick the project off, I conducted interviews with the restaurant owner and key staff members to gain an understanding of their vision, needs, and target audience. This was crucial to define the direction of the website and meet the overall goals set.
A screenshot of some notes from the stakeholder interview
Competitive analysis & research
Before launching Slice ‘n’ Brew, Ryon, the owner, had drawn inspiration from several successful pizza restaurants around the world. This insight, learned from the stakeholder interviews, became the foundation for my research. I started by analysing these inspirational sources, alongside more local competitors, to gain a clear understanding of the direction Slice ‘n’ Brew was aiming to go. This analysis also helped identify what successful local brands were doing right and where Slice ‘n’ Brew could stand out.
A screenshot of a visual exploration exercise focusing on competitive analysis
User personas
Based on information gathered from the stakeholder interviews, the general manager and I collaborated to create several personas representing key customer groups. These personas guided the design process, allowing me to efficiently prioritise elements and information according to the diverse needs presented.
A screenshot of some early user journey maps
Design & production
Wireframing
The design process began with low-fidelity wireframes to outline the website’s structure and flow. This approach allowed me to focus on refining the user journey, paying particular attention to layout, navigation, and content hierarchy. I shared several iterations of the wireframes with the owner for feedback, ensuring we were aligned on the overall structure before moving forward.
Early medium fidelity wireframes from the design process
Visual UI Design
Once the wireframes were finalised, I began working on the visual design, aiming to bring the brand to life. To begin, I created medium-fidelity designs, which provided the owner with a clearer sense of the final product, while still allowing flexibility for feedback and adjustments. This stage was crucial for solidifying the design hierarchy before diving into the finer visual details. Next, I focused on colour, typography, and imagery—ensuring every design choice was aligned with the brand’s bold and playful personality. The result was a visually engaging digital presence that stayed true to the restaurant’s identity.
A couple of different iterations that were presented to the client early in the process
Interactive Elements
From the outset, we agreed that the website needed to stand out in the competitive local food scene. Interactivity became a key focus to engage users and create a memorable experience. One example is the callout section on the homepage, which directs users to the menu pages. When hovered or pressed, a playful animation is triggered, giving users a visual preview of the page. This feature has been particularly well-received, with many users commenting on how it adds an enjoyable layer of interaction.
Challenges & Iterations
As with any project, balancing visual impact with usability and performance presented some challenges. For instance, while the autoplay hero video effectively captured the restaurant’s atmosphere, it had the potential to slow down the site or distract users. Additionally, I needed to consider how the site would perform on devices in low battery mode. To address these concerns, I introduced overlays and a subtle blur effect, ensuring the video enhanced the experience without overpowering it. These adjustments allowed the video to remain a focal point while improving site performance and usability.
