Title: varieTEA
​
Role: Lead UX Researcher/Prototype Designer
Deliverables: Project Proposal (including Hypothesis, Competitive Brand Matrix, and Platform Justification), Project Pin-Up (including Primary Persona, Company Partnership Proposal, Project Timeline, updated Competitive Matrix and Platform Justification, and Problem Statement), Mobile Wireframes and Functional Prototype, Specifications Document, Presentation Deck
Tools: Persona Creation, Journey Map, Sketch, Zeplin, InVision, Flinto, Market Research
​
​
Challenges:
1.) To brainstorm and address an existing problem to solve.
2.) Tea drinkers (prospective, new, current, etc.) lacked mobile options for personalized recommendations and information.
​
Goal:
To create and build an iOS Mobile App providing personalized tea recommendations and resources for tea drinkers. We found a need for certain tea drinking features in the current iOS market.
Phase 1: Problem Identification/Project Creation
Topic Mapping
TEA. It's Project 4 of 5 in my program. The instructors declare this project can be on ANY topic. How do you decide? We took the approach of Topic Mapping, a form of brainstorming that allows you to build branches related to large general topics. During a discussion of spitting our several general topics, we narrowed down to 3: "Movies and TV, Pets, and Tea". Our team created 3 topic maps, building dozens of project focuses out for each topic. When evaluating the options on hand and knowledge of available products, we found Tea to be the least saturated market, thereby the most room for creation and improvement. Especially underrated was the Tea mobile app market, which I'll get to shortly.
Project Proposal
Our other prompt to work through was our "Project Proposal". This consisted of a primary hypothesis, two secondary hypotheses, platform justification, and a competitive & comparative matrix. This proposal had to be green lit before moving forward.
Primary Hypothesis
Our approved hypothesis was: "We believe creating a mobile platform for personalized tea recommendations will be a useful tool for new and current tea drinkers as it will help them match teas with their preferred lifestyle choice. This will reassure tea drinkers they have made the right tea choice."
Now we have a starting point!
Phase 2: Research and Synthesis
Screening
After establishing tea as the subject matter we were pursuing and a hypothesis to jump from, we started looking for user interviews. We chose to forgo a formal screener, yet instead asked potential users “Do you normally drink tea or coffee?” — Tea drinkers (those that answered tea over coffee) became our 5 user interviews. Sometimes one simple question can serve the same purpose as a formal screener survey.
5 User Interviews
As with every process, we developed a user script that included Intro, General Questions, Targeted Questions, and an Outro to explain these 5 users' relationships with tea and tea drinking. We pulled out the following insight from these 5 user interviews.
Affinity Mapping
Immediately after the 5 user interviews and transcripts, we moved onto Affinity Mapping, helping us eventually produce a User Persona
Persona
Abigail Carter -- Another trusted Persona. Insights from the 5 user interviews provided us with Abigail, the user archetype allowing us to design FOR users.
Problem Statement
Here is the beauty of hypotheses and problem statements; Unlike my TruCircle project experience, our user research here proved our hypothesis to be inaccurate. IN FACT, most hypotheses are incorrect, since they serve solely as a starting point. In this case, the term "lifestyle" became polarizing and confusing for users and associated project members during review. This was a MAJOR lesson learned; Your definition of a term can vary greatly from the user base's perception and definition. Yet, this insight allowed us to refine our problem into a well-informed Problem Statement:
"When tea drinkers are looking to make new tea choices for health and wellness, they find it difficult to acquire trustworthy and accurate sources.
Abigail feels overwhelmed with the information available when exploring the world of tea.
How might we provide personalized and useful tea recommendations for Abigail while still meeting the needs of her health and wellness?"
A simple change from "lifestyle" to "health and wellness" redefined the problem for everyone, increasing clarity.
Phase 3: Colleague Critique
Mobile App Platform Justification
There were several reasons creating an iOS mobile app made the most sense. ALL 5 of our user interviews were iOS users, plus the mobile tea app market is severely lacking. In addition, our app would provide:
-
Constant and instant access to tea information and personalized recommendations.
-
Specialized tea profile that includes favorited or saved teas.
-
Share seamlessly on social media with your network.
-
Connect to geo-locations/Google Maps to display nearby tea shops, farmers markets, tea events, etc.
-
Receive push notifications about these nearby locations or events.
​
Project Pin-Up
Let's pause for a moment. Each project I've chosen highlights different processes, deliverables, expectations, etc. given the project parameters, necessities, and program prompts. In this case, we were tasked with a Project Pin-Up, which included the materials Company Partnership Proposal, Competitive Matrix, Persona, Project Timeline (dictated by the Scrum Master), Platform Justification, and refined Problem Statement. This allowed our entire cohort (colleagues and instructors) to review our research to date without further explanation or context. Here's a good tip I learned: ALWAYS PRESENT INFORMATION ASSUMING THE AUDIENCE WILL NOT HAVE FURTHER CONTEXT. This will keep you cognizant of the language used, data showed, and limiting of assumptions used.
Company Partnership
From our project pin-up, our original company partnership plan proved to be myopic and misguided. Rather than choose ONE tea brand (we chose Srina Tea at the time due to its organic and independent nature), we had to find a brand that included several other brands, and provided more resources, reputation, education, etc.
​
That's where World Tea News came in as a potential partner, highlight advertising, social, education, and innovation factors making the partnership mutually beneficial.
​
Phase 4: Iterate and Design
Design Studio
Every UX team needs to agree on designs, dictated by necessary features, user needs (determined by the persona and user interviews), and overall research. As stated before, hand-sketches/lo-fi wireframes are time and cost-efficient, allowing each designer (and possibly other stakeholders) to pitch, review, and debate designs. Our Design Studio was a smooth process, leading to Mid-Fi designs in Sketch.
Mid-Fi Wireframes and Prototype
Our Design Studio brought out several ideas to test, including a personalized tea quiz that would guide interested users into trying different/specific types of tea. The mockups below highlight that quiz and the home screen.
Phase 5: Usability Testing and Insights
3 Usability Tests on Mid-Fi Prototype
As the team's lead prototype designer (and collaborator during Sketch design), I developed a clickable mid-fi prototype in InVision, choosing that to hit the usability testing quicker. Outside of horizontal scrolling, microinteractions, and other complex effects, InVision is usually an intelligent tool for quick and clean prototyping. Our testing showed us that:
3/3 successfully completed tea recommendation quiz
3/3 users were squinting when reading the branded tea recommendations
1/3 wished to interact with the company logos
2/3 users didn’t know what the “Health & Wellness” content was
Our "calling card" feature, the personalized tea recommendation quiz was quite a hit. But in an improvement sense, several design and format elements needed adjusting. Thank goodness for usability testing! Took those findings and generated a hi-fi iOS mobile design
​
Phase 6: Hi-Fidelity Designs, Prototype, and More Usability Testing
Hi-Fi Wireframes and Prototype
Users expressed the good and bad from mid-fi, and we went to work on the hi-fi designs. Again, as our lead prototype designer, I had a decision to make. InVision is a beautiful tool, but it's limited when needing something like horizontal scrolling. I chose to remake our prototype using "Flinto", another prototyping tool (I've also worked with Principle, but chose Flinto in this case).
FULL VIDEO PROTOTYPE LOCATED AT END OF CASE STUDY
4 Usability Tests of Hi-Fi prototype
Equipped with horizontal scrolling and a new, clean design, usability testing was the next natural step. We chose 4 users for testing, ranging from casual to frequent tea drinkers.
Results:
2/4 users wanted to click the Srina Tea logo or description to add to favorites, NOT the star icon
3/4 users didn’t know if the Read More meant more recommendations or more about the recommendations provided
4/4 users were confused about the difference between “Read More” and “Explore” as well
Specifications Document
More simply put, a "Spec Doc". In order to deliver our hi-fi designs, we also had to add a spec doc, including our style guide (color themes, fonts, etc.), spacing and measurements, user flow, and functional annotations. We also proactively taught ourselves Zeplin, a collaboration tool that allows us (as designers) to share the above information with developers (limiting the error gaps during development). We used Zeplin's capabilities to feed us the specific information needed for the document.
​
Phase 7: Next Steps and Plan
Next Steps
-
Build out the remainder of the home page (i.e. favorites, profile, search, alerts).
-
We ran an accessibility test and everything was compliant, except our header was not wholly
-
compliant.
-
Explore hosting a checkout feature for users to buy tea.
-
Connect to geo-locations/Google Maps to display nearby tea shops, farmers markets, tea events, etc.