User Research, Personas, Content Design Strategy, Wireframing, Prototyping, Branding, and Web Development

Michigan Cares

70%

97%

Source: Pew Research Center, 2019

Source: The Impact of COVID-19 on Pediatric Mental Health

of teens say anxiety and depression is a “major problem” among their peers.

In 2020, mental health claims from teens increased by 97%.

Expand the use of Michigan Legislature House Bill 5418

THE CHALLENGE

What is Michigan Cares? Thanks to funding early in the pandemic, Michigan Virtual created and offered a free social emotional learning program to districts, called Michigan Cares, to support school districts, educators, parents, and students through a customizable, scaffolded curriculum that address real issues that K-12 students encounter every day.

The goal? The primary focus is to bring awareness through out the K-12 ecosystem and reach 100,000 rostered users by March 2022.

Districts across the state of Michigan have $6 billion of COVID relief funding to spend, the largest single influx of federal education dollars in state history, which schools are using to address the youth mental health crisis.

Who is our audience?

RESEARCH

My process began with some user research and analysis of the existing homepage. To better understand our target audience and users, I also used a combination of interviews, product surveys, user behavior analysis, and competitive analysis. Utilizing these methods allowed me to empathize with current struggles and have a clear understanding of our users wants and needs.

Behavior Analysis

User Surveys

We evaluated the traffic of the past 6 months to understand the behavior of users on the site and find any overall traffic trends. We then started looking for data and trends, we noticed that the current SEL/michigancares page had a high bounce rate of 89%.

In general, the data indicated that users were experiencing confusion around the value and purpose of the site. Without a clear understanding of what to do here or why, they had little reason to stick around.

There was a large trend of users continually using the back button or the home button to return to where they were previously or the home page.

This highlights potential problems within the design and usability of these pages and an opportunity to better deliver content to match the user’s purpose.

We did see some click progression to Free DEI program section but user progress stopped by this point. If we tested placing calls to action at the bottom of this page or throughout the content of this page, it may help with the overall site retention and bounce rates.

The current website experience wasn't meeting the program goals and marketing needs. We focused on surveying users that had completed at least one lesson. The goal of the survey was to asses their pain points, gather feedback and innovative ideas. Almost everyone suggested reducing redundancy in the experience and being more educational throughout the journey.

Why did you choose to register to use the Michigan Cares?
What has been your favorite aspect of Michigan Cares?
How often do you use the Michigan Cares?
How do you plan to use the Michigan Cares going forward?
Do you have any innovative ideas on how to implement Michigan Cares in your school or district?

Competitive Analysis

Our goal in this competitive analysis was to identify strengths, weaknesses. I created a market positioning chart, looking for gaps in the market among competitors. The intention was to find common patterns in order to highlight growth opportunities for Michigan Cares.

One of these growth opportunities was how Michigan Cares positions itself apart by providing personalized programs to students from all grade levels. It also offers a level of customization not found in other programs.

PROFESSIONAL DEVELOPMENT

CUSTOM GRADE LEVEL LESSON SEQUENCE

CASEL STANDARDS FRAMEWORK

CUSTOM DATA TRACKING & REPORTING

RESEARCH

USABILITY PROBLEMS

Lack of progression

Increase awareness and focus on customization

SOLUTION

With the help of the research team, I created four user personas to better understand who my target users are, their common pain points, shared needs, and opportunities. Having a good grasp of the users needs helps me create design solutions aimed at a specific messaging.

After the initial research, we decided to engage our audience by focusing on students and their current struggles brought on by the pandemic. Using our previous research we used personas to build into each user story and how we can help them connect with students pandemic related struggles.

How could I translate these pain points into design opportunities?

Personas

ADAM

STACY

He is responsible in finding affordable options for online learning for his students and professional development for his educators.

Pain point: He needs an evidence-program that allows staff to customize the scope and sequence of lessons assigned to students based on individual needs.

She is overwhelmed and has spent too much time searching for a free SEL course, to finally cross this off her checklist before the school year begins.

Pain point: She needs quick access to a no-cost professional development curriculum to meet the required coursework for her social emotional training.

Pain point: An easy to use platform that allows her to find lessons based on each individual student needs and grade-level.

Pain point: He needs the ability to easily find free resources for support and a way to ask for help within the school community.

PRINCIPAL

TEACHER

CAROL

She is a school counselor who guides students to take the right coursework. She needs social and emotional content that is mobile-friendly, so students, parents can register and access it on their phones.

COUNSELOR

ERIC

He is the parent of a student who has fallen behind and is exhibiting behavioral changes. He is already concerned but unsure on how to find help.

PARENT

SOLUTION

No cost resources for educators.

EASY TO FIND CUSTOM PROGRAM INFORMATION

Highlight how educators can access a library of over 1,300 digital lessons on critical SEL topics, including mental health, stress management, racial equity, drugs and alcohol, nutrition and wellness, social media use, bullying, respect, academic success, and more.

Highlight how Michigan Cares curriculum is customizable and accompanied by companion programs for parents, educators, and administrators — which include the ability to assign, track and monitor courses so that educators can best support students.

Find alignment between content and design

IDEATION

With the design opportunities in mind, we moved forward to ideation. There was a lot of collaboration between subject experts, copy writers, before I began to crease a design strategy before digitization of the web page and other design assets. I explored formatting and hierarchy with a focus on storytelling and emotional impact.

We started our iteration process by creating specific content questions we found from our research with a focus on identifying the previous content gaps and providing an actionable solution based on each user.

With feedback from users and a better understanding of the content, our team decided to focus on the core messaging, easy content progression, and actionable solutions to each user pain point.

Present the problem in a visual way. Use statistics and motion to create visual interest.

Categories for content available within the program or it can link out to resources and other SEL related content within Michigan Virtual.

Impactful heading. We need to make sure to create a touch point for each persona. Add a CTA to register or additional resources with opt-in.

Obstacle: We wanted to share new study cases based on current relevant topics, like the pandemic but time constraints didn't allow us.

We were able to repurpose a previous SEL case study targeted towards Principals but with updated visual information.

Use empathy and connection to present the problem and offer a solution. Possible CTA for form,

Wireframes

Content Structure

IDEATION

Sparking emotion through visual storytelling

DESIGN

The Mission: It takes a village to raise a child and the work to help guide students towards being more optimistic, understanding, and empathetic doesn’t need to end when they step into a school environment.

TYPOGRAPHY

FALLBACK TYPOGRAPHY

BUTTONS

ICONS

COLOR PALETTE

Experience goal: Show users why to care. Through a series of iterations the direction for this brand was one focused on a holistic approach to social emotional learning. Parents and communities play an important role in developing life skills and I wanted to help the user understand the "why" behind this program, how urgent is the need to help our students, and what steps we can take to make this happen.

LAUNCH

Telling the full visual story

After development, I added animations and transitions to the design to give the site a more complete look and feel. eye-catching, and informative. Contrast was also important, so I designed each section separately and treated them all as their own environment. The bottom of the landing page features more white space to contrast from the above, and lets the consumer dig into details and a call to action to register or learn more.

Because of the depth of the topic and amount of information, I decided to simplify the visual approach and be very intentional with the overall user journey. As the lead designer, I created design systems for future supporting content, social media and marketing, as well as collateral for other awareness efforts like conferences.

MICHIGAN CARES WEBINAR

MICHIGAN CARES COURSE

Created optimized templates to use for supporting content through out the Michigan Virtual site.

Supporting Content

Awareness Campaign

LAUNCH

SOCIAL MEDIA PAID CAMPAIGN

I was responsible for creative direction, design for ad campaigns, full set up, targeting, and weekly optimization. I use a combination of methods, like A/B testing, and metrics, like impressions, engagement, clicks, and conversions, to reassess the ad strategy and adjust it as needed.

EMAIL MARKETING CAMPAIGN

PULL-UP BANNER DESIGN

I created a design system to be used through out different platforms and assets. In this case, I created a new email campaign and a series of Michigan Cares branded templates that can be reused for future awareness efforts.

PREVIOUS MICHIGAN CARES EMAIL

ACTUAL MICHIGAN CARES EMAIL

TEMPLATE EXAMPLE AND SECTIONS

We quickly began to see improvements in our key metrics.

PROJECT IMPACT

7,870,132

100,000

After a few weeks of launching our new awareness campaign, we saw an increase in session duration, showing that users were spending more time on the page. The rebranded program and awareness strategy was launched in October 2021. In early 2022 Michigan Cares won the Gold Award for Total Digital Marketing Program by EduADAWARDS.

GOAL 2,000,000 IMPRESSIONS

REGISTERED USERS BY MARCH 2022

Key takeaways

REFLECTION

I learned how essential maintaining good communication is with my team, especially when asking clarifying questions to remove blockers and balance pressing deadlines. Collaboration is key, especially when working with subject-matter experts to understand complex topic such as social emotional learning and mental health.

As my first full-scale product design project with Michigan Virtual, I learned how passionate I am about this work, and was truly fulfilled in knowing I was making a difference in someone's life.