UX DESIGN • BRANDING 

HLC-Logo

CLIENT: Learning Ovations

ROLE: UX Designer, UX Researcher

TOOLS USED: Adobe XD, Sketch, Miro, Usability Hub

TIMELINE: 3 weeks

Adding an interactive video feature for children and bringing home a school connection on my Home Literacy Coach for an effective parents' progress monitoring tool. 

pexels-photo-1250722-3
photo-1520923614754-bd816f5b0210

PROBLEM

With distance learning becoming the new normal, children are falling behind in their academic growth, causing parents to play a bigger role in their child's education and affecting their own responsibilities at work. 

Screen-Shot-2020-08-04-at-11.48.49-AM

CURRENT DESIGN

My Home Literacy Coach (MHLC) is a web-based application that provides an individualized guide and learning resources for parents and caregivers to continue children's growth in reading. 

Currently, we have early adopters who are using MHLC as a resource, but have found that it has been difficult to use due to lack of time with their child and the lack of verification from teachers. Parents value the connection with teachers when their child were in school. 

MHLC-Cover-Mock

MY APPROACH

An interactive digital product where children can watch engaging videos and learn academically, which allow parents or literacy specialists (teachers) to review their child's work and provide real-time feedback. With this new application redesign, it demonstrates an individualized chart for every child so parents can see what instructional focus they can work with their child at. 

 

01 - Research & Discovery

SCHOOL'S OUT, NOW WHAT? 

With the coronavirus pandemic hitting in March 2020, we needed a plan to support students. We turned to distance learning like many other edtech companies did and are now solving the problem by implementing My Home Literacy Coach. 

 

USER SURVEYS & INTERVIEWS

Using a user  survey to grab a better understanding of my users who were parents of K-3rd grade students, I wanted to grasp a better understanding of what the current user experience is like on My Home Literacy Coach (MHLC). Particularly, I asked these questions to deepen my own understanding of how users are engaging currently on MHLC. 

  • How are current users using MHLC?
  • What are barriers to using MHLC?
  • What is the main benefit from using MHLC?
  • What are important features in MHLC?
  • How can we improve the MHLC for you?
80-percent-1
75-percent
20-percent

I was able to recruit 3 parents from my pool of 25 users who filled out the survey. These parents all match the demographics that I was looking for: parents who have been familiarized with at distance learning products and are currently sitting at home with their child. I conducted these interviews for 45 minutes over Zoom. These takeaway quotes helped me framed my key answers to my questions. 

Amy-Quotes
James-Quotes
Rochelle-Quotes

KEY INSIGHTS FROM INTERVIEWS

Some of the interviews confirmed my initial assumptions about My Home Literacy Coach. In conclusion, there is a strong need for a digital product for parents to use while they are at home with their child.

  • Parents are looking for something that will keep their child occupied while they are working on other responsibilities. We do not want to make teachers out of parents. 
  • Parents love verification and feedback from teachers. Since kids are no longer in school, parents are missing that teacher-child connection and the consistent feedback that parents receive.
  • Children are now sitting at home watching more television than ever. How can we incoporate something that is educational and make it academic? 

How might we create an engaging and interactive learning platform so parents can feel assured that their child is making reading gains

How-Might-We-New-frame

HOW MIGHT WE

Using the How Might We (HMW) brainstorm method, I reformatted the problem that I am solving with possible open solutions. This process helped me set up the foundation for the define process by narrowing my scope of the project.

There are a lot of fresh ideas in my mind at this point.  I explored different avenues of possibilities and settled on two main questions that I wanted to answer: the structure of key information and inviting UI elements that will captivate our audience. This activity helped me amp up the good and question assumptions that I had moving forward. It helped me identified any unexpected resources and break down the point of view of the platform in different pieces. 

COMPETITIVE ANALYSIS

I looked at two main competitors to conduct a quick analysis. After quick comparison, I found that both Freckle and Khan Academy offers engaging videos for children to watch and learn from. However, none of the programs hold students accountable for their learning.

There is a lack of teacher-child connection, as there are no follow up comments from teachers. Children do not know if what they did was correct nor do they know how to apply the concepts that they have just mastered. 

Competitive-Analysis-MHLC
02 - Define 

USER PERSONAS

Creating these user personas was helpful in gathering my target demographics and audience. I knew this application would resonate with working parents who are supporters of their child's education. These parents desire interactivity and engagement, as well as verification of completion of their child's progress. 

It's important to note that these personas are not educators simply because we do not want to make teachers out of parents. 

Judy-Konley-Persona
Katelyn-Peters-Persona

MIND MAP IDEAS

Using Miro, I created a digital whiteboard of a mind map to help me narrow down my possible solutions to include as many features without sacrificing necessary information.

Thinking through about what we can optimize on this site and how we can also support parent usage on MHLC through live chats, message centers, and in-place help. I included a student-facing component as a category in there and added details of what that could look like.

Now things were getting interesting and I was excited to start this project! 

A CLOSER LOOK AT A USER'S JOURNEY

I created a journey map to help me understand what would a user go through on this platform and what their touchpoints might look like across the website's navigation. She goes through four main touchpoints: Log in, Assess, Explore, Engage. 

Her pain points include: 

  • the high level of preparation work she has to do to create the activities (cutting, assembling, etc)
  • the lack of engagement from her daughter after a long time 
  • the minimal time she has to spend with her daughter completing the activities as Judy has a full-time job as well 
This customer journey map was created to help me understand the pain points that this user would go through as she is navigating through the platform. She goes through four main touchpoints: Login, Assess, Explore and Engage. Through these four touch points, there are three main pain points I noticed. The quizzes may seem too hard for her child, the list of activities are overwhelming for her child and requires a lot of preparation. In addition, she is finding that after preparing the activities, the child will need her at the table as they are working to help guide them. She is looking for something more independent for her child.
This empathy map was created to help better understand what Judy Konley is thinking. Some main key takeaways I had from creating this mind map was that she thinks that easy prep activities are going to be better for her daughter. That way, she can spend the rest of her time managing her other responsibilities in her graduate classes and as a mom.

EMPATHY MAP

By creating this empathy map, I was able to identify how Judy felt and how she viewed the at home learning experience from her perspective. She enjoys the new activities, however there is a lot of prep that falls on the parent and that isn't a pleasing experience. Parents prefer "easy" and they seek interactive learning experiences for their child, such as connecting with a real teacher. 

USER STORIES

By ranking my user stories by priority, I am able to create user flows to show how users would accomplish each tasks. 

  • As a new user, I want to create an account for my child so I can view all data on My Home Literacy Coach
  • As a returning user, I want to see a list of recommended activities for my child so I can see what activities are appropriate for their reading level.
  • As a returning user, I want to verify that my child has completed the activity so I can review their work at a more convenient time.
  • As a returning user, I want to allow credentialed specialists to review my child's work so I can  receive verification and feedback based on my child's progression.

USER FLOWS

After creating my user stories, I was able to separate them into different user flows to begin my ideation of an intuitive interface. Showing this process helps me evaluate and optimize the user experience by organizing what the user takes priority on the site. I used these user flows to help me determine what screens are working, what's not and what areas need improvement. 

User Flows-MHLC-Recommended Activities

03 - Ideate

ONGOING ENGAGEMENT

Starting off with some quick notes, I was able to write down a few key questions that I had while preparing to design the interface, focusing on the landing page and the user experience. One key word that I highlighted was "engaging". I added some key features I wanted to explore while sketching and designing. 

MHLC Notes
Crazy-8s

 

SPRINT SKETCHES

Using the crazy 8s sprint exercise, I was able to come up with various designs for a single screen. I wanted to outline some different sketches of the video engagement piece here, meanwhile providing in-place help and directions for parents to follow. 

SOLUTION SKETCH

This was my final solution that I came up with and I illustrated each screen with notes for myself and my stakeholders. I wanted the process to be intuitive, mimicing what we have on MHLC currently. The process flow should start children of by taking a quiz, accessing quiz results, receiving individualized pie chart of instructional time and activities, to the final activity video page and submissions page where parents can verify the children's work or request for a literacy specialist to review their work. 

Solution Sketch
By creating this site map, this helps me visualize the interconnections of the different sections and pages in a way that will make sense for your users.

SITE MAP

I created a site map to help me layout the information architecture around the site. There were a lot of screens that I had to account for. By breaking these screens down into sections, it was easier for me to follow the hierarchy and order in which particular designs need to be iterated. 

WIREFRAMES

In my first wireframes, I designed the screens to stick with the current flow of MHLC. I wanted to introduce parents to the activity screen with the least amount of confusions. Below are two main pages that will be the meat and potatoes of my work. I wanted to offer a way for children to independently submit assignments so I added some directions on how to do this using visuals. 

Activity-Video-Page wireframe
Submissions Wireframe

REDESIGN OF LANDING PAGE

With our current landing page, it is confusing for users to understand the audience and purpose of this application at first glance. To answer my How Might We question, I knew I had to redesign our landing page to make it more intutive and captivating for parents to scan and look for key information that tells them a little more about MHLC. 

WF-Landing-Page-1
Colors-MHLC

ADHERING BRAND EQUITY

Before I began my high fidelity mockups, I had to determine what colors and font combination to use. I was able to adhere to our original brand colors by incoporating the orange, green and blue. I also added a few neutral grays in there to demonstrate a web-based application and to neutralize the bright color palette.

IMMERSIVE EXPERIENCE THROUGH TYPOGRAPHY

Our current MHLC website is using Helvetica, which isn't exactly the most exciting font to look at. After research with our competitors, I noticed that most edtech websites add blocked text with a fun, friendly body text. I ended up choosing Gilroy as the heading text to add approachability and Avenir Next as my body text. 

I kept most of the buttons and the font size bigger for our target audience. Larger arrows and buttons are easier for younger groups to use. If children will be on our platform, I wanted to make the experience more accessible by incoporating audio or a video transcript that can be read to them rather than just adding huge chunks of text. 

MHLC-Fonts-Combination

04 - Prototype

After implementing the changes after my final wireframes and using our design system, I created a high fidelity prototype to enhance the user experience on MHLC. I presented these mockups and prototype to my team members at Learning Ovations and they have associated the video-assignment feature to be the most important feature.  The approach I took was deemed as successful and parents were able to utilize MHLC with assurance knowing that their child's work can be reviewed by actual teachers! 

DIRECT INFORMATION

Users are captivated by the various CTA buttons across the landing page. I kept the design here sweet and simple by highlighting what MHLC does, who it is for, how it works, and what we offer. I included a demo video on the front page so users can preview the platform before deciding to sign up. 

Classic-Home-Desktop
Activity-Page

FOSTERING TOGETHERNESS

This activity page was the meat and potatoes of my work. I wanted to also encourage parent engagement as much as child engagement. Children have the ability to 'submit' their assignment through various multimedia. Kids are more likely to gravitate towards something that is easy to read and these vibrant colors help do the trick! 

I included objectives and kid-friendly "I can..." statements as many teachers in classrooms do today at school. I wanted to incoporate a little piece of school so children are seeing something familiar at home. The green tooltip is for parents to understand the meaning of objectives and how teachers use these as an anchor in their daily instructional practices. 

05 - Testing & Iteration 

CONSISTENT COLORS

I conducted a preference test on Usability Hub and 90% (out of 20 participants) found that matching the colors of the different activities to the pie chart was visually more pleasing. It was easier for them to find the information that they needed and allowed them to direct to the activity card to see where children should spending their instructional time. 

A/B TESTING 

70% of participants preferred the green CTA button at the top of the page and indicated that the CTA message was easy to understand when compared to the other design on the right. I wanted to incorporate the word "free" as some said that was eye-catching. However, I did not want to change it because the majority of votes said so. I went back to my original question:

  • Which message would be clearer for parents?
  • Who is this platform for?
  • What message do I want to convey to my users?

Because I wanted them to understand what they were signing up for and understand that this is a free program, I made a simple fix by adding the word free under the header on the landing page and keeping the green and blue CTA buttons separate. 

Letter

Let's check it out!

Learning and Next Steps

COLLABORATE WITH STAKEHOLDERS

This was my first design sprint as a solo designer and researcher so I had to carry this project out from beginning to end. I was endlessly speaking with different stakeholders to see what the best user experience is and gaining their insights on business needs and perspectives. It is so important to gather all your internal and external stakeholders to stay organized. 

TEST THROUGHOUT THE ENTIRE PROCESS. IT'S ALL ABOUT THE USERS.

I was able to test throughout this project and showed my sketches, wireframes, first prototype, second prototype to parents and various participants. It was so important to keep in mind that I was not the end user and I was creating a product for them so I had to make sure just because something may look visually better may not result in a better experience. 

REVISITING USER FLOWS TO DOT MY I'S AND CROSS MY T'S

Although it was a tedious task to create the user flows, I knew it was important as it helped me focus on the user's interaction throughout the product and ensuring that I am designing for the entire process.