Square Fare
a website redesign for a meal delivery service based in New York.
eComm Research | Web Design UX Research
*Please note that site may slightly differ from the designs in this case study due to the client making their own changes.
Overview
Square Fare is a food delivery service that crafts chef-made meals that are tailored to your specific needs. Their mission is to help people feel great by using fresh, unprocessed & nutritious ingredients in every meal. Each meal is delivered to your door the same day it is made.
The team and I were tasked with helping Square Fare improve their website and optimize it in a way so that users feel more excited about their health and what they are eating. The main overall goal was to create stronger branding for Square Fare, making it memorable, and exciting and communicating what sets them apart to a larger audience.
My Role
UX/UI Designer
The Team
Dynamic team of 3:
Miranda Jones, Angella Dijamco & Nikita Michayluk
Tools
Figma, Squarespace, Figjam, Miro
Methods
User Interviews, Contextual Inquiries, Competitive & Comparative analysis, Affinity Mapping, Wireframing, User Personas & Journey Maps
Timeline
3 weeks
Our website redesign increased traffic to Square Fare website by 50%! Read the case study below to see how we accomplished this!
The Old Square Fare
Home Page Before
Meals Page Before
The Science Page Before
Onboarding Quiz Before
The Opportunity
Let's face it, the website is boring and lacks life. It doesn't give off the feeling that Square Fare does anything new, but that is far from the truth when you really get to know the company. Our goal is to make users feel excited to eat healthy again and help them understand that Square Fare is not like its competitors. But how do users get to know the company if finding information about them on their own site is difficult? What is causing users to get a "sketchy" vibe from the website?
The redesigned Square Fare website provides a more user-friendly experience by improving navigation, hierarchy, readability, and scannability. Additionally, the onboarding quiz has been redesigned to be more engaging, attracting more customers and increasing revenue for the company. The website now clearly communicates Square Fare's mission, values, and services, building credibility with users and making it easier for them to understand what the company does and why it's valuable.
The Solution
How might we help users feel excited to eat healthily?
How might we set Square Fare apart from it’s competitors?
Discovery Phase
User Research
In order to gain insight on the current website and users needs and goals, we conducted extensive research by doing user interviews and contextual inquiries.
5
User Interviews
8
Contextual Inquiries
Affinity Mapping
As a team, we compiled all our information from the user interviews and contextual inquiries into an affinity map and these were our findings.
Navigation
users found finding information on the website and about the company was difficult
Hierarchy, readability, and scannability
Interface
texts were hard to read
users felt the website lacked credibility
Onboarding
users felt the onboarding quiz to be long and confusing
many users drop off before completing the quiz
Competitive Analysis
In order to understand Square Fare’s competitors and the current meal delivery service market, we compared Square Fare to 8 different meal delivery services.
We took note of companies’:
Brand Positioning
Target Market
Services/ Products
Website
Navigation
Layout Organization
Site Performance
Colors
Overall Vibe
This analysis helped us determine the design decisions we were going to take. Square Fare stands behind the science aspect of their business model. Because they are able to tailor each person’s meals according to their health goals and concerns, it’s one of the main services we wanted to make sure users were aware of.
Let’s Meet our Users
With our research findings defined, as a team we created personas to gain more perspective into the user’s experience with the site, their goals, and their frustrations.
We presented these personas to the founder of Square Fare to show a realistic representation of her key audience.
There is Sara, who is a new mom who is finding herself more busy than usual and has found that she’s had less time to cook and eat healthily. She is looking for a meal delivery service to make it easier to eat healthily and that takes her post-natal needs into consideration.
Jacob is a busy software engineer with multiple health issues like food allergies and diabetes. Like Sara, he is looking for a meal delivery service that takes his health needs into consideration.
Sara and Jacob’s Journey through the old Square Fare
With our user's needs and frustrations in mind, we took a retrospective look at their journey throughout the current Square Fare website based off of our contextual inquiries during our research phase.
Sara's pain point was that she was unable to easily scan the website and find the information she needed when questions arose about the company. This results in her being skeptical and eventually leaving the site.
As for Jacob, his pain points were that he found the site difficult to navigate, could not find additional information about the meals, and found the quiz too long and boring. These frustrations resulted in him leaving the site like Sara and not getting through the quiz. If he would have a better onboarding experience he would have realized that Square Fare can tailor his meals to his specific needs.
Design Process
Design Goals
With our main goal of creating stronger branding for Square Fare and our users’ goals and frustrations defined, we narrowed our focus on improving the interface, navigation, and onboarding. We also wanted to emphasize the fact that Square Fare takes a scientific approach and that every meal is tailored to your preferences.
Navigation
Use hierarchy to make information scannable, clear, and easy to find.
Onboarding
Onboarding should be engaging, informative and show progress.
Interface
Make Square Fare site memorable, intriguing and credible.
Design Constraints
For this project, our client handles every aspect of the business including the website. Because of this, the team opted to design the site in Squarespace instead of Figma because the client is already familiar with Squarespace and manages everything within the platform. By choosing Squarespace, we aimed to ensure that the implementation of the design was seamless and straightforward, with minimal additional training or steps required to make the site live.
Moodboards + Figma Layout Sketching
As a team, we all individually created mood boards and quick layout sketches in Figma in order to visualize the feeling the new Square Fare was going to give off. The client wanted Square Fare to feel "high-end" and "white-glove" and not be different than the rest of its competitors.
Inspiration
When it comes to drawing inspiration for our design, we sought out companies that share a similar business model with Square Fare, though not necessarily in direct competition. We took note of how they presented their information and adapted those learnings to our own approach. Considering the unique nature of Square Fare, where every meal is personalized to meet specific health goals and concerns, we turned to companies that offer customizable products.
The New Square Fare
Mindful of our users' objectives and pain points, as well as our competitors and business goals, our team divided the website design work among us, with each member taking on specific pages. Through daily collaboration, we ensured consistency across all pages. Below you will find screenshots of the site.
Meal Listing Page Designed By Miranda
Dietician + Nutritionist Partner Page 1 Designed by Miranda
Home Page Top Half
Meal Page - Designed by Miranda
Usability Testing
As a team, we conducted 8 usability tests. From our usability testing, though mostly positive, we did receive some valuable feedback that allowed us to make some changes for our final designs.
Home Page
Users were trying to click on areas that weren’t clickable so we gave them the option to click a button that would bring them to a page with more info
For the customer testimonial section, users mentioned that the scrolling text was hard to read and made them want to skip over that section completely. As a result, we redesigned that area to be more readable and left out the scrolling text.
Additionally, we added an area for users to subscribe to a newsletter in the footer area which would give users the option to still get information and updates on Square Fare, even if the meals weren’t available in their city.
About Page
For the section about Square Fares sustainability efforts, users were distracted by shapes that seemed out of place so we got rid of them to draw attention away from the funky shapes to important information.
Meal Listing Page
This page was confusing for users’ because meals appeared to be listed twice, depending on the portion. To fix this we moved the portion options to the meal description page, combining the a la carte and family portions into one drop-down menu.
Additionally, we added more information about the portion sizes so users knew what each one meant.
Conclusion & Next Steps
After presenting our final design to the founder of Square Fare, we received very positive feedback and she was excited to implement the new designs. Almost exactly 2 weeks later, the site went live and we are hoping to receive updates about whether or not our designs helped increase website traffic and sales for the company.
UPDATE 4/27: We heard back from the founder of Square Fare and got word that our new website design increased site traffic by 50%!
Phase 2
For our next steps of the Square Fare website redesign, there were a few more changes that we had in mind.
Create a landing page providing detailed information about each of the health concerns and goals that Square Fare can assist with. We assume that this addition will enable Square Fares users to gain a better understanding of how Square Fare can help them achieve their health goals and address their concerns, adding further credibility to their services.
Interweave Square Fares’ partnership with New York restaurant, Le Bontaniste.