Nora Molnar-Ercsei
UX designer

Learning management system

Designing an optimized web experience for teachers and parents

About the Project

I was hired as an Agile IT Professional to help Level-up Works launch their cloud-based application. Level-up Works, a specialist in kids programming class was going through a business transformation that emphasized a new set of products and target customers.

I worked as a UX designer in a team of 3 UX Designers and 2 Developers. The project was 2 weeks long.

Research
Coding class

Coding class

Interviews

At the discovery phase of the project, we conducted user interviews in order to get a better understanding of the problem. We interviewed the business owner, who was also the only teacher at the time, and several parents whose children were attending the coding course.

Main Insights

Based on the interview answers, we created empathy maps. They helped us to clearly identify and visualize the business owners' and the parents' wants and needs, pain points, and goals. The most important findings were:

The owner/teacher:

• Busy & has no time for marketing, as he not just the owner but the only teacher at the moment
• The website does not have many visitors.
• Being limited with just one community, and one channel of communication (Wechat)

We also identified his goals:

• Wants to grow the number of classes, with a small number of students in each as for him quality is more important than quantity
• Hire more teachers to help him with the expansion
• Needs more products that are unique in the market
• Wants to expand the business and share among all communities, as currently he almost exclusively has students from the Chinese community

The parent's pain points:

  • No option for tracking learning/progress of the child

  • Not knowing how to share child's projects

  • No awareness of website

Their goals:

  • Online system for – signing up, checking child's progress and payment 

  • Certificates and rewards system  for completion of projects 

  • A website with more specific details about the course

User Personas

User Personas

Personas

We summarized and reiterated all the information we gathered so far by creating Personas. Information like motivations, device usage, pain points, etc.

There are clearly many problems we could focus on, but we had to define the ones that were the most important, so we came up with the following problem statements:

As a business owner, I'm trying to expand my business but I don't have enough time, because I work full time, which makes me feel frustrated.

As a parent, I'm trying to check my kids' progress online, but I don't know how or where because the only option is to ask the teacher in person and I don't want to put pressure on him, which makes me feel confused.

To keep our design process focused on the user’s goals, we created the user stories:

From the owners' point of view: As a business owner I want to have a system that makes communication and administration easier for future teachers so that I can focus on growing my business.

From the parent's point of view: As a parent, I want to be able to keep track of the course so that I can be more involved with my child's learning.

Customer Journey

We created two Customer Journey Maps, to identify and visualize the touchpoints of the journey where we can improve the user experience.

Customer Journey Maps

Customer Journey Maps

Sketches /  Dot-Voting

Sketches / Dot-Voting

Sketches

We created our sketches based on our ideas for a solution. We then used the dot voting method with the UX design team to select the parts of our design ideas that could work well together and that we can use for our wireframes.
After we agreed on the possible solutions for our design, we then created two user flows and wireframes.
Our finalized idea was to create a dashboard for both parents and teachers.

Results
Wireframes

Wireframes

Wireframes

Based on our sketches we created wireframes for testing purposes. We created separate wireframes for the parents and for the teachers.

For the parents, we created an option to share their child's work, certificates, and badges, also a chat function where they can communicate with the teachers and each other as well as a payment section where they can pay for the course easily and quickly, and a built-in calendar where they can see any upcoming events and updates from the teachers.

For the teachers, we made a platform where they can update the student's progress, chat with the parents, send payment reminders, update events in a calendar and see reports and statistics for 4 different filtering options.

User Testing

User Testing

User Testing

Before we moved to create a hi-fi prototype, we did 3 rounds of testing in order to reveal possible usability problems. We then had a meeting where we used Jakob Nielsens' severity scale system to rate usability problems according to their severity.
Based on our findings we reiterated our design and created a hi-fi prototype. We tested it again on 3 users and used the same methods as before to be able to optimize our solution further.

UI Design

Once we were finished with the testing, we reiterated our design once again.
Accessibility was also a big part of our solution, so we provided many options to make the site more inclusive.
A few examples of accessibility:

  • Dark mode function, where users who are sensitive to bright screens or just prefer a darker look can access this option.

  • We created social login options for a faster and more convenient experience.

  • A language selection option was also introduced to make it easier for everyone to use the dashboard.

  • For the chat function, we created many alternative options to communicate, for example, voice messaging, screen sharing, video messaging, attachments, etc.

  • We made it easier for parents to manage more than one child's profile too.
    The final results can be seen below.

10
Iterations
21
Screens
90%
User Satisfaction
60
hours of meetings