LMS
UX/UI Design for tech-education web app
Overview
The LMS is an under-development tech-training platform for internal use at The Knowledge House and (eventually) Tech-Ed institutions to have granular control and tools to manage the journey of those learning the skills to get into the technology industry.
Goal #1
Create our own tech-education tool that serves with the reliability and versatility that our organization needs as it continues to grow.
Goal #2
Building upon our first goal, we look to build a tool for tech-education that empowers those looking to get into the tech industry with a tool that exceeds to world-class standards of the environment they're seeking to break into.
Problem #1: Unreliable and outdated tools
Our previous learning platform solution was ridden with bugs and technical issues that hindered those involved on every side of a learning journey. From our teachers and supporting staff to our students, we all found frequent hiccups that were mostly out of our control that disrupted our activities.
Problem #2: Lack of granularity and integration
As a quick fix, using Google Classroom proved good enough to go by. However, the usual workflow of our organization felt limited by it quite soon. Without tools for attendance, student interactions, categorizing content, effectively measuring progression, any data reporting tools, and more, we currently have a noticeably disjointed workflow organization-wide that makes irrelevant tasks more time-consuming. These obstacles make it harder to work on what matters most: supporting our students through their learning journey.
Problem #3: Inconsistent industry standards for hiring
Even though tech giants like Apple and Google no longer require degrees to make hires, the industry at large makes it hard for people from unconventional backgrounds to get into the industry by overlooking their capabilities. With the LMS, we seek to create a platform where industry leaders can help us unify and democratize the true requirements for what it takes to make it in the tech industry and empower those from unconventional backgrounds to legitimize their unique skillsets to stand out at the start of their careers in tech.
Solution: Custom-built learning management platform tailored to teach tech skills
Continue on to see how we're making it happen!
Background
Role
UX/UI Designer
In this project I was responsible for the UI Design, copywriting, as well as executing usability testing studies to validate our product as we build it.
Team
3 members
Co-founder/Project Manager
Fullstack Developer
UX/UI Designer (me)
Constraints
Core team of 3 vs massive project scope
Our main challenge throughout the project is that the scope of the LMS has expanded multiple times, but our team size has remained 3.
Users/Audience
3 main segments
Our internal learning community for students, teachers, and other staff
Other tech training institutions and their learning communities
Decision-makers in the tech industry that are looking to hire talent
My Process
What, How and Why
Early stages: Synthesizing feedback into Personas
My first task on the project was compiling and organizing all the previously collected feedback about the current solution we had (quickly dubbed “old LMS” around the office). This included needs, expectations, critiques, etc. I used Personas to represent all this information concisely.
The “old LMS” counted with 2 user-types: Teachers and Students. We felt that only two roles didn’t properly represent our holistic approach to empowering our communities to a successful career in tech. Additionally, TKH is a small organization where most members have a wide range of responsibilities that likely reach beyond a single role. So in order to communicate this granularity, we decided to add 2 new user-types: Admins and Coordinators.
 Student Persona.png |  Admin Persona.png |  Teacher Persona.png |
|---|---|---|
 Coordinator Persona.png |
Testing the first prototype
Before my inclusion on the project, our Developer created a low-fidelity prototype. I was responsible for creating task scenarios to test each user-type before continuing to iterate on it. However, we decided against testing all workflows at once, since we wanted to focus on fixing crucial issues on the already existing ones (Teacher and Student) rather than beginning to explore our new additions (Admin and Coordinator).
Our main goal was to determine how manageable the learning curve would be for our teachers and students, considering their expectations and “muscle memory” from using the old LMS.
Here are the most notorious insights we gathered from our 7 participants in this round of testing:
- 57% of participants mistakenly clicked an element because they thought was interactive
- 43% of participants expressed that they think the profile was hard to find
- 72% of participants reported that they found out least one misleading text element, resulting in a deviation from the optimal pathway to task completion
- 43% of participants indicate that icons didn’t represent what they expected once they interacted with them
 Student Profile from the first prototype.png |  Main Dashboard from first prototype.png |
|---|
Second Iteration: Learning from our mistakes
After reflecting on the feedback we gathered, we decided to make a drastic change of direction in terms of UI. Even though it was a lo-fi prototype, we felt that using it as a base for the high fidelity prototype would be more of a constraint rather than a reference for the next iteration. For this reason, we decided to try a drastically different approach.
After some time, this is where our efforts for a better lo-fi prototype took us:
 Main Dashboard from the second iteration.png |  Class Dashboard from second iteration.png |
|---|
Second Iteration: Testing with Card Sorting
Even though we made something that people visually liked and approved of as we were creating it, we had to make an assessment of how well the new LMS is doing in practical terms.
For our second round of testing, we decided to make a closed card sorting activity. We decided to do this instead of re-running task scenarios because we felt that asking our users what they think about where things are around the platform would be easier if we abstract as many details as possible.
Our goal with this card sorting activity was to find out how well we were matching our users’ expectations when it comes to where things are in the LMS.
My approach to this card sorting activity was to set all the features/actions as the cards and set the pages where the features are as the categories. This way I could determine an “agreement rate” of where our users expect to find the main features compared to the current Information Architecture. I used Optimal Workshop to create the card sorting study.
Using Optimal Workshop’s reporting features for the most popular placements and a Google Sheet I created to compare the agreement rate, here’s what we found out:
 Student Workflow Agreement Rate.png |  Student Workflow Popular Placements.png |  Teacher Workflow Agreement Rate.png |
|---|---|---|
 Teacher Workflow Popular Placements.png |
Outcomes
A space to review, reflect, and look forward
The Current State of the LMS
The LMS project has evolved dramatically since the closed card sorting activity detailed in the previous section. One of the most notorious changes is that somewhere in the process of creating it for ourselves, the LMS transitioned to be launched as a subscription-based platform for third-parties to use in their own tech-education ventures.
With this expansion of our scope from our internal tool to a whole platform for public use, we have a ton of exciting things in the works! My efforts with TKH to expand the LMS are currently going to the following aspects:
Brand design. Among the infinity of aspects that great brand design has, our sights are currently on giving the LMS a name and a visual identity separate from TKH’s own.
Gamification. For our public release, we’re heavily invested in our Student workflow. We feel that making education more approachable for such a demanding and competitive industry like technology will help us fulfill our goal to empower our communities to a great career in tech. We’re looking into resources like Bartle’s Player types, the Octalysis Gamification framework, and drawing inspiration from the gaming industry's most awarded games and practices. These efforts go hand-in-hand with our brand design work.
More testing. We've learned a ton from our mistakes in previous iterations and I’m looking forward to seeing how our users react to our newest changes in response to their feedback. Testing results don’t lie!
Information Architecture. Based on feedback, and based on other indirectly related changes around the org, we’ve made some improvements to the course and class structure. This effort goes hand-in-hand with the gamification ones since it’s connected to the level and scoring systems we’re creating.
Even though these are still ongoing efforts, here’s a sneak peek of what’s coming:
