LIVE VESSEL
A Responsive Web Redesign for an independent Vegan Mylk brand.
Let’s work together !
Scope:
Responsive Web Design / Branding
Researcher / Visual Designer / UI / UX Designer
Researcher / Visual Designer / UI / UX Designer
Role:
Figma / PixelSquid / Chat GPT / MidJourney / Maze
Tools:
5 months
Duration:
Project Overview
Challenge
Live Vessel is an eco-friendly, and sustainable vegan food brand. Live Vessel wishes to market itself as more than a dessert brand, They also want to be recognized as a lifestyle brand. Live Vessel wishes to update its site to align with its recent rebranding, and to capitalize on recent trends revolving around healthy eating that has boomed across social media, while still serving their existing customer base.
Objective
Design a responsive website for Live Vessel
Develop ways to engage existing customer base to increase sales and Membership Subscriptions
Increase brand visibility
Define
Research Plan
To Begin the project, we looked at the analytics report of the site and overall sales performances.
We then performed competitive and comparative analyses, and market trends.
With this data we can evaluate Live Vessels strengths and weaknesses, especially compared to
its competitors.
Research Goals
Understand the vegan mylk / dessert market and the target audiences.
Learn about what makes Live Vessel a superior product compared to its competitors.
Learn about the niche Live Vessel can occupy that can make it a standout brand compared to its competitors.
Understand and correct the reasons for client drop-off and subscription plateaus.
Learn about the current strengths and weaknesses of the extant Live Vessel site.
Methodologies
Secondary Research (market research, competitive analysis)
Primary Research (User Interview)
Secondary Research
Market Research
To develop a successful branding and design strategy, it is essential to conduct market research to gain a comprehensive understanding of the market landscape and identify key trends and target audiences. By analyzing market data, we can develop provisional personas that represent the needs, behaviors, and preferences of our target audience, and design the appropriate site parameters. So lets delve into the research !
The Vegan Mylk Market
The Global Vegan Dessert Market size was valued at USD 2.77 billions in 2019 and is epected to grow at a compound annual growth rate of 10.1% from 2020 to 2027. By 2030, it is estimated to reach a value of $123.1 billion, confirms Strategic Market Research.
The increased incidence of chronic lifestyle illnesses and sensitivity to animal protein is one of the major reasons propelling this market expansion. in the United States, lactose intolerance affects over 35% of the population.
It is estimated that 45% of those who consume vegan food in the United Kingdom are between the ages of 15 and 40, a 300% jump over the last 10 years.
Niche Expansions
Flavored products category is anticipated to hold the greatest plant-based mylk market share. The market is expected to expand at a CAGR of 9%. These flavors also help balance astringency or chalkiness, grassy notes, and neutralize the foundation.
Site Analytics
To understand the performance metrics of Live Vessel, I retrieved the Google Analytics to see where the website stood and what strengths and deficiencies we needed to address.
Through January 1st 2022 - December 31st 2022 there was a 14% decline in total orders.
Through this same time, sessions from source saw a 16% increase originating from Instagram.
Site sessions overall declined by 19%.
Concerning sales by social source, there was 27% decrease.
Returning customer rates saw an increase by 9%.
The About Page sessions saw a 321% increase.
Competitive Research
To conduct a thorough competitive analysis, I pulled indirect competitors within the industry.
Two of the companies are large forerunners in the plant-based mylk industry, while the two other brands are smaller brands comparable to the size and scope of Live Vessel. By analyzing their websites, online presence, and sales data, I was able to gain valuable insights into their strengths and weaknesses, I used this information to develop branding tactics and website developments.
In total, I analyzed 4 indirect competitors, to provide perspective on the market and the needs of our target audience.
Primary Research
Screenshots of the existing
Live Vessel website.
User Testing
User Interviews
User Feedback
I had my participants test the existing Live Vessel website to highlight its strengths and weaknesses. I had them freely assess the website and determine what worked well and what did not. I used this process to have them tell me what would lead them to purchase product, and subscribe, and what would deter them.
I created an interview guide and asked my participants a series of questions pertaining to their experience. A total of 4 participants participated in the interview process.
As per the participant outlined, I asked them to perform the following tasks:
Please Explore the Live Vessel website. Describe your general feelings regarding the UI, UX, and the overall appearance and function of the website.
Describe what may deter you from purchasing ? What would've made you purchase more products ? Is there anything the website could prompt that would remind you to go through a purchase, or convince you to buy more ? Please describe the successes of the site and features that prompted you to go through an order.
Go through the process to subscribe to Live Vessel’s Mailing List. Describe your thought process and describe the successes and deficiencies of the Mailing List sign-up, and the overall experience of this process.
Does the website properly describe the services Live Vessel offers ? Is there an appropriate description of the brand ethos ? Do you come away feeling familiar with Live Vessel ? Please describe the successes and deficiencies.
Through the exploration of this site, do you feel Live Vessel gives insight into why you should select this product over competitors ? Does the website breakdown the nutritional value of their products and the benefits of eating their products (or vegan products in general) ?
Users most commonly noted the follow pain points:
Visibility
Users noted difficulty
in seeing some of the
prompts as a result of
text blending in with
background images.
Info
Users noted a lack of information regarding the brand ethos or
other products and
services offered.
Connection
Users noted a lack of emotional connection. They wanted to see photos and get to know who constitutes Live Vessel!
Competition
Users wanted to know what makes LV better than its competition. Why buy Live Vessel products over others ?
Members ?
Why should customers become members and subscribe to the mailing list ?
Ideate
User Persona
With the data gathered from Primary research and secondary research, I developed one user perspective of the audience.
Project Goal
With the user assessments and an evaluation of the businesses needs, I was able to define goals for the project which it will also be a guide to the project.
Site Map
With the help of product roadmap, I was able to visualize primary features’ relationship between content along and arrange the hierarchy.
I also used this persona tab to
develop a preliminary color
palette.
Mid-Fi Wireframes
Design
User Flow
Before diving into designing wireframes, I decided to identify task flow that will guide the direction of pages needed and to see the overall flow in the website.
Based of task flow, I was able to map out user flows depending on the scenario and in order to complete a given task for the user.
Based on the feedback given by participants regarding the current site, I began to design the new website, while pulling in references requested by the site owner....
SO...
Task Flow
Before iterating the final prototypes, I created these wireframes to set the design and use as platforms for users to test my design. These are the barebones !
The Membership Page where you can directly become a Live Vessel Member. Here, the perks of membership are explained, and the Member Exclusive Mylk bundles are offered.
The About Us page allows visitors to get to know more about the brand ethos, the company founder, and they can read about the Nutritional Facts of the mylks and desserts offered, and how they compare to the competition.
The LiveStyle Page explores the aspects of the brand that make it more than just a dessert or mylk brand. Customers can explore the brand blog, curate recipes using some of the featured mylks, and enjoy the custom Spotify playlists designated by the company founder. This page is designed to engage the customer base and make them feel like they’re part of a community as opposed to just another wallet.
The primary screen. As soon as this page opens, you will be prompted to provide your email
and will be granted a coupon !
Desktop
The Home Page
Membership
About Us
LiveStyle
Shop !
Product Page
Shown here is the specific Product Page for one of the many flavors offered. We can see specific product details, and recommended recipes at the bottom of the page.
Shop until you drop ! This page acts as the shopping hub where you can directly access all of the Live Vessel products. The top of the page directs visitors to the Membership page to access the Live Member Sampler Packs.
Usability Testing
Testing Objectives
Tasks to Complete
Results
After implementing style guide to mid fidelity, I was able to use the wireframes into a usability testing. Before testing to participants, I created a usability testing plan to define what I want to test and what I need to iterate.
They were asked to re-evaluate a series of the design standards and revisions based on their critiques of the site’s strengths and weaknesses.
The main tasks had testers evaluate the accessibility of the products, the ease at which users can subscribe, to evaluate if the subscriptions perks were clear, and if they could better connect with the brand through its new About Page.
Are users able to complete their given tasks ?
Are users able to identify with the brand ?
Is the redesign viewed as an upgrade ?
Does the redesign provide a better shopping experience ?
Evaluate the font and colors used ? Rate the clarity
Access the Hazel Brew product page. Was it easy ? Do you feel the project page is informative and convinces you to purchase ?
Are the purchasing options clear ?
Is the subscription process clear ? Do the exclusive Member Bundles entice you to subscribe ?
Does the About Page and the Ethos description allow to connect better to the brand ? Does it make you more sympathetic to being a customer ?
Does the interactivity of the LiveStyle page make you feel more excited to engage in the lifestyle aspect of Live Vessel ?
Do the recipe recommendations change your perception of the product ? Does it convince you to purchase more product ?
“Now we have the opportunity to know what the benefits of membership are - we know what we’re signing up for. great work adding a bundle pack. We all love bundle packs ! “
- Participant #1
“I CAN READ ! The site is much more legible. The color palette also cues me into the brand. The new font is clean and feels like part of the branding.”
- Participant #2
“The LiveStyle Page looks so fun - I’m excited to see the full potential of what recipes I can use the mylks for - and the page gives me the perfect playlist to blast in the kitchen !”
- Participant #3
“Knowing there’s a full About Page, product breakdown, and brand description, I feel better about potentially buying from Live Vessel.”
- Participant #4
Style guide
With mood board, brand words, and the logo choice, I was able to expend the brand identity with colors, fonts, use of imagery, and icons that could be a guide.
The palette derived from the existing branding color scheme, along with some inspiration that came from the colors of the individual mylk flavors.
Responsive UI Design
Utilizing Live Vessel’s assets package, color codes, and a series of images developed in photoshop and MidJourney, the final iteration of the site was designed.
We successfully touched upon the notes regarding font visibility and brand identity. Users connected with the brand and understood the opportunities presented with being a Live Vessel customer.
Our qualitative research allowed us to collect subjective data and make the necessary iterations to satisfy our users.
Here is the Final Protoype !
Homepage - Desktop
Shop - Desktop
Homepage - Mobile
As soon as the Home Page opens , you will be prompted to provide your email to join the Live Vessel mailing list,
and will be granted a 10% discount off of your first order !
Product Page - Desktop
Additional Pages
About Us
Membership Page
LiveStyle Page
Product Page - Mobile
While developing this website redesign, it was my mission to create a platform that would empower visitors to feel that they can trust the brand, and the website itself would entice new customers and return customers. As the founder wished, I developed a website that allows Live Vessel to be identified as a lifestyle brand that engages its consumers more than the average vegan mylk brand.
I envision the website will be responsible for an increase in sales and subscriptions. The added Recipe section will educate consumers on how to use the products in new and creative ways. The new About Page will make consumers more empathetic towards the brand, and being able to connect a face to the product will bolster sales.
Next Steps:
Further iteration would be implemented to the other pages to assure the design vocabulary is adopted throughout the entire site. Additional tests would be conducted to assure the additional website features are functional from the users perspective, and align with the desires and needs of the business.
Reflection