Zen Intellect

Type

Mobile App & Website Design

Duration

December 2022 to March 2023

My Role

UX/UI Designer

Summary


Zen Intellect is a fictional well-being and mindfulness-centered organization for which I designed a tool to help people learn about emotions and empathy. The primary target audience were parents and educators interested in improving emotional intelligence in themselves and others.

The Primary Goal


The strategy team at Zen Intellect identified a lack of general knowledge concerning emotional intelligence, along with limited understanding of self-regulation tools and techniques to improve mental health.

The goal was to design a tool that would help people better understand their emotions and practice empathetic communication towards themselves and others.



What We Learned About Potential Users


Data provided by Zen Intellect’s market research allowed us to develop interview questions to better understand potential user needs.

I observed that:

  • Participants felt limited in their ability to understand their emotions in real-time.
  • Participants expressed difficulty in effectively communicating how they feel to others.

The feedback received through research made it very clear that users would be open and willing to work towards better understanding their emotions if they had access to an easy-to-use tool to help support them.



Rafaël and Isaac: User Personas


Problem Statements:

  • Rafaël is a parent who needs a way to help his son learn about emotions and empathy because he often struggles to help his son express how he’s feeling.
  • Isaac is a K-7 educator who needs a way to help his students learn about empathy and connection because children are becoming more disconnected from themselves and others.


Researching the Competition


An audit of a few competitors' products provided direction on the gaps and opportunities to address with the Zen Intellect app.

Direct and indirect competitors included:

  • Smiling Mind: An Australian-based company focusing on providing mental health education to adults and youths through in-app information and in-school educational programs.
  • Headspace: A wildly popular meditation and mindfulness tool for adults and children.
  • Breathe, Think, Do with Sesame: An app that focuses on educating young children about emotions and self-regulation techniques.
  • Mindshift CBT: A Canadian government tool providing resources to adults and youths on coping with anxiety.



Sketching up Some Solutions


The time finally came to begin ideating on potential solutions, leveraging the data and insights from Zen Intellect's initial research, user interviews, and competitive audits.

My focus was specifically on emotional awareness and engagement.

I started to think about the main features and user flows to highlight in the initial stages of designing this app.

I wanted to design:

  • A Home page
  • An area where users can "Check In" with their feelings
  • An area where users can access information, resources or educational material
  • A summary or overview page where users can view the highlights of their experience

I started off by sketching various versions of the home page.

Once I came up with a few design ideas for the interface, placement of text, and any other important elements, I repeated this process for the remaining screens.

I reviewed the sketches for each screen and began dissecting what I liked from each to combine them into a second version.



Paper to Digital


After ideating and drafting some paper wireframes, I created the initial designs for the Zen Intellect app. These designs focused on directing users towards emotional awareness and "checking in" with their feelings.

The next step was to prepare for user testing. At this stage of the development, I had refined my designs a little more so that I could have real users test the functionality of certain features. I created a low-fidelity prototype centered around the main user flow of "checking in" with emotional self-awareness.



User Interviews - Round 1


The goal of this usability study was to observe users and gather users' feedback on the main feature of "checking in" with emotional awareness, as well as impressions of the overall app experience.

Round 1 user interviews methodology:

  • Moderated: Users were observed by the interviewer while they were asked to complete certain tasks and share their thoughts.
  • Location: Conducted remotely via Zoom.
  • Duration: 30 to 60 minutes.
  • Participants: Four; conducted individually.

Main findings from the first usability study:

  • Emotions: Display all available options on-screen and only show more information once an emotion is selected.
  • Level Up Feature: People want the feature renamed to something more recognizable, and prefer reducing the size of the categories on the page to display more information at first glance.
  • "Check In" User Flow: People want helpful information and better cues to aid in navigating this section overall.


Low-Fidelity Prototype - Version 2


Based on these insights, I applied design changes to improve overall visual display, and reorganized the list of emotions within the "Check In" feature.

Additional design changes included changing the "Level Up" tab to "Learn" and condensing the visible categories to drive users to scroll down.



Refining the Design


Next, it was time to bring life into the application. Thus began the transformation from placeholder text, colours and images, to something closer to what the finished product would eventually resemble.

Along with colour implementation, various pages and features were refined and explored as well.

A high-fidelity prototype was then created, focusing once again on the main flow of helping people "Check In" with emotional awareness.



User Interviews - Round 2


The goal of this usability study was to gather additional insights on:

  • The redesigned "Check In" feature.
  • The refined "Learn" feature.
  • The overall branding and impression of the application.
  • Additional small features added after the first round of user interviews.

Round 2 user interviews methodology:

  • Moderated: Users were observed by the interviewer while they were asked to complete certain tasks and share their thoughts.
  • Location: Conducted remotely via Zoom.
  • Duration: 30 to 60 minutes.
  • Participants: Three; conducted individually.

Main findings uncovered from the second usability study:

  • "Check In" Feature: Simplify and reorganize the display of emotions, allowing for up-down navigation rather than left-right.
  • Branding: Improve readability by adjusting the red and yellow colours. Swap out the "behaviour" icon for something more suitable.
  • "Journal" Feature: Add an option to filter journal entries by date.

Based on these insights, I improved the display of options available within the "Check In" screen and limited navigation to up-down scrolling as it was more intuitive for users.

Additional design changes included replacing the yellow and red category colours with something less aggressive and more legible. A search bar feature was added to further facilitate finding a course.

High-fidelity prototype V2.0 was then created, focusing once again on the main flow of helping people "Check In" with emotional awareness.

However, this time around, more features were built out and made available for testing.



Accessibility Considerations


During the design and development of the Zen Intellect app, several adjustments were made to ensure accessibility:

  • Clear labels for interactive elements were included for users with visual impairments.
  • Soft colours and good contrast minimized the strain on the eyes.
  • Initial focus of the home screen was centered on emotional awareness and guiding people through the main flow of "checking in" with their emotions.


Designing for Various Screen Sizes


With the app design completed, I started to work on the responsive companion website. I created a sitemap and used it to guide the organizational structure of each screen's design to ensure a cohesive and consistent experience across devices.

Although sketches and digital wireframes were created for various device sizes like mobile, tablet and desktop, only the desktop device was designed further for the purposes of this project.



End of the Journey - What Was Learned?


Main takeaways from the Zen Intellect product development process:

  • Impact: Through both rounds of usability studies, users shared that the app was actually something they would leverage on a daily basis. One quote from a user was that "this app is beautiful and so useful as a tool I could lean on throughout my day!"
  • What I Learned: Even though the problem at hand was a big one, diligently going through each step of the design process helped me come up with solutions that were feasible, useful and aligned with users' needs.


Next Steps


The Zen Intellect app could benefit from the following next steps in its development:

  • Conduct research on how successful the app is in reaching the original goal – to help people learn about emotions and empathy.
  • Add more educational resources for users to learn about emotions and empathy.
  • Provide incentives and rewards to users for successfully leveraging the tools available within the app.

Let's Work Together