Scholar Tree LMS
My role
UX Design, User Research, UI Visual Design, Front-end Development
As the UX designer of EIC’s tech team, I led the full end-to-end product design process for the LMS between May to Dec 2017. I made detailed research on users and business needs and constantly validate them as I create user flows to prototype. I have also created the UI visual design and took part in front-end development.
Overview
Scholar Tree Learning Management System is an all around online platform that records and organizes all student academic data that are shared between teachers, staff, students and parents.
Goal
Keeping track of records of every student is a very tedious and time-consuming process. Currently, Scholar Tree’s operation relies on bookkeeping with Excel spreadsheets which leads to mistakes and miscommunications. The goal of the LMS is the provide automated processes that can accelerate teaching experience and operating performance.
Process
Phase 1: THINK
Interview
As I interview the campuses at Scholar Tree, I took detailed notes and gathered samples of teaching materials to understand their daily operation. Materials such as student’s handbook and reports are great resources for building a digital grade book in the LMS.
The stakeholders has the most idea on what this project is all about. I Interviewed teachers and principle and staff to establish their objectives and goals for creating the LMS. Speaking with them helped me to understand their workflow and identify their pain points they face everyday at the campuses. Our product manager and I spent a few days at the campus attending sample classes and shadow behind staff to get a feel of how the school operates
Identify users and personas
I categorized information from the interview and teaching materials, then established the types of users who would use the system. The information gathered from interviews also help shape personas for in-depth scope of each user type.
Discover thru journey mapping
An example of an user journey of teachers running a classroom in Scholar Tree.
Using the interviews and personas, I created journey maps to detail how personas would go through their existing workflow. These maps allow the team to understand user’s feelings and identify any opportunities when creating our new workflow.
Discover thru scenario mapping
(Left) One of the scenarios we have created as a team in the workshop. (Right) I then transferred our ideas into Trello so that we can add and rearrange things easily.
With the existing user journeys mapped out, I invited members of our product and engineering teams to a workshop to create new workflows for the LMS. We picked a few major scenarios for each user type and started brainstorming with user’s perspective and concerns that we have learned from journey maps.
Define user stories
I invited our team again to identified the most common user stories for the first version’s MVP. We also save other ideas into a backlog for later iterations.
Define sitemap
I began creating the sitemap based on how users will navigate and need what kinds of content to complete their user journeys.
User flow
Align with Engineering and product manager to check with technical aspect of the project, I created a more detailed user flow that documents the different possible states that the user goes through to reach the goal. For a large project like the LMS, I create separate user flows for each user story, so that I can focus on specific steps.
Phase 2: CREATE
Wireframe
I created my wireframes with Balsamiq. I found it really easy to generate interface design quickly, especially when using sets of UI components from our design system (see my case study). The point my wireframes is to be able to convey the ideas to stakeholders using the least amount of time. My wireframes are then linked together using Marvel to create an interactive prototypes for early user testing. They can be easily generated and shared for users to try.
HD design on HTML
As I refine and validate our design, we felt confident to build the design into code. Going from wireframe to code may sound like a huge jump, but by using our design system, the wireframes can easily be transformed into code using existing components.
Introducing Scholar Tree LMS
Quick classroom info
Classroom overview helps teachers find quick information of their class such as the upcoming schedule and class details.
Digital grade book
Teachers can record and view student’s progress by lessons. All student data is saved in this centralized grade book to reduce paper trail.
Quick student info
Teachers and advisors can also quickly find each student’s profile filed with detailed information, grades and reports.
Digital report cards
Quarterly report cards can be generated from student’s profile. Report cards can be sent directly to parents through email or text messages.
Phase 3: CHECK
Usability testing
One of the Scholar Tree teacher is testing out a prototype on classroom grade book.
I brought the prototype onsite for teachers, principles, and other staff to test on. I assigned tasks for each of the tests to simulate how they would use the system in real life. I sat side by side with users to observe and discuss their feedback. After the sessions, I summarized my findings and prioritize issues based on how much it affected users completing the tasks.
The process doesn’t stop there. The designs are continuously refined to address previous issues and being validated again to see how well users complete their tasks.
Discovery & refinements
Here are some discoveries that I have ran into during usability testing:
Improving Save functionality
A few teachers who tested the initial designs noticed that they are not sure if their grade books were saved. The original design called for the grade book being automatically saved after changes were made. What I learned was the need to strike balance between automation and feedback. Although the auto-save function was originally intended to shorten user workflow, it causes confusion as our testers perfer to have their own control over their work.
I have redesigned the save function by adding prominent save controls on the grade book, allowing users to make their own choices when submitting their work.