Bringing wellbeing to the masses, one educator at a time
The Contentment Foundation (“TCF” to conserve your visual real-estate) is an impact-driven organization that thrives on creating meaningful change in the world. They offer child and adult-centered wellbeing curricula to 60+ schools internationally.
With users all over the world, ranging from developed countries like the U.S. to less developed countries like Bhutan, factors like language, technology, internet connectivity, and culture often become barriers for users onboarding to the platform. TCF sees an opportunity to improve the School Platform’s onboarding experience and reduce friction for non-tech savvy users.
TCF’s current onboarding process (19 steps) lacks support and efficiency, leading to multiple support requests, friction, and burnout for users during the initial onboarding flow.
High-fidelity prototypes of streamlined onboarding process (25% reduction in steps) for administrators and teachers with an emphasis on transparency and support.
We utilized the Double Diamond Design Process as the foundation of our divergent and convergent approach to facilitate an iterative design journey.
.png)
To kick off the project, we leveraged different research methods to better understand the current user experience and competitive landscape.
For this project, I wanted to place an emphasis on interaction design, and more specifically, how I could ensure that the structure and behavior of the onboarding flow would create meaningful relationships with users and provide thoughtful behaviors to their interactions.
After discussing it with my team, I evaluated the current onboarding flow's interaction design based on Jakob Nielsen's 10 Usability Heuristics. Throughout the design process, I referred back to these insights to support design decisions.
As a team, we then took a look at TCF’s main competitors since they operate in such a niche industry. Through a feature analysis, we verified TCF’s strengths and potential opportunities for growth.
A quadrant analysis helped us visualize and identify TCF’s position in the market, as well as how we can capitalize on their strengths to differentiate them amidst a competitive market.
In order to understand the current friction points on the School Platform and uncover potential opportunities for improvement, we conducted a series of usability tests of the existing onboarding flow with 4 users. Here are some of their thoughts:
With useful insights from the usability tests, we sought to dive deeper into users’ perceptions of the School Platform and what they think about the current onboarding flow. With that in mind, we conducted user interviews with 8 potential users, all of whom are educators.
Based on our user interviews, we created an affinity map to collaboratively analyze our findings. To do so, we first organized all of our research findings (rainbow-colored sticky notes) under logical categories (black sticky notes). Once we were happy with the groupings, we synthesized them into key takeaways (turquoise sticky notes at the bottom of each column). Now I know the image below might be a bit overwhelming… so I’ve included an overview of our key insights right next door!
To further understand and build empathy for our users’ behaviors, needs, goals, and pain points, we honed in on two personas based on our research — one for Administrators, and another for Teachers, two of TCF’s most common target users.
Without further ado, meet Michael, our first persona. As a School Principal, Michael prioritizes his team’s emotional wellbeing and seeks to leverage the benefits from the Wellbeing Curriculum as soon as possible.
To visualize Michael’s pain points when using the School Platform, we leveraged our research insights to create an experience map.
Once we understood Michael and his experience a bit better, we distilled our insights into the following problem statement:
Carla’s empathetic, passionate about her students’ wellbeing, and seeks to teach her students about mindfulness in a fun and interactive way.
We then created an experience map to visualize Carla’s pain points when using the School Platform.
As Carla’s goals primarily revolve around her students, we synthesized our research findings into the following problem statement:
Based on our client’s input as well as user feedback, it was evident that the Admin User’s onboarding flow had the most friction points. Therefore, we decided to prioritize the admin user flow for the scope of this project, since we knew that the teacher / staff user flow would naturally branch off of it.
While the current onboarding process serves its purpose, we had tangible evidence that users were facing multiple issues completing it since this was also a pain point for the client, who was receiving multiple support requests per week during the initial onboarding process.
To help us clearly frame the problem at hand and foster an environment for innovative solutions, we created the following How Might We (HMW) statements:
To promote transparency and engagement with our client, we ran a 2-hour design studio session with them over Zoom (considering our new remote-working normal).
The purpose of this session was to rapidly ideate potential solutions to our HMW statements in a creative and collaborative environment. Once everybody posted their ideas on our collective Miro board, we used the dot voting method to help narrow down the optimal solutions.
After a fruitful session of ideation and, in my case, some wonky drawings of apples during the warmup, we came up with an array of out-of-the-box ideas.
Once we all voted for our favorite features using virtual sticky-dots, we listed the favorites and began prioritizing them. Based on TCF’s goals and being conscious of the project’s time constraints, we prioritized essential features with lower design effort.
Individually, we began sketching out some wireframes based on the shortlist of features we selected. Once we reviewed everyone’s wireframes and collaboratively voted on our favorite interpretations of each feature, it was time to digitize.
With a solid foundation, we began building out the key screens in Michael’s user flow. At this stage, our goal was to keep the details at a minimum in order to test and understand the user’s mental model as they navigate these screens.
We conducted 4 usability tests using the low-fidelity prototype, which provided a wealth of insights to help strengthen the foundation of our prototype. Here are a couple of them!
Considering our valuable testing insights, we iterated upon our low-fidelity prototype and made adjustments to address the issues our users pointed out. We then conducted another round of usability testing, from which we gained the following key insights:
As we iterated to the high-fidelity prototype based on feedback from our usability testing, we incorporated TCF’s branding guidelines (e.g. logos, color palette, imagery, and typography). This allowed us to create screens that would “feel real” to users and enable more in-depth testing.
Let’s see how far we’ve come! You may recall there were 19 pages originally, but our proposed user flow has reduced this by 25% to just 14 pages.”
To ensure our client would have all the necessary tools and information to implement our recommendations, I took the lead in creating a design system. Serving as the single point of truth, the design system below is a library of reusable components and visual elements used across our final prototype. This will provide consistency and transparency for stakeholders working on this project down the road.
I hope you didn’t think we forgot about Carla, but if you did, you’re in for a surprise! Before we jump into the good stuff, let’s remind ourselves of Michael’s and Carla’s problem statements.
For this project, we focused on a desktop-first prototype based on our client’s input that the majority of their users access the School Platform via their laptops / computers.
However, we wanted to provide TCF with a sneak peek of what the School Platform could look like across different devices and screen sizes as they continue their mission to bring wellbeing to the masses. Therefore, we created high-fidelity snapshots of the Guided Tour page across three viewports: mobile, tablet, and desktop.
Reflecting upon the past 2.5 weeks, I’m so grateful to have had the opportunity to work on such an impactful project with the incredibly passionate team behind TCF. I’ve learned so much about the positive impact that TCF is making within the educational sector and feel humbled to have supported them on their mission.
As with any project, there’s always room for improvement based on insights and learnings! Given more time, here’s what we would do:
