UX DESIGN • BRANDING
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.
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.
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.
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?
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.
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
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
© 2020 ANA LIU