Meemli

A non-profit organization that provides students from all backgrounds with accessible and safe academic support through their various self-study or teacher and/or mentor-guided online courses (student-mentorship program).
Team
Meron Solomon and Shreya Balaji
My Role
UX Designer and Researcher
Tools
Figma and Adobe Illustrator
Duration
3 weeks (2020)
Challenge
Meemli offers individualized online courses and teacher guidance to build skills for middle and high school students. The current layout and experience makes it difficult for students to navigate and understand what Meemli offers.
Solution
Redesigned toolbar, welcome pop-up, and student home page to help improve the Meemli experience.
Problem Statement
Students face difficulties navigating through different elements of the current Meemli interface which interrupts their learning.

Background

Mentor-Student Program
Students from underserved school districts are paired with an industry professional mentor who they complete activities and go through a lesson-based curriculum with on the Meemli platform. All communication takes place online through the MeemliSpace, a platform within the Meemli website that enables audio calls and provides an editable whiteboard in real-time for both the student and mentor.
Below is the previous MeemliSpace:

Research

MeemliSpace UX Audit
To familiarize myself with the MeemliSpace and begin identifying problems, I conducted a UX Audit on the Mentor-student program experience (image above). Here are the main issues I identified:
Secondary Research (Met with CEO)
To share my UX/UI concerns and to understand the current interface issues Meemli users faced, I met with the CEO. After speaking with her and understanding her main goals, concerns, and the design constraints, I outlined the deliverables:

Redesigns

After many design explorations and user testing, we had a final meeting with the CEO and development so we could get these changes implemented.
Post Login Pop-up Redesign
The previous pop-up students viewed after logging in lacked typographic hierarchy and the option for program space (class selection) was unclear for students. The hierarchy was improved in the redesign and I added a drop down menu for easy program space selection.
Previous Pop-up:
Redesigned Pop-up:
Toolbar Redesign
Icons were updated to become more cohesive and clearly indicate their functions. Below you can find the icons I redesigned, as well as an eraser I was tasked with creating.
Student Home Page
Previously, students that logged into their accounts before their program started were met with a blank screen. To combat this, I designed an informational student home page that provides them with details regarding their course and course status. To get further information, the student can select the program card.

Reflection

Learning From Users
When designing, it's easy to think your designs make "sense." However, user testing was really helpful in understanding what was and wasn't working. Keeping our constraints in mind, it also allowed me to understand how we could best support the children's learning with the options we had available.
The Role Communication Plays
Consistent communication is important. Our client had many ideas she wanted us to include in the designs which she would change over time, so it was extremely helpful that we decided to meet with her often with updates and hear her feedback as well as new ideas.
Collaborating With Developers
When working with development, it's best to discuss design explorations early in the process to clearly understand what's feasible and have frequent check-ins to make sure we're all on the same page. Our discussions with development is what helped us figure out what was possible to do with our designs and learn what was the best way for them to receive my designs because each person is different.