I helped redesign a local business’ website that was outdated and confusing to use, to a more fresh and organized website in the hopes to help their business
WEBSITE REDESIGN
Project Overview
This project was focused on completing a redesign of a local business’ website. I chose a local pizza shop in San Francisco, Golden Boy, as the subject of my redesign with the aim of making their website more modern and aligned with their vibe with the goal of helping the business continue to grow and thrive.
My Role
Solo UX/UI Designer
My Responsibilities
User Research & Competitive Analysis
Design Strategy
User Flows & Task Flows
Visual Design
Wireframing
Prototyping & Usability Testing
Tools
My Process
Test
Ideate
Test
Define
Design
Deliver
Discover
Competitive Analysis
Click to enlarge
User Surveys
Surveys were conducted with 9 individuals where they were asked to interact with Golden Boy’s current website (goldenboypizza.com) through a series of tasks and provide their feedback by scoring how easy or difficult each task was. Additionally, those surveyed provided qualitative feedback on their experience with the navigation, organization, design etc. of the website.
Some tasks and questions included:
Navigate to the menu for the restaurant
Navigate to the hours and address of the North Beach location
Imagine you want to order from Golden Boy, how useful is the website in providing this information?
How do you feel about the design (look and feel) of the website?
How easy or difficult was it to navigate the website?
Key Takeaways
Full research synthesis can be viewed in FigJam: Affinity Map
Conclusion
Users overall had difficulty using the website in it’s current state with the main issues being lack of navigation, organization, and outdated design.
The Problem
The Golden Boy website is outdated and confusing to use. Users have difficulty finding information like the menu, hours, address, etc.
There are many options for pizza in San Francisco, so a bad website can easily deter customers to spend their money elsewhere.
The Goal
Understand what users look for on a restaurant website, their experience and pain points using the Golden Boy website.
Define the problem and user story through synthesis of user research findings and hone in on a proposed redesign.
Build and test a new website for Golden Boy to improve the user experience.
Define
User Persona
Ideate
In order to improve the user experience of the Golden Boy website I plan to update the overall look and feel to be more modern and bright, as well as adding more organization of information with pages that can easily be accessed via navigation. This will make the website more useful to users who want to learn more about Golden Boy and make it easier to support their business with the added feature of ordering.
Sitemap
I created a sitemap to organize the basic structure of the website starting with Home Page with clear navigation to the main pages: Menu, Locations, About and Order. This was lacking in the original website and navigation was the main pain point in our surveys on the usability of the old website.
View Sitemap here: Sitemap
Design
Wireframing
The sitemap helped inform the structure so I went right into Lo-Fi wireframing. Similar to what was seen in the sitemap, I just applied simple organization to what was a pretty messy website with an always present header linking to the 4 pages ensuring users never get lost. For this project I am providing both desktop and mobile designs.
I chose to brighten things up with the design and make it more modern and fun. I focused on keeping the general “theme” of Golden Boy by using reds and yellows. I vectorized the sign that is above the real Golden Boy restaurant to utilize as the main logo. I made the elements more rounded and soft compared to the original site and used thick bold fonts
Deliver
Usability Testing
Test Parameters
I built an interactive prototype in Figma and performed a mix of moderated/unmoderated tests with 8 participants. I asked participants to freely use the prototype and then fill out a catering request and find contact info for one of the restaurants.
Feedback
Most of the feedback was positive as users liked the improvement of the design and the organization of the website. Some areas they had feedback on were around the location of the catering form (at the bottom of the Ordering page) and the outlines of the photos being too dark.
Click to enlarge
Priority Revisions
Based on the feedback above, I attempted to revise the prototype. I added the catering form to the homepage while also keeping the original location on the Ordering page.
I tried out different colors for outlines and I feel it threw off the design as the black was helping give a more retro feel. Given that feedback only came from one person, I decided to keep the black as is but lightened the stroke a little bit.
Learnings
This was my first project working with a real client, although offering my services for free. This came with challenges of trying to coordinate with a busy client as well as trying to explain the design process and principles to a client who is unfamiliar to them. I found value in breaking down the process into small pieces and providing the client a detailed timeline of what to expect helped them feel more comfortable going into the project.
It was also difficult at times getting ahold of my client so there were times where I couldn’t get their feedback on the designs. I learned that with this particular client providing them 1-3 options to pick from was the easiest way to get their input. I also had to learn to make decisions on my own with my client’s interest in mind, which I feel I was able to do more easily near the end of the project.
I was familiar with Golden Boy from living in San Francisco so I felt a familiarity with the restaurant, the brand, and its reputation and history in the community. It was exciting to try and help them with their website redesign and I hope to see them implement the designs in the near future when they have the bandwidth.
Next Project:
