BEE
An end-to-end application that nurtures self-care
“Through cognitive reframing, we can learn to recognize our negative thought spirals and cultivate more realistic and positive thoughts. When you reframe the situation to cope and deal with it better, you're allowing yourself to grow and expand your mindset.”
PROJECT PLAN
CHALLENGE
Design features that will engage users to continue interacting with the app by promoting autonomy and self-improvement, and overcoming cognitive distortions using cognitive reframing tools, and habit building techniques.
BACKGROUND
The Association of Behavioral and Cognitive Therapies would like to introduce a digital reframing tool for their annual conference to extend the tools and techniques beyond the in-person and virtual therapy sessions, in a quest to promote autonomy and self-compassion with their clients.
GOALS
Create new branding for the company
Create an interactive ios app
Create feature(s) that help manage cognitive distortion
See Project Brief See Research Plan
ROLE
UX Designer(Researcher, Visual Designer, Interaction Designer, and User Testing)
DURATION
4 Weeks
TOOLS
Sketch, InVision, Pen + Paper, Illustrator
TEAM
Mentored by Alan Hurt Jr. from Innospace Lab Design
PROCESS
01 EMPATHIZE
-Market Research
-Competitive Analysis
-Provisional Personas
-User Interviews
02 DEFINE
- Empathy Map - User Persona
03 IDEATE/DESIGN
- POV & HMW - Brainstorming
- Business & User Goals - Product Roadmap
- Task / User Flows
- App Map
- Wireframe Sketches - Mid-Fidelity Wireframe
04 PROTOTYPE/TEST
- Mid-Fidelity Prototype
- Usability Testing
- Revised Wireframes - Branding - Mood Board
- Style Tile
- UI Kit - High-Fidelity Prototype
05 ITERATE
- Affinity Map - Revised Wireframes - High-Fidelity Wireframes
01 EMPATHIZE
SECONDARY RESEARCH
Market Research
To understand how self-compassion, self-care, and self-growth were being defined by the market, I conducted market research to discover the research findings and theories of experts in the field of psychology, the needs and frustrations of the user, the demographics of the user, and how to align the company’s goals with the needs and demands of the market. The goals were to understand the concepts, theories, and methodologies that encompassed self- compassion, and the user’s intentions and objectives.
I have highlighted important information that defines the current user.
Calm and Headspace, are leading the market, “both of which focus on mindfulness and meditation. Calm, the top grosser, earned about half the total revenue in the U.S. and worldwide, equating to roughly $8 million in the U.S. and $13.5 million worldwide. Combined with Headspace, the two generated more than 90 percent of the top 10 apps’ revenue last quarter.”
A survey uncovers “two thirds (68%) of 18 – 35 year olds trust health and wellbeing digital devices and apps, whilst only a quarter (28%) of 46 – 55 year olds and 19% of 56 – 65 year olds feel the same.”
The Apple Store now has a staggering 1.4 million apps, more than 35,000 of which are health-related.
Click here to read more about the Market Research I conducted
Competitive Research
I conducted a competitive analysis to discern the strengths and weaknesses, and unearth opportunities to improve upon weaknesses and reinforce strengths. The discrepancies between each app are the ways each company defines self-compassion, self-care, and self- growth. During this time, I signed up for the paid and non-paid versions of the apps to understand the alternative interactions within an app.
I selected the competitors and indirect competitors with the following criteria and reviewed how each company approached :
01. practicing self- compassion
02. focusing on the mental wellness of the user
03. setting goals
04. building habits to achieve the goals
05. encouraging activities that reframe cognitive distortion
06. providing a space for reflection
Click here to read more about my competitive analysis
Provisional Personas
To empathize with Bee’s target market , I created provisional personas that were based on my secondary research that personify the prospective user. These personas helped me determine ideal interview candidates when I arrived at the interview process.
PRIMARY RESEARCH
User Interviews
To gain a better understanding of the needs and motivations of the user, I conducted a series of user interviews. I recruited five interviewees and asked open ended questions regarding their own journeys with self-compassion, self-awareness, and self-growth. See interview guide
02 DEFINE
Empathy Map
With the insights from the user interviews, I created an empathy map to synthesize user interview findings.
Research Synthesis
Once I organized all the interviews, I moved onto research synthesis. In this step, I sorted my notes into groups, which helped me identify patterns in participant responses. From these patterns, I extracted insights which were then translated into user needs.
Insights
01 Users do not want to quiet their inner critic
02 Users want to have the space to reflect daily
03 Users find ways to practice self-compassion
Needs
01 To confront self-criticism
02 To reflect daily
03 Practice self-compassion
User Persona
From secondary and primary research, and user interviews I created a user persona that embodies Bee’s target market. With this persona, I was able to determine exactly who I was designing for.
POV Statements & HMW Questions
With the insights and needs derived from my empathy map, I created a POV statement and HMW question document. By combining user needs and insights, I created POV statements. To address user needs, I wrote a how might we question for each need of my user persona. These how might we questions would be used in the next step of my process, brainstorming.
03 IDEATE
Individual Brainstorming
I conducted 2 minute individual brainstorming session for each HMW question using the reverse brainstorming method.
Business and User Goals
I then identified the business goals based on research, and user goals based on my personas. Where these diagrams overlap is where I focused on my project.
Product Roadmap
Based on the findings from the methodologies brainstorming and the business and user goals analysis, I created a product roadmap to prioritize which features I would build first.
Application Map
I created an application map to understand how the app’s information architecture would be organized. The site’s content categories are based on the pages and features I listed as requirements. It was essential to outline the website’s structure before creating any designs to ensure that the app maintained its intended organization to best suit user needs.
Task Flow
In order to visualize how a user would interact with the site, I created a task flow. I created three tasks that would be typical of a user on our site.
User Flow
For a deeper look into how a user would navigate within the app, I created a user flow to anticipate behaviors and decisions a user might do during a specific task. This helped me visualize potential pain points that I could further identify during testing.
DESIGN
Low-Fidelity Wireframe Sketches
Based on my task & user flows, I started building out my first iterations of my low-fidelity wireframes. I used inspiration from competitor sites, design patterns, and our own user goals.
Mid-Fidelity Wireframes
From my sketches, I created mid-fidelity wireframes which I would use for testing.
04 PROTOTYPE/TEST
Usability Testing
I tested my prototype with five participants, in a moderated think aloud usability test. All testing was conducted over Zoom with the participant sharing their screen, so I could see the user’s interactions and reactions to the prototype.
Test Objectives
Is the language familiar to the user
Test the efficiency of completing a task
Determine areas of the app that are confusing, difficult to navigate, or are inconsistent
Observe if the site provides enough information for the user to understand the goals.
Test if users can complete their tasks successfully without the struggle
Explore the on boarding experience
Explore how to break the perfectionism block
Find out how to create your own practice
Mid-Fidelity Prototype
Using InVision, I created a Mid-Fidelity Prototype to conduct usability testing.
05 ITERATE
Affinity Map
I synthesized my test findings in an affinity map to unearth patterns and behaviors. The users experienced so much confusion and frustration; I had to resist the urge to explain and clarify. The test unveiled how I needed to improve the design; there was much work to be done!
Summary:
5/5 Users expressed that the language was not clear
5/5 Users exhibited that the navigation was confusing
5/5 Users were overloaded with too many tasks
5/5 Users were unclear about my goals
5/5 Users questioned their completion of tasks
Mid-Fidelity Updates
Usability testing findings showed the problematic areas of the design. I revised the wireframes with the recommendations extracted from the affinity map.
BRANDING
A visual language was developed embodying the brand message and attributes. I created a mood board to begin branding development.
Brand Message
Supports Mental Health
Promotes Autonomy
Encourages Self-improvement
Inspires Self-Compassion
Brand Attributes
Calming
Uplifting
Inspiring
Comforting
Loving
Brand Name and Logo
I created a word map with the brand message in mind and created a list with the word associations. From the list, I eliminated words that would disassociate from the brand message. Using the brand attributes for the the logo, calming and inspiring, and the brand name BEE, I created a visual mind map. Inspired from the visuals, I hand sketched and created vector drawings. I enjoyed the process! The final logo is a human sitting in a lotus position and the silhouette of a bee encapsulated in a honeycomb.
Style Tile
Based on the current trend of this genre of applications a wide range of gradients were used. The challenge was to create a color palette and typeface that passed accessibility requirements. I also tested these elements on some high-fidelity screens, which helped test all the components on
Using the brand attributes for color: uplifting and inspiring, I created a gradient with a teal and lavender. According to color psychology , teal is revitalizing and rejuvenating and represents open communication and clarity of thought, and lavender is calming and healing, and stimulates introspection.
High-Fidelity Wireframes and Prototype
With the UI Kit and visual design system complete, I integrated it into the wireframes. I selected some screens to test gradient options. I had to rework the gradients and update the Style Tile after testing the gradients for accessibility. After the visual design system was updated, I completed the high-fidelity wireframes and prototype.
My Takeaways
01 Keeping language relevant to all users is imperative. I was not cognizant of the language I was using in the mid-fidelity prototype, which caused the users to question the meaning of the phrases, and words that were used. To resolve this, I used the Hemingwayapp to check the level of language and then used a word map to simplify the language and verify the updates again with the resource. I repeated this cycle until the language used met the requirements. Going forward, I will verify the language before the testing phase.
02 Gradients are challenging for accessibility. Keep the gradients within the same saturation. Too much variance in saturation will be problematic for accessibility and the visual design system.
03 Goals for the project change as the users goals and motivations are unveiled through usability testing. I eliminated screens that were not relevant to the user and developed the screens that appealed to the user’s goals and motivations.
04 Mid-Fidelity Prototype testing helped verify the information architecture. Mid-Fidelity testing reveals inconsistencies early on! I realigned the information architecture to the needs and goals of the user.
Next Steps
I would continue user testing to refine the interactions with the user. Since one of the main goals is to promote autonomy, I would like to test each feature over a 7- day period to track the efficiency of the goal building features.
Due to the time constraints, I did not have time to develop custom imagery and illustrations. If I were granted the time, I would develop icons and visual imagery specifically for the app.