Designing LMS — A Verb Case Study
My Team
Designers
Kaitlan Rawson // Troy Owens — UX Designers
Michael Davis — Senior Product Manager
Brycen Rinehart — Chief Product Officer
Alex Cooper — Creative Director
Developers
Jeff Higham — VP of Engineering
Diogo Antunes — Senior Mobile Lead and iOS Developer
Rui Santos — Mobile Android Developer
Intro
In early January of 2019 we were approached by a Young Living, an essential oil distribution company, to create a Learning Management System. The goal was to build a system that could be used by their customers to learn more about the products and earn in app rewards and discounts.
My team had done a small sprint to get some very simple and basic functionality and screen mockups to help the customer see the direction and vision for the project. Once the project was given the OK Troy and I were given the task to return to flesh out more detailed ideas.
Challenge
We wanted to create a great learning experience that could be used for both customers (purchasers of the products that will not become distributors) and eventually for distributors (those selling the product). Secondarily, we wanted to build a product that could be replicated for current and future clients.
Path Screen
One idea that wasn’t presented in the original sprint that we added later was a Path screen. When brainstorming new ideas on organization, we wanted to allow for many clients to have an over-arching tile that would house the courses and the courses would house the lessons.
The reason we chose to add the Paths screen is that many of our clients have different markets which could potentially alter the content. For example, Lemon may be sold in the Mexico market while Lavender may only be sold in the USA Market. This way we could control and filter content easier. This also allowed our clients to have more freedom and organization when creating the content.
A lot of elements from our original sprint were kept for the updated Path Screen including the addition of the Profile. The profile was a great update to our platform as it allowed us a designated place to house Settings and allowed for Learn to have its own spot on the bottom navigation. We also had somewhere to put the new Award Screen.
Course Screen
Troy and I split up brainstorming the Course Detail screen that would house all of the lessons. A challenge we faced was with the progress indicator. We had many questions about how certain types of media such as videos and audio clips would affect the progress. After talking with our developers, we came up with a great idea to calculate the progress bar.
We decided to make each individual item such as titles, copy, videos, and quiz questions worth one point. We added the points together to form our total. We would then divide the amount that the user has scrolled past or completed by the total points and find our percentage calculation. A lesson that did not have a quiz would have a “Complete Lesson” button which would be the remaining 5%. This solved an issue of putting significance or weight of one type of media over another. This also solved point value issues so a user would not see 99.93% complete when they did not complete the quiz.
Our final design shows the Lesson number, title, and description. It also has the lesson extras that shows if a lesson has a quiz, an award, or a reward tied to it.
Lesson Detail Screen
When designing the lesson detail we wanted to take into account the experiences for both the creator of the content (client) and the consumers of the information (customers and distributors) and what information would be important for each to have and see inside of the lessons. We decided to have videos, images, hyperlinks, and PDFs. The OS would handle the viewing of the images and other media content.
The difficult part of the lesson creation was the amount of states that were needed for both the lesson detail and the course detail. We needed to show multiple states for lessons and what was associated with them. Lessons could have awards, rewards, and quizzes. They could have an award and a reward, but could not have a reward without an award, and even more. We eventually wrote down every instance and possibility, which really helped both the designers and the developers.
We listed the possible items that could be on a Lesson which came down to
- Titles
- Paragraphs
- Audio
- Numbered and bulleted lists
- Media such as PDFs, Images, Videos, GIFs
- Links
- Block Quotes
Quizzes
The biggest challenge that we had with the LMS was the quizzes. There were many questions that we had to answer before we started sketching such as:
- Should we allow users to retake the quizzes?
- What types of questions would be allowed?
- What would be the criteria for passing and obtaining the award/reward?
- Would we show the users the correct answer?
Much of designing the quiz was a lot of UX and reasoning. We had to refer back to the feature and what its purpose was for the client and for the user. We were unable to do research so we were working a lot off of assumptions which made the user’s goals difficult to pinpoint. Some of us thought that users would want to learn about the content while others cared more about the reward at the end.
We wanted to heavily emphasize the need to learn and take in the content while also being rewarded for the efforts. With this in mind we answered our questions
- Should we allow users to retake the quizzes?
- Only if they fail
2. What types of questions would be allowed?
- Multiple Choice, True / False
3. What would be the criteria for passing and obtaining the award/reward?
- It would have to be 100%, as having too many variables for success would be hard to scale with so many different clients.
4. Would we show the users the correct answer?
- We decided we would show them the correct answer, but not the way we had sketched.
There was a good amount of differences between the sketches and final designs. One challenge we found when designing was trying to make the learning experience a positive one, especially when users answered questions wrong which possibly barred them from getting a reward.
The way we solved this was eliminating the red failure from the answer and the bottom of the device. The finished design was less invasive and limited confusion in case clients had red or green accent colors.
We decided to get rid of the negative frowning face for the “failure” screen and chose to show either a greyed out icon or a greyed out award. This way it is more of an “unlocked” and “locked” state instead of a failure state.
Final Designs
