Blendees Website Design

Website design and branding
In 10 weeks, I worked with a group of 5 as part of the UC San Diego Design Co summer program to created a brand new website, implemented an online ordering system, and produced a marketing plan for Blendees, a black owned smoothie and juicery bar in San Diego.
Timeline : June 2021- September 2021
Role: Lead UX Researcher, UX Designer
Scope : UX Research, UX Design, Visual & UI Design
Deliverables: Brand new website
View the website here

Overview

Blendees is a black-owned juice and smoothie bar that started in 2011 as a fundraiser for a football team. From its growing success, Blendees became a business with a mission to “drink healthy and be healthy.” They believe that shopping healthy shouldn’t be expensive. Their customizable menu includes smoothies, tea, acai, and all things natural to maximize health benefits.

Problem and Vision

Though business is strong, a lacking online presence and no way of tracking business metrics left Blendees with little room for customer expansion.

We envisioned that Blendees’ new website design and social media branding will expand their customer base by creating a cohesive experience that showcases Blendees’ core mission of creating quality healthy food with affordability, while highlighting Blendee’s culture of welcomeness and inclusivity.

My Role
I was the lead UX researcher of the design team, and I lead the UX research, market research portion of the design sprint. Once research was solidified, I collaborated with 2 UX designers to ideate and prototype lofi, midfi, and hifi. I also worked along side the visual designer to create sketches and visual assets that are incorporated into the final high fidelity design.
While the 10 weeks of collaboration with our stakeholders involved other components such as social media marketing, online ordering implementation, visual branding, and web building, I was primarily involved with website design.

Narrowing the Scope

In our initial meeting with Blendees’ stakeholders, their primary wish was to have a website redesign and a new marketing plan with the overall goal to expand the customer base. Creative freedom was heavily encouraged.
Without clear identification of the problem space, our team took it upon ourselves to research and explore the needs of both the business and the users.

Mad Lib activity

First, we conducted a mad lib activity with the stakeholders:

From we mad lib activity, we narrowed down our scope of focus and refined the mission statement of Blendees to the following:

"Create quality blends where the maximum health benefits can be achieved through drinking your fruits, veggies, and roots"

Website Redesign

From our meeting with our stakeholders, we came up with these how might we statements to guide our web design decisions.

How might we revamp the website and marketing campaign such that Blendees can expand their customer base and stand out from its competitors?
How might we create an engaging experience for Blendees customers while conveying Blendees’ mission?

The Process

Original Website Analysis

We began the research process with analysis of original analysis by analyzing the current structure of Blendees’ original website, and found notable need for change in terms of website structure:
- Everything is contained onto one singular page (the home page)
- Hero image gets cut off
- Reviews section takes up a lot of valuable space and the API incorporates reviews that don’t have comments

Market Research

After conducting the initial round of observations, we took to market research to brainstorm and validate our observations. We conducted market research by creating a competitive analysis, looking into established competitors for insights on both website functionality and branding.

From our competitive analysis, we learned that:
1. Blendees' current website needs implementation of features such as navigation bar/ site map.

2. Online ordering is a feature present in all analyzed competitors.

User Research

I wanted to know what users thought about the website, so I sent out surveys to gain more insights. From our user survey for non Blendees customers, we garnered 13 responses in which helped provide us with validation and new ideas. The findings were as followed:

40% of user responses indicated that the one page set up made navigation more difficult

100% of users browse similar websites for menu and pricing while 80% percent also uses the website to check opening hours

78% of users indicated that the website lacks product images and visual elements

Then, I created a survey and conducted an additional round of user research with valued Blendees customers. In total, we were able to amass 13 responses and found that:

55% of customers emphasized Blendees' customer service quality

Descriptions for Blendees' culture includes "welcoming", "healthy", "moneys-worth"

86% of customers visited Blendees' website in the past for menu and price

Synthesis of UX Research Findings

I synthesized our findings through SWOT analysis, and recognized some opportunities for improvement.

In terms of website opportunities:
1. Add sections to improve navigation
2. Implement online ordering services (clover system)
3. Utilize Blendees' strength in customer service as a selling point
4. Emphasize business culture on Blendees' website

In addition, I created personas of Blendees website users to synthesize our findings.

UX/UI Design

Design Goals

Website Rebrand

Refresh Blendees’ brand, and showcase more of who they are/what they represent.

Functional Navigation

Make the site easy to navigate especially in the context of new users and online ordering.

Added Features and Interactions

Spice up the current interactions and allow users to explore more of Blendees’ offerings – online ordering, catering, and more

Based on our design goals, we began our design process.
Our initial ideas were represented through feature list, information architecture, and user flow.

Feature List

  • menu
  • contact
  • hours and location
  • online ordering
  • catering request
  • cleanse request
  • best seller display

The main thing that we wanted to address was the need for sections and additional pages in their new website, the addition of online ordering, and the addition of a "Our Story" page to highlight Blendees’ culture and mission.

Wireframing and LoFi

To address our stakeholder's needs, I worked with the designers and created quick wireframes of potential website layouts for each of our main pages. We knew that we wanted to separate the website into multiple pages as opposed to Blendees' previous one page website because it would allow for organized navigation as well as help the business track which page users receive the most traffic. We took inspiration from website layouts of our competitors because we wanted Blendees' website to have familiar structure with other comparable smoothie/ juice brands.

Mid Fidelity and Usability Tests

After our wireframes and lo-fidelity prototypes, we dived into mid-fidelity prototypes and implemented important features such as a visual menu, contact page, and about us page. In our mid-fidelity we wanted to focus more on whether our site could be navigated intuitively for users who wanted to explore Blendees' menu, order online, and contact the business with any questions. Because we were more concerned with the functionality and discoverability of the website's contents, our prototype did not emphasize much on the visual design.

We used this prototype to test the functionality of our website's menu and contact features. Our initial round of usability test utilized scenarios to gauge the effectiveness of our designs. From rapid testing, we found that:

Hi Fidelity and Usability Tests

Keeping in mind the feedback we received from our mid-fidelity prototypes, we went back to iterating on our designs and transitioned into hi-fidelity prototyping. Through visual style, content writing, and tone, we focused on ways we could best weave in Blendees' culture and mission across the website.

Landing Page

Increased Discoverability - Navigation Bar

Since 5/7 users from our first round of testing stated that they struggled to find information about catering, we knew we had to make the contents of each page more discoverable. To do so, we implemented a dropdown menu on our navigation bar that displays the main sections of each page when the mouse hovers so that users could have an overview and find information quickly. Because the first section of our Contact page contains location details, we ensured that after users clicked on "Catering" from our dropdown menu, this would automatically scroll them down to catering information from the Contact page to avoid confusion.

Online Menu

Blendees' original online menu only consisted of text. To increase user engagement and curiosity about Blendees' offerings, we incorporated product images paired with playful doodles and abstract shapes to add texture and an inviting tone. Because Blendees has a lot to offer on their menu, we changed each header image to match with its respective menu category so that users could immediately identify which menu page they are on.

Our Story Page

As much as they are trying to sell their products, Blendees also communicated their wish to share to the world their story as a small, Black-owned business. Thus, we added an "Our Story" page to their website to showcase Blendees' humble start and mission. On this page we give a brief introduction to Blendees' origins, their core values, and their local garden.

Final Deliverables and Impact

You can view the final website at: www.blendees.com

The website was built on Squarespace, which offers customizable sections, global site styles, and responsive design capabilities. The focus was to create it in a way that both follows the proposed designs, while also making it easy for the stakeholder to update in the future.
Our stakeholder was incredibly satisfied with the website during handoff, and offered great praise to the team as a whole. The website was launched 2 weeks after handoff.

In 2022, Blendees' website traffic has increased by 1271%

*Based on Square Space analytics in August 2022

Reflections

I enjoyed every step of this rewarding journey from start and end. As the lead UX researchers, I found myself leading the team in the initial research phase and usability testing phases by creating action items, determining team direction, assigning work, and taking initiatives. Beyond UX research, I had the opportunities to work closely with other designers and create quality work with the help of each other. I learned a lot from collaborating with visual artists, web developers, and marketing. I was able to take on different duties such as creating visual elements, and acting as point of contact with stakeholders. Our team also worked responsibly and held ourselves accountable for our duties, which made the whole process flow smoothly. As a whole, I am incredibly proud of this project and am excited to see the success of Blendees.

Back to top

View the type 1 diabetes aging projects here >