Project: Website Redesign
Client: Pizzeria Grata
Capacity: Personal Project
Role: UI/UX Design & Visual Identity
Hidden inside a gas station's convenience store, Pizzeria Grata is a local small business in its first year of serving up delicious pizzas to the South Austin neighborhood. It’s an unusual spot for pizza, but that’s part of Pizzeria Grata’s charm: incredible, traditional Neapolitan pizza from a small place only locals know about. A hidden gem. Pizzeria Grata had their recipes and menu down pat, but their website, although strong in usability, needed a redesign. Its current design was cluttered, hard to read, and visually disjointed.
How might we create a design that improves the user experience and doesn't overwhelm/confuse them?
- Redesign Pizzeria Grata’s website to be more accessible, clean, and concise
- Declutter unnecessary information
- Streamline Grata’s imagery and colors to create a solid visual identity.
Increased accessibility by 66.7%
Decreased search time it took to find the basic information by 89.5%
Curated consistent visual identity that resulted in 100% positive user feedback as compared to the original
First I researched the user, in this case the target customer, by interviewing the owner and learning about their main customer demographics and who their ideal customer would be. I defined the most important user goals when visiting the website.
I then was able to point out the main user goals for this project.
- A user must be able to order a pizza, for either pick up or delivery.
- A user must be able to learn about the business and why Pizzeria Grata is worth their patronage.
Then, I wanted to fully understand the first thoughts of the customer. I conducted some user testing and took notes. I was testing for their first impressions of the website and how they navigated the website to try to order a pizza. Their key frustrations and pain points became my main goals for redesigning the website and were as follows:
- The text is hard to read
- The page is messy and cluttered
- There is too much information on the page
- The colors and pictures are confusing on what the “vibe” of the restaurant is
- Doesn’t seem to flow
The usability of the website was clear and easy, but the visual appearance made the user experience uncomfortable and confused. My goals were as follows:
- Make the visual identity more clear
- Declutter the website for maximum effect upfront
- Condense the information to be more concise and understandable for the user
Below was my starting point- the original website design:
I started with creating a mood board for inspiration. I chose similar colors to those already used: red, black, white, and gray.
I sampled the red from the logo and turned it into a deeper, richer red to reduce the harshness on the user’s eyes and make the appearance more welcoming and comforting. I chose a light off white as well as a black tinted with the same deep red undertone.
I chose a different gray after I conducted a contrast color accessibility test on the gray text and background and noticed it failed on almost all accounts according to the WCAG 2.0 guidelines.
In order to balance the palette, I decided to add a deep green to bring some freshness to the color palette as it was starting to come across as bland and one note.
As I learned through user testing, the amount of information was overwhelming and excessive. I wanted to pick out the key important points that would make Pizzeria Grata stand out from the crowd. Therefore, I made the edited the information to be concise by taking out unnecessary details that would be lost on a basic customer (like specific flour gluten structures) and broke down the most important information to the user into smaller paragraphs to be easily understood and digested.
I also defined Pizzeria Grata’s three key points that made them unique and different.
2. Neapolitan style
3. Community Driven
Hoping to highlight these important points, I had an idea to display them on the main page in the future design, so the information was up front and center for the user to easily see.
I then designed the custom iconography to be used in Pizzeria Grata’s website. I wanted the icons to be emulate the modern yet welcoming tone that Grata strived to embody. I started by sketching out over 100 ideas that came to mind and then narrowed them down to my favorites. I kept the icons mainly a black and white outline to keep it modern, but added a touch of muted red to add some unique interest. I also made sure the icons still had an element of being hand-drawn in order to keep the vibe friendly, relaxed, and inviting.
I created a style guide. This was important to really clarify the design and make sure going forward the visual identity was consistent. I also created an alternate logo to be used in smaller spaces such as the headers for the website.
I then focused on the website. I made a list of the main sections and pages I would need and sketched about 15 ideas for the website design. I then expanded on my favorites with more detail. My main decisions were to:
- Keep the main page as a scrolling layout, with a fixed scrilling header
- Instead of crowding the main page with info I added a select few couple alternate pages. The customer could choose to learn more on their own accord rather than being forced to read through unnecessary information to find basic information.
- Have "order now" & "join loyalty program" buttons always available on all screens
I then designed a simple wireframe of each page in Adobe XD to get the final layout completed and work out any kinks in my design.
I created a high-fidelity mock-up & working prototype.
Web Prototype Video:
click a screen below to learn more
Success for this project was defined as all the goals were met, and being able to address all of the user frustrations/pain points.
I retested the original users to see how their experience differed and I was pleased to get positive results.
I was able to increase the accessibility by 66.7% and according to the user feedback I was able to make the website easier to read and less cluttered. I also was able to condense the information to highlight the important points and decrease the time it took to find the basic information about the restaurant (like what type of pizza they served) by 89.5%.
How will this design benefit the business?
This design will increase the ease of ordering a pizza, through the simplified layout and accessibility of ordering buttons, therefore increasing profits. This design also is less cluttered and focuses on the important key aspects on what makes Pizzeria Grata stand out from the other restaurants. This will improve the customer experience while on the restaurant and help gain loyal, repeat customers.
How will this design benefit the customer?
This design reduces the confusion in the customer from an overload on unnceccesary information, creating a positive user experience. The important information a customer would want to know is presented up front and clear so the customer does not have to search long for answers. This design makes it easier for the user to read, navigate, and learn about the business.
This project was a very fun one for me. I was excited and proud of the designs I was able to create since I was able to not only increase the functionality and create a solid style, but incorporate elements of their own kitchen and vibe into the design.