Project: Website Redesign for a Local Business
Timeline: 4 weeks
Role: UX/UI Designer
Tools: Figma, SquareSpace
The Mr. Philly Website Redesign project aimed to transform an outdated and ineffective website into a modern, user-friendly, and visually appealing platform that enhances the online presence and customer experience for a popular local restaurant, Mr. Philly. The project was initiated in response to the restaurant's need for an upgraded digital presence that would better represent its brand and engage customers.
When initially reviewing Mr. Philly's website, an average observer might overlook the design imperfections and inconsistencies on the homepage. Nonetheless, from a designer's perspective, I quickly identified the necessary improvements and areas for refinement in this design. After conversing with the Mr. Philly team, their primary concerns were the dissatisfaction with the outdated visual design and the inconvenience of the 'convenience fee' for customers.
The Problem
I redesigned Mr. Philly's website to provide users a modern browsing experience across every page. My aim was to ensure that every interaction users engage in feels natural and effortless, delivering a seamless and intuitive ordering process.
The Solution
Design Outcome
Refreshed Home Page
Restructured the visual hierarchy and design for a more natural flow.
Now showcasing the restaurant's top-selling dishes to assist customers in simplifying their decision-making process, while also enhancing the visibility of real-time Google reviews for added convenience.
Ordering Online
Streamlining the process of viewing the menu and ordering online.
The new design boasts a more intuitive visual hierarchy, guiding users effortlessly through the ordering process. With improved navigation and an aesthetically pleasing layout, customers can now browse and select their favorite Philly delicacies with ease.
Note: GIFs presented do not fully match quality of website.
That’s cool and all…but how’d I get here?
01 Research
Design Audit
Client Interview
Usability Testing
02 Design
Wireframing
Designing
03 Evaluate
Usability Testing
User Feedback
Conclusion
Research
Even when redesigning a website for a small local business, it’s important to conduct research to understand any challenges users are facing. This research will serve as a foundation for making informed decisions and implementing effective solutions to enhance the user experience.
Before I began conducting research, I applied my design expertise to conduct an initial design assessment with the client.
Design Audit
During my first initial meeting with the client, I discussed 7 different elements or sections on the home page, explaining reasons where I can potentially see improvement.
Call-to-Action Button:
The CTA button text contains variations in both wording and capitalization, despite serving the same purpose. Maintaining consistency in elements is crucial to prevent user confusion.
1
Background Image:
The background image is the first impression a visitor encounters on the website, potentially influencing their decision to stay or leave. It's important to select an engaging background that sets the tone without distracting from the content.
2
Social Media Placement:
In my view, incorporating social media links is vital for enhancing marketing and user engagement on a website. However, the current placement is not ideal. The lack of a "follow" CTA or link button, along with visual hierarchy concerns, could lead users to easily overlook them.
3
Untrustworthy Reviews:
Having reviews on the homepage isn't necessarily a problem, but from a user's perspective, how can they determine the credibility of the source? A more effective approach would involve displaying a greater number of real-time reviews, accompanied by their respective sources.
4
Extraneous Elements:
Not only does the paragraph contain grammatical errors, but also deems the categories below it as unnecessary clutter. These elements do not enhance the user experience and could potentially hinder it.
5
Photographs without context:
While using authentic food images is a standard practice, they currently lack context or descriptions. Enhancements could involve upgrading to higher-quality photos with by descriptions or titles, along with a CTA button for ordering.
6
Irrelevant Footer:
I believe the footer is just as significant as any other section on the page. It serves as a valuable space for displaying crucial business information and links. Unfortunately, there are issues with non-functional links, and it could benefit from a livelier presentation.
7
So, why is this important?
When working with a client, especially with a small family business like this one, I understand the importance in achieving faster results. While research remains a crucial phase in any UX design project, tight timelines sometimes necessitate a more immediate transition to the design phase, leveraging my initial design expertise.
Conducting design audits plays a pivotal role in this process, enabling me to identify the primary issues to address before engaging with users and provides a valuable foundation for shaping the questions I need to ask during the research interviews.
Client Interview
Q: What are some things that you like and dislike about the current website?
A: “I don’t like how there is a convenience fee added to each order for the customer, I can’t really think of anything that I do like either. I think the order button could be more apparent or bigger as well".”
Q: What do you imagine your new website looking like?
A: “I just want it to be simple and not too flashy. Our clientele is generally older people and I wouldn’t want them to be overwhelmed with so much in their face. Most people generally just visit the website to order online.”
Q: What are some pain points, to your knowledge, that customers may have when using or ordering off the website?
A: “Honestly, the main thing is that convenience fee. Other than that, I want to make sure the this new website can connect to our POS system.”
When interviewing the client, I made sure to keep it simple and timely, respecting that they do have a business to run. I asked the owners of Mr. Philly some questions to gain insight on what type of users I will be designing for, and what they like and dislike about the current interface of the website.
Questions & Answers from our discussion are as followed:
As we wrap up this interview, it was clear that I needed some more information before moving on to the ideation and design process. The primary concerns they expressed aren't strictly related to design or the website itself, so I want to ensure we've identified and addressed any other pain points users may encounter when using the website.
I decided to run some usability tests on the current website, monitor their interactions, and listen to what they had to say.
Usability Testing - Original Website
All 3 users expressed the feeling of the website needing a visual ‘makeover’.
Regarding the order page, users expressed dissatisfaction in its’ complicated usability.
Here’s what users had to say about the Mr.Philly website:
As part of my research, my goal was to understand and empathize with the users’ experience while interacting with the current website. To do that, I conducted usability testing on Mr. Philly’s website with 3 different users. The information I gathered are as followed:
“I feel like there is too much white space and it looks boring”
“I liked the order page, but it could be cleaned up and easier to navigate through”
“It’s too linear and I have to scroll all the way down if I don’t close the options”
“The UI could definitely use some enhancements and modernization”
While the order page didn't present any major usability issues, it's important to recognize and empathize with the user's experience when navigating it. Particularly in the service industry, maintaining a positive user experience throughout all stages is vital for ensuring customer satisfaction and sustaining the business.
With that being said, let’s take a quick look at the order page:
From first impression, the order page feels a bit outdated. With the inconsistency of pictures and lack of emotion or aesthetics, I knew I wanted to emphasize the order experience to another level.
In conclusion, the usability testing highlighted that the primary user experience challenges were associated with the order page. This emphasized the fact that users primarily come to the website for the purpose of making online orders and expecting a seamless and intuitive process. With these insights from the experiment, I felt more confident in progressing to the design phase.
Time to do some designing!
Design
Wireframing
To begin my design phase, I had to familiarize myself with Squarespace as a website builder. I looked at a few different templates from Squarespace that would be a good foundation to start with, then started building some mid-fidelity wireframes in Figma to present the client and collect their thoughts.
The wireframes I presented to the client are as followed:
After reviewing these wireframes with the client, we ultimately decided on the third wireframe (far right), as we felt it was the best representation in alignment of the users’ goals and needs.
Designing
Let’s start with the new home page. I decided that keeping a similar structure and flow as the previous wireframe and old home page was the way to go, as I made more major changes on the order page.
Here I present to you the final designs for the Mr. Philly website:
Home Page
Hero Section Changes Made:
Substituted the background with an interactive video to enhance user engagement.
Removed ‘Gallery’ from Navigation Bar.
Improved the consistency of the CTA button.
Added a more engaging title.
Addition of Best Sellers Section:
I later made the decision to add this section to enhance the marketing of Mr. Philly's best-selling items, enticing customers to place orders.
Updated Welcome Paragraph:
Including their picture next to the original paragraph accomplishes the goal of creating a 'warm' feeling for users, as it highlights the family-owned nature of the business.
Real-Time Reviews:
Introducing an enhanced method for displaying real-time Google reviews, assuring customers of their source and credibility.
Lively Footer:
Reviving the footer by incorporating the Philadelphia skyline, while also eliminating any irrelevant links that were present before.
Order Page
Menu Section Changes Made:
Users can now view the full menu without the need to open or collapse category buttons.
Added photos to each item to provide customers with a visual representation of the products they will receive.
Incorporated side categories for customers to navigate through selections more efficiently.
To streamline the user experience and reduce the number of steps required to complete tasks, I removed the pop-up window that appeared when selecting an item.
New Product Pages:
By creating dedicated pages for each product, customers will no longer be overwhelmed by the clutter of choices in the previous pop-up style menu. The new presentation is designed for clarity, featuring ample white space to enhance the overall visual appeal.
Updated Shopping Cart Page:
After extensive research, I noted that there weren’t really any issues with the previous shopping cart, but this version feels more consistent with the rest of the website. However, the way this is presented does offer a more modern look with an easier way to remove unwanted items.
For the order page, my primary focus was on enhancing the design's simplicity and efficiency, while ensuring a significantly improved visual aesthetic.
Looks like it’s time to test it…
Evaluate
Usability Testing
I met with and performed usability testing on three users of different age groups. One participant was approximately 65 years old, while the other two were in their late 20s. I presented these users with three different tasks they must complete:
Write a review for Mr. Philly.
Look through the menu and order food as if you were a customer.
Remove any unwanted items from your cart.
The primary goals of this usability testing were to collect feedback on the website's overall usability and visual design, as well as to assess the users' ability to successfully complete the assigned tasks. All users successfully completed all three tasks; however, the older user took significantly more time to finish them. The data gathered from the usability testing are as followed:
User Feedback & Potential Iterations
After usability testing was completed, I received positive feedback from both the users and the client on the visual design and overall usability of the product. However, despite the positive feedback, I still wanted to think about if any iterations were needed following the testing. Here’s how users felt about the website:
One user expressed “it would be nice to see more options, For example, if I were to order 15 wings, maybe in the bottom section it shows a widget of other sides I could add to my cart.”
Another user mentioned, “Some of the pictures don’t fully match the product description and as a customer I would want to visualize what my food would look like as much as possible.”
Here you can see, the “6 Piece Wings” include more than just 6 pieces in the set picture.
After considering these comments, I revisited the content and adjusted certain images to better align with the product descriptions. However, due to constraints within the Squarespace website builder, I must now explore options for incorporating a bottom section to highlight additional products during the ordering process.
Let’s talk about the good!
“This is a good website and easy to use, especially for people like me.”
“I love the UI, the video is really nice and the bottom city skyline is sick.”
“I like how you incorporated their story in here so it feels a lot more personable.”
“It feels very simple and clean, there was not any confusion I had at any point.”
Conclusion
Although I genuinely enjoyed working on this project and with this client, like every project there are always challenges. As this was my first project working for a client as a sole designer, I was faced with the challenges of figuring out everything on my own. Without the help of a team and collaboration, it does make it more difficult to feel confident about producing the best possible solution for the client. Not to mention, dealing with the restrictions of Squarespace and having to learn its’ usability functions and e-commerce store.
With that being said, I am genuinely content with the outcome of this product. Unfortunately, the client faced issues with staying in business, resulting in the website never going live. Nonetheless, I consider this project as a personal success, providing invaluable insights into the demands of being a UX designer.