The goal of this projcet was to create a great online learning experience for employees in the financial industry. It was a freelance project I worked on for a short time, and I collaborated with PM and an UI design contractor.
Time
Role
My Contribution
Freelance Project
3 Weeks
Jan 2020
I converted PM's research results into prototypes
UX Designer
Project Type
It provides financial companies courses for employee training, the tools for employees to learn, and a management system for managers to track study conditions.
The video learning experience is the most important experience for the user end. The user's learning effect will directly influence clients' satisfaction with our product and decide if they buy or keep using our product. I designed the whole Finlearning platform, but I would like to share my thoughts on this one experience.
a. The videos provided are usually long and users can easily get lost.
b. Target users are busy and don't have the time to rewatch the video. Focus means efficiency.
Courses in the financial industry can be hard to understand and we need to make it more digestible.
Users take notes to prepare for the later exam, but note-taking is very time-consuming.
The outline was integrated into the video progress bar and the Notes. Users can click a bullet point in it to jump to that section.
As users are studying a section, its corresponding note area for the section will open and users will naturally take notes under that bullet point.
The design goals it helped to achieve:
Help users focus
Help users understand
Help users take notes
By clicking "add to notes", the screenshot and the one sentence in the script will be added to notes, under the corresponding bullet point.
The design goals it helped to achieve:
Help to focus
Help to take notes
Users can switch to the "Focus Mode" when they only want to see the video and note. Less information help to concentrate.
The design goals it helps to achieve:
Help user focus
There are many mature online learning platforms. After comparing and analyzing the pros and cons of 5 platforms' design, I designed the first version for our product.
The first version design
Design is biased, so the first thing I did after prototyping was to test if meet user needs and achieve design goals. I asked 4 users to try the prototype and rate in which degree each design goal was met (0-5). Their feedback iterated my understanding of users and helped me identify problems.
User Testing Feedback Brief
The solution I had to this problem was to provide the outline (bullet points) of a class, so users have a basic understanding of a course and it can be easier to follow.
Provide class content bullet points to users
Base on my knowledge of users, I divided user scenarios to be 3 and decided the information needed for each scenario. In this way, we hide the unwanted information and complexity from users.
Three scenarios and information to display in each
In each scenario, users see different information and have different goals, so I prioritized information to make sure users can easily find the information needed in a particular scenario.
Information prioritization in three scenarios
There's a quote I love, "If you have literally tried every possible variation, you will have come across the best solution." So I tried all the possible ways the information can be put.
When Users Are In Focused learning
I started from the scenario with minimum and the most important information. The design exploration of knowledge outline helped me to come up with the innovative and widely-loved ways to provide that information -- in notes and progress bar -- and fully demonstrated design exploration's value!
Layout explorations of video player and notes
Layout explorations of class outline
When Users Are In Default Mode
I had set the main layout when I was designing the Focused Learning mode, so the Default Mode design part, I fit in the information one by one into the current layout according to their importance. Here is an example of the design explorations of the placement of the navigation bar.
Layout explorations of course navigation information
The final prototype of course navigation interaction
With the iterated design, I went to users for another time. With limited time, I talked to 2 users and both of them were very excited about the new design.
Although we believe note-taking is a critical need for our target user base on our research results, we still want to keep a close eye on the data and conduct user research to see if users really use it.
The class outline feature was warmly welcomed by users, but it requires much manual effort to attach bullet points to the video timeline. So we want to validate its value before we invest in more resources.
Different from B2C design scenarios, designers don't use the product we are designing and we know nothing about users' workflow, habit, and needs in B2B design. We must have an open ear to listen to users and product managers. For example, in the beginning, I didn't see the mobile version an important use case, because our videos are long, hard, and it is not convenient to study on phone. But as I dug deeper into user workflow, I found that some of them only have time to study on their way home, and mobile version design should be very important as well.
