SEPTEMBER 2017 — FEB 2018

Evidence-Based Courses

Evidence-Based Courses (EBC), is a nonprofit research project based out of UCSB, that is funded by the U.S. Department of Education.

The goal of EBC is to use rigorous science to create innovative training programs that empower people to dramatically improve their lives, with a current focus on high school students.

ROLE

Six-month consulting engagement, where I was the sole designer on the project. I was responsible for all design work (product/UX, visual, and website) and the user research strategy.

Results Summary

10 schools Piloting App
NSF grant from US National Science Foundation
Nationwide Roll-Out Planned for Fall 2019
Featured in Time Magazine's special edition, Fall 2018

SEPTEMBER 2017 — FEB 2018

Part I

UX & Product Design
Case Study

I became involved in this project when a friend introduced me to
UCSB Center for Mindfulness and Human Potential’s (CMHP) Director of Research, Michael Mrazek, Ph.D. Being a regular meditator myself, the idea of bringing science-backed meditation techniques to high school students piqued my interest. I began working with the founding team in September 2017 and led them through a UX and Product design process that I document below.

Note

This case study covers a large year long project in detail.

If you are looking for a shorter summary style case study please read my case study about my work with Evidence Based Courses here.

Problem

Teenagers today face intense emotional challenges. Most schools provide little to no training to address these challenges  — resulting in lowered grades and lower school rankings.

In-person mindfulness programs have been shown to reduce stress and help students better regulate emotions. However, these programs are expensive and difficult to scale.

The EBC Research Team Michael Mrazek, Ph.D, Jonathan Schooler, Ph.D, Alissa Mrazek, Ph.D, Casey Cherolini, David Cynman, Lefeba Gougis, Jordan Reese.

Initial Research

UCSB CMHP’s Director or Research, Michael Mrazek, Ph.D, led a study, funded by the U.S. Department of Education, which demonstrated that mindfulness is associated with lower stress, higher self-esteem, and greater happiness among middle school and high school students. His team also discovered that even just two weeks of mindfulness training could improve working memory capacity and standardized test scores of undergraduates by reducing mind-wandering. This research has been featured widely in the international press, appearing in dozens of outlets, including the New York Times Magazine, Scientific American and Forbes.

This research led to the idea of rolling out the benefits of mindfulness training in a more scalable way.

Product

Hypothesis

By creating a scalable mobile web-based training program (that helps high school students focus their attention and regulate their emotions better) we can help more students achieve both higher well-being and greater academic performance.

Success Criteria

I led Michael and his team through the process of defining a set of success criteria based on our problem statement.

Ideation

Before jumping into sketching, I worked with Michael and his team to map out the user experience flow.

I then sketched out different ideas and reviewed them with the team.

I then created high fidelity wire frames (examples below in the next section), and I designed a usability test protocol. We usability tested the designs with a half dozen teachers and almost a dozen students.

I made updates based on the learnings, and then jumped into the visual design phase.

Wireframes

I created wireframes based on our user experience flow map, the ideation sessions, feedback from design reviews with the team, and a spec from Michael. I then iterated on the wireframes multiple times based on insights from usability testing, interviews, and additional design reviews.

Usability Testing, Research, MVP launch and

What We Learned

The majority of the issues we found were around copy and viability rather than UX issues. The word mindfulness was a barriers for many students. Students explained: “I don't like mindfulness,” and, “I wouldn't want to do this.” Multiple students shared their skepticism of the course. One student’s response to the sign-up page was: “The copy doesn't seem genuine,” another student mentioned that they don’t trust “Pseudoscience.”

I designed an interview and usability testing protocol that
myself and the team used to facilitate our sessions.
An example of the analysis of our research sessions.
Content Updates
UX issues

Overall, the workflow was intuitive for students. Two minor UX issues came up: the modal explaining how to answer a free response question was confusing because they hadn't seen the question yet, thus they had no context for what it was describing. Three students thought that the moon in a background image was a button.

UX Updates
Michael Mrazek’s Description of
My User-Focused Approach and Guidance
“….[Chris] did an excellent job of executing our design work, but also helped us apply Lean methodologies and start-up best practices to our entire project. He advocated for usability testing and for continuously meeting with users, which ended up saving us development time so we could create a better product on our tight timeline. ”
Michael Mrazek, Ph.D.,  Director of Research at CMHP

MVP launch

The app was launched at two high schools in Illinois in Spring 2018.

Learnings
  • Students wanted a native app rather than a mobile website.
  • Music meditation was a hit, and they liked being introduced to new artists, however, they wanted to be able to pick the genre.
  • We didn’t give some of the teachers enough guidance on how to frame the course to students or how to create structure around it in the classroom. In those classes, only a small fraction of students actually engaged with the course in a meaningful way. However, in the classes with more structure, students had much more meaningful engagement that made it possible to get a large amount of useful feedback about how to improve the content of the course.
  • Both schools want to continue using the app in the fall.
Follow-up Steps
  • It was clear that building a native mobile app would increase engagement. I updated all the UX and visual designs to optimize them for iOS and Android. The engineering team started work on a set of native apps using react native.
  • Michael and team came up a with a plan to better on-board teachers. They made on-boarding materials that help teachers introduce the program to students. This was the lowest hanging fruit for a dramatically better launch in fall. In the Spring launch, many teachers had no idea how to sell the app to students and created almost no structure around the course, which led to students not taking it seriously or staying engaged.
My designs for the MVP sign up screen
The new teacher on-boarding material
created by Michael and his team.

Results

  • Launched to 2 schools in Spring 2018
  • Both schools signed up to continue on for the Fall Launch.
  • Eight more schools on-boarded and launched in Fall 2018, with a nationwide roll-out planned for 2019.
  • In recent feedback, students have shared that they love the format of the music-based meditations. They find it easier than other relaxation apps they have tried, and report that they feel more equipped to deal with anxiety as a result.
  • Featured in the introduction to Time's new special edition released fall 2018.
Featured in Time's 2018 Fall special edition
Highlights of the Fall 2018 Launch
  • We launched with a newly built native app based on my updated designs.
  • Michael and the team rolled out the program to new teachers using a new teacher on-boarding plan, with new materials based on our learnings from the MVP launch, giving teachers real guidance about how to frame the course to students and how to create structure around it in the classroom.

Part II

AN OVERVIEW OF MY

My Visual Design Process

I like to start my visual design process on a new product by understanding “why” the company exists and what its founder's vision is. I like to think of brand as the reputation a company has of delivering that vision. Thus the focus should be on the vision and “why,” not on the "brand." The brand is an result of delivering that vision in a congruent and thoughtful way.

Michael’s vision is to use rigorous science to create innovative training programs that empower people to dramatically improve their lives.

EBC's current mission is to achieve this by creating a scalable mobile web-based training program (that helps high school students focus their attention and regulate their emotions better) to help students achieve both greater well-being and higher academic achievement.

Note

This case study covers a large year long project in detail.

If you are looking for a shorter summary style case study please read my case study about my work with Evidence Based Courses here.

1

EBC’s Design Tenets

As I dug deeper with Michael and his team into how they saw this working, a theme started to appear: They felt strongly that they didn’t want the app to feel like typical and trite k-12 software the students were familiar with. They didn’t want it even to feel like it was something coming from the student’s teacher or school. They wanted it to feel like it was their own; ideally, it would feel even a little rebellious. But at the same time it should also be a calming and relaxing experience. It shouldn’t be so edgy that students are distracted by the visual design. And finally, he wanted it to feel inspiring and fun. This is where his idea to include interviews with professional musicians really shines – allowing students to hear from people that inspire them.

Based on the above conversations, we settled on the following Design Tenets:

To achieve this goal, Michael and his team planned to include interviews with famous musicians to provide inspiration; the visual design would buck the traditional k-12 colors and style to make the app feel rebellious, but the visual design style wouldn’t be so edgy that the design would distract from the purpose of the app: helping students de-stress, regulate emotions, and feel a sense of calmness.

2

Exploring a Visual Mood and Style


After we had the above-brand tenets as a lens to evaluate possible visual design directions, I gathered up examples of education course and meditation software design for both UX and visual design inspiration. I augmented this with a collection of modern visual design examples to explore.

Below are the some of the examples of different software applications and sites I reviewed with the EBC team.

I looked at education course and meditation software for UX and visual design inspiration.
I also presented a wider set of modern visual design styles to help the team discuss and choose a direction to go in.
3

Visual Design Exploration

Initially, we went with a light and bright visual design direction. Michael and the team liked the bright blues and uplifting yellows and oranges. For the video lesson UI and question UI, I went with a darker background to allow the focus to be on the video and the lesson questions.

Landing Page
Desktop Web Sign Up
Interaction Details
Web Sign Up
iOS Sign Up
Android Sign Up
Question UI
Lesson UI – Musician Interview
Question UI
Answer UI

This project didn’t have scope for much animation design, however, I wanted to give the feedback designs a small animation that would inform the send action and give a some delight.

Student gives feedback
Animation on submission
Daily Beat Complete Screen
Feedback Prompt
User Skips
Daily Beat Complete Screen

Final Visual Designs

We ended up being dissatisfied with the light color scheme. I iterated more and started to explore darker color schemes at Michael’s suggestion. We collaborated back and forth on different schemes – sharing and trying ideas.

Eventually we landed on this beautiful dark scheme with splashes of bright green highlights.

After multiple iterations I was able to reduce the app’s UI to a very simple and uncluttered design. The end result is an elegant and intuitive interface that uses small splashes of bright color to bring out the modern look we were aiming for.

The Evidence-Based Course's Logo

I wanted the logo to represent both education and mindfulness. Eventually, I landed on a design that both pays homage to a traditional mindfulness symbol, a lotus flower, and an homage to an American symbol for education – a book. In this design, instead of flower petals, the lotus design is created using book pages. It’s an intentionally subtle tribute to the lotus flower.

4

The Teacher Interface

The teacher interface needed to display much more information than the student interface. The goal was to keep the interface as clutter free as possible while still retaining all the needed elements. We went back and forth on which elements could be cut and which data needed to be kept. Eventually we landed on the design, below.

I used tables and other best practices to ensure this data was scannable and digestible. We kept a light modern color scheme for the teachers, as the goal was to have the website feel professional instead of rebellious and young.

The view after the first in class lesson has been given
The view after the first in class lesson has been given
5

Design Library & Working with Engineering

Below are a sample of various EBC design library elements I created for our engineers, Pete Carr and Alex Delagard. Throughout the project, I worked closely with Pete and Alex to ensure they had a chance to poke holes in my designs early and often, and I regularly got their feedback from an engineering perspective.

Alex Delagard
Software Engineer
Pete Carr
Head of Engineering
Design Library Elements
Typography elements
Teacher form elements
Native app button states
Native app buttons and tab states
View Other Case Studies
Want to know more about my process? View an overview here or take a look at one of the other projects I documented as a case study.