UpliftK12
Website Redesign
Role
Project Manager,
UI Designer
Timeline
3 Week Sprint
Type
Website Redesign
Tools
Figma, Maze, Slack, Trello, Pen & Paper
I lead my team on a revamp of UpliftK12’s game-based learning platform. You’ll see my process of managing a UX team for the first time and follow along our approach at understanding client and user pain points.
Our method:
Empathize with our clients and understand users
Conceptualize our problem and ideate on a solution
Design and deliver a thoughtful, intuitive product
Overview
You might have a lot of these to look at, so the button below is the link to the desktop prototype. Just in case you want a quick glance at the final product before reading through my process. ; )
Context
UpliftK12 was developed as an online platform that offers a range of math games and interactive tools for teachers to teach difficult subjects while students learn and have fun.
The site was originally designed with the remote teacher/tutor as the key demographic. During the Covid-19 pandemic it was essential for teachers to keep students engaged as most communities were subject to quarantined learning for a period of time.
Initial Problems
The user engagement drop-off from sign up to game launch. Our clients seemed to have no problem getting teachers interested in signing up but somewhere between creating their account and launching games, the engagement completely ceased.
Clients also want us to audit up to 25 of their games along with proposed redesigns of those games. They realize the games need some updating with visual appeal and functionality.
This quick video walkthrough shows what users see after signing into their account. I’ll also click through to the game page where the user is intended to choose up to 5 free games to add to their library with a free account membership.
Create a gameplan
As project manager I need to create a course of action. In my mind I’ll first need to:
Organize team roles
Understand our scope and protect it
Set up communication channels
Launch our endeavor with clear expectations from team members and a positive attitude!
We kept a shared drive file full of docs and resources. The image to the left was where we all listed out our strengths to help us designate roles.
Sure, this looks a tad hectic, but this is my process. I have to have a handwritten version of everything. Once an item is crossed off and the page is folded I can completely move on from the thought :-)
Empathize
We’ll need some face time with our clients to really get that level of understanding of things like … What makes their site so important to them? What are their real concerns? What are they expecting from us as designers?
That’s me! (Top Middle)
If there’s one thing I’ve learned in life, it’s the importance of active listening.
That’s Jenny (Top Left)
The world’s greatest note-taker/documentarian
Our Client (Top Right)
The amount of passion for his website was inspiring. You could hear it in the way he spoke about his ideas and his motivations.
Key Take-Aways
Clients want to know how they can create a more exciting onboarding experience
They know there is some confusion with how the site is arranged but can’t pinpoint where.
Is the target demographic still the remote teacher? Or do we want to reach out to a classroom setting experience?
Are teachers dropping off because they are expecting for games to be on the landing page for easy access?
Our clients know they have elements to their product that competitors don’t… how can we get that product to work well for users?
Learning
With eyes starry and a new energy to work on this project, I was assured that we would be able to truly meet every need of our clients as well as the users. When I met with my team to debrief, it became apparent that we (for the sake of time: 3 weeks) would not be able to complete the redesign with an entirely new infrastructure and make time for the redesign of 25 games.
This is where I had to reach back out in communication to clients and re-align our expectations. Protecting the scope of our work was going to allow us to really focus on all that would eventually be needed to improve the overall experience of the site.
Commence Research
I want to run a full diagnostic on the site. We’ll need to bring in Heuristics, a Competitive Analysis, and talk to some users to understand their pain points.
Heuristic Evaluation
Match Between Systems and Real World:
A lot of the iconography throughout the site is ambiguous. If you were navigating by icons alone, you’d get lost. “My Lessons” being represented by a building could be confusing for users.
Consistency and Standards:
There was a lack of consistency with colors and button types.
Recognition Rather than Recall:
This isn’t typical imagery for a profile picture that can be edited.
Recognition Rather than Recall:
This filter system was confusing. The search icon in the search bar was not a button, but the button to initiate the search was called ‘filter’. The flow here wasn’t intuitive.
Competitive Analysis
MathGames.com provides the ability to choose games based off of grade level and skills, this filter design choice seems visually appealing and easy to understand.
Along with a clean aesthetic, ProdigyGame.com offers a customized log in experience, allowing users to make an account as a student, teacher, or parent.
Teachers are able to make individual Prodigy accounts for students and have an autogenerated password created that students could use to sign into their accounts.
User Interviews & Surveys
In our interviews with users they too found the overall navigation confusing. Some even mentioned a need for more instructional prompts throughout the games and other site features. Others wanted an easier way to filter for games.
One user mentioned that they want a Zoom-like experience and a way to assign games/activities, giving them a way to integrate independent student activities.
Conceptualize
Let’s look at our personas and define our problem before we hop into designing. We created two separate personas for our clients, based off of our research. One being the Public School Teacher who teaches in person. The other being a Remote Teacher who conducts her classes exclusively online.
Dylan Sanders
Age: 25-35
6th Grade Public School Math Teacher
Frustrations
Confusing navigation, such as launching games or adding from the library, may cause issues when time is limited between class changes.
Insufficient instructional prompts on the site hinder users' understanding of how to utilize features like the whiteboard and games.
Goals & Motivations
Boost class comprehension exam scores
Engage and energize students
Dylan believes students learn best through play, so they’re motivated by keeping lessons fun yet educational
Carol Roberts
Age: 50-65
3rd Grade Math Teacher (Virtual classroom)
Frustrations
Lack of time to plan a full lesson
Difficulty navigating between the digital library and lessons dashboard
Goals & Motivations
Wants more convenience and ease of use to encourage further engagement
Focus more of her energy on creating a fun environment to interact with her students and less time on planning
Wants suggested games and tools that apply to her lessons
Problem Statements
Dylan, an educator in a classroom setting, aims to boost student engagement by incorporating an online math game website. However, he struggles with the setup process and efficient utilization of the website's features. This leads to time-consuming and confusing experiences, hampering Dylan's ability to seamlessly integrate the site into his teaching methodology.
Carol, a virtual math teacher, is having difficulty utilizing UpliftK12 resources in her lessons due to the lack of personalized recommendations. The absence of tailored suggestions on the website forces Carol to spend excessive time searching for relevant games, hindering her teaching efficiency.
Design
With all of this research in mind I initiated our design process with 2 questions.
How might we design for an experience that enhances student engagement and seamlessly integrates Dylan's teaching methods, allowing him to easily incorporate the site into his classroom activities?
How might we enhance the personalization of UpliftK12 resources to provide Carol with tailored recommendations, allowing her to align her experience with her teaching goals and lesson plans?
I gave our team 1 hour to come up with our first sketches, which we presented to each other and annotated which features we all had in common, which we should keep, and which were better suited for future development.
Many of us liked the idea of keeping the left tab as a main navigation point (1, 2b, 4b) . We also played with how we could personalize the ‘create an account’ flow (2a) and the ability for teachers to customize multiple classes if they chose.
I compiled all of our ideas together and drew up a final sketch!
Wireframes
It was time to take our sketches and transform them into low fidelity wireframes, to get a better idea of how our iterations could work.
At the start of this flow, the user signs up with the teacher account, chooses to set up a class, and adds students with auto-generated passwords.
Our final wireframes included a distinct Home Page that would allow users to access other features like Games, Whiteboard and Virtual Classroom without them feeling disjointed.
I liked the idea of having a video call be it’s own entity, all the while allowing the user to add other features like the Whiteboard and eventually Games to incorporate into a virtual class lesson. Here the user decides to open a whiteboard to present to the class.
Prototype
The original, general color scheme seemed to pose no issue for users. We stuck to the theme of the site’s welcome page and incorporated more of those energizing colors throughout the site.
We did change call to action buttons to a more consistent and standard set of colors.
The classroom would be fully customizable, with the freedom to personalize the classroom banner, add student profile pictures, add games to saved lessons, save manipulatives and even upload files that are applicable to the user’s class.
The home page would start with a walkthrough style tutorial, with informative language on how to best utilize UpliftK12’s features. The page would include a carousel of popular games, as well as a navigation to the Whiteboard and Virtual Classrom.
For the virtual classroom the user can add participants individually or by class, add whiteboard, and record classes.
Testing The Product
Users tested our final product and we had impressive results. Here are some key takeaways:
For the task “Create a class and add students” 6 out of 8 users had direct success with an average of 30 seconds to complete.
When users were asked to “Open a whiteboard within a virtual call and invite students to join”, 75% had direct success.
We received positive feedback on all of the flows with users having things to say like :
"The platform is attractive and seems largely functional! "
“Everything makes sense! UI looks amazing.”
"The website design looks friendly and fits with the overall theme of education. "
Reflection
I learned so much throughout this experience. Being the project manager for a UX design sprint was a first for me. I have so much gained from learning to understand and protect the scope for my team. I am truly a go-getter in my work style and personal projects, I have a tendency to overextend myself for the sake of completing a goal.
Working with a team of skilled designers meant that I needed to familiarize myself with the realistic expectations of our deliverables and the time allotted. Communication and transparency with our client were integral in getting over these little bumps in our process.
It would also become very important to use teaching moments with the client through the science and research that backs up the UX process we used. Our clients were understanding and excited to learn more so that we could work with them and truly incorporate them as a part of our team.