Website design | Client project

TEALEAVES

Project Type
Client project, Student Team
My Role
UX Designer
Duration
4 months
Our TEAm
1 designer, 1 copywriter, 3 business consultants
Overview
For our COMM 388 class (Design Thinking for Business Innovation), we worked in teams of 5 to solve different problem spaces for our client, TEALEAVES. We worked with different design thinking frameworks to work through the problem spaces and develop solutions in the form of a deep dive. We worked with the client to identify pain points and ultimately presented our solutions to the TEALEAVES team, with some of our solutions being implemented in their website redesign.
Process
1. Define
Our Problem Space
How can TEALEAVES continue to expand or improve its social impact?
Understanding the brand
What is TEALEAVES
    📌 Luxury tea company providing a unique experience by "combining craftsmanship, beauty, and community"
    📌 Emphasizes quality blending, historic traditions, and sustainable luxury
What is their mission? 
    📌 Set new standards for social responsibility based on the UN Sustainable Development Goals (SDGs)
    📌 Working across initiatives that support education, awareness and action
2. Research
Undertanding the brand
SWOT Analysis
In order to come up with a new solution, we wanted to research what their strengths, weaknesses, threats and opportunities are. Keeping all this in mind, we can better craft our problem and opportunity statement.
Competitors
Positioning Map
As tea is a saturated market, we created a positioning map that showcases where TEALEAVES sits in the market. This further illustrates TEALEAVES' value proposition and how they want to brand themselves.
Who are TEALEAVES' customers?
User Personas & Goals
To learn more about who visits the TEALEAVES website, we created 2 user personas. During our meetings with the TEALEAVES team, we asked about their consumer base and they provided us with information regarding attributes of who purchases their product. With this information, combined with using Reddit to research tea lovers and their motives, we created 2 user personas.
Website audit
Conducting an audit of their current website
We wanted to analyze their current website and see what improvements we could implement.
...with this information, we came up with our problem statement
TEALEAVES’ current brand positioning does not communicate its social impact mission. There appears to be a gap between its core business and social impact initiatives.
Validating our problem statement
User Survey
We conducted a survey amongst 86 participants in which we sought to answer how the public currently identifies the TEALEAVES brand. In this survey, the participants selected were from two distinct groups: tea enthusiasts who were aware of TEALEAVES, and tea enthusiasts who had never heard of the brand. After viewing the website for 60 seconds, participants were asked to write 3 words that they associate with the company (results below). The word map is sorted by size of the word indicating the number of times it was mentioned
Based on your first impression, describe TEALEAVES in 3 words.
Our Findings
It is evident that TEALEAVES has done an exceptional job at standing out as a luxury tea brand and continues to differentiate itself in its quality against other tea competitors as participants mention 'luxury' and 'quality' commonly. However, findings revealed that the public does not primarily associate the company with social impact or sustainability, therefore, indicating a gap in TEALEAVES' current and desired brand positioning.
3. Ideate
Opportunity Statement
How can we fix this problem?
A more cohesive approach to TEALEAVES’ communication strategy in which its social impact efforts are brought to the forefront might allow them to better convey its mission as a company with sustainable and socially-conscious values.
Brainstorming possible solutions
Criteria for success
The criteria for success were selected on the key factors that will help determine the project's success. The ideal solution must seek alignment with TEALEAVES' current strategy and desired long-term goals, help propel its mission, have buy-in from key decision makers at the company, be easy to implement, bring long-term benefits to the company and have relatively lower costs to other alternatives. After evaluating various strategies, we landed on commnication strategy for its feasibility.
Brainstorming possible solutions
FigJam Whiteboarding
To redesign TEALEAVES' communication strategy, we broke it up into TEALEAVES' B2B and B2C efforts and came up with possible solutions and deliverables. After consulting with the TEALEAVES' strategy and business development team, we decided on a website redesign.
Industry leader research
Back to research... Industry leaders: Patagonia and Tengri
Patagonia and Tengri are both industry leaders when it comes to eCommerce brands for social good. They are well known for their social impact initiatives in addition to their quality product offerings, a model that aligns with TEALEAVES' goals.
Customer journey storyboard
A day in the life of a TEALEAVES customer
To help us understand our user journey, we sketched out a storyboard/day in the life of a hypothetical situation that could have happened before and after the implementation of our solution.
Before our solution
After our solution
4. Wireframe and Prototype
Wireframe
Mid-fidelity wireframes
We had scheduled a meeting with the TEALEAVES creative team about our idea, and wanted to provide them with a mid-fidelity wireframe to get feedback on our direction and designs.
Home Page
Learn Page
Feedback
Feedback from TEALEAVES
We had a meeting with the TEALEAVES' creative director and a designer, where we showed them our wireframes and pitched our idea. They loved it and provided us tools such as soon-to-be-released Figma prototypes and brand style guidelines. In addition to the design, they loved our hero section copy and wanted copy done for the rest of the prototype.
Prototype
Hi-fidelity prototype
After the green light from TEALEAVES, we went to straight to work on the hi-fidelity prototypes.
Home page
Learn page
5. Test
User testing
Validating our solution
To evaluate the success of our proposed solution, we aimed to test the difference in public opinion of TEALEAVES using the same survey that was conducted in the problem exploration phase. 50 survey participants were shown the website homepage prototype for 60 seconds and asked to write 3 words that they associate with the company (results below). The word map is sorted by the size of the word indicating the number of times it was mentioned
Based on your first impression, describe TEALEAVES in 3 words.
Our Findings
The survey results revealed that the perception of the public still included keywords like 'luxury' and 'expensive' maintaining TEALEAVES' key value proposition. However, new words included 'sustainable', 'biodiversity, 'nature', and 'biodegradable' showcasing that the prototype was successful in conveying a new image that integrated its current value proposition and its desired goals of social impact and biodiversity goals.
Our Impact
What was our impact?
After pitching our project to TEALEAVES' creative team and director of strategy, the feedback was overall very positive and they were excited to implement our designs to their website.
‍
Here are some of our design changes that have been implemented:
    📌 Video background in hero section
    📌 Social impact card slider (moved up)
    📌 Implemented call to action button
    📌 Social initiatives moved up
Key Takeaways
What did we learn?
    📌 IDEATION! Don't be afraid to go back and change course
    📌 Importance of polishing our problem statement (updated at least 4 times)
    📌 Data-backed solutions are key
Future Goals
In the future...
    📌 Focus on research! Conduct user interviews and get concrete data