SkyPrep UI Upgrade & UX Optimization

Background of SkyPrep:

SkyPrep is a SaaS learning management system (LMS) that helps small to medium-sized companies streamline their employee training.  The app comes along with extended features: course creation, learner progress tracking, performance reporting, etc..

The app mainly consists of two types of users:

Admins: users who manage the employee training of a company.

Learners: users who take courses (training).

Purposes of Redesign / Business Requirements

Outdated InterfaceLoss of potential sales
It has been several years since the last update of the user interface. In the last year,  more cases have been reported by the sales team, about potential buyers feeling uncomfortable with our app and choosing a competing solution, due to a better UI.

Confusing User ExperienceLoss of revenue
The customer success team reports that customers complain about the confusing experience within the app. Some of them ceased their subscriptions following such complaints.

Upgraded UI & optimized UX match new pricing plan
To justify the new pricing plan that the management intends to roll out in 2020, an upgraded user interface is required. This is also seen as an opportunity to enhance the experience of current users.

My Roles:

User Researcher, UX/UI Designer

Initial Research:

To better understand the current structure of our app and the problems our customers are faced with, I investigated their needs and ran multiple iterations with the help of the product team and I came up with an exhaustive to-do list:

Information Architect – Sitemap

User Interface Auditing – UI Inventory

Customer Support Tickets – Zendesk & Intercom

User Interviews

Competitors’ UI Analysis


Specifically,

Information Architect – Sitemap
Through building and analyzing the sitemap, it is reasonable to assume that the “My Learning” page is where most interactions happen, for a learner, while, for admins, it is the “Course Management” page. Either could be a starting point for the UI redesign.

Screenshot of SitemapScreenshot: Information Architect – Sitemap

UI Inventory
After categorizing screenshots of the UI, inconsistency among UI components in the app was an evident concern. A UI library was deemed to be the best solution, in order to tackle this along the UI redesign process.

Screenshot of UI InventoryScreenshot: UI Inventory

(After the completion of both the Sitemap and the UI Inventory, we realized the workload of the redesign on the Admin side needed a much bigger effort than the Learner side. However, 95% of our users are learners. For this reason, the product team and I decided to tackle the redesign of learners’ interface first, as it would affect the experience of most users.)

Customer Support Tickets (Affinity Mapping)
By going through customer support tickets and grouping similar tickets into various categories, we found that “Navigation” was the biggest part causing the confusing experience for learners.

  • Quotes from learners
    “When you have completed the course there is no good way to go back to the original page.”
    “Parts of it are missing. There’s no clear direction as to what you should do next.”

Screenshot of Affinity MappingScreenshot: Affinity Mapping (Tickets from learners)

On the admin side, “Navigation” was also a focus, as well as “Course Management” and “Customization”.

  • Quotes from Admins
    “Improve layout & workflow for courses and learning paths”
    “System would not remember where you left off.”

Screenshot of Affinity Mapping (Admin)Screenshot: Affinity Mapping (Tickets from admins)

User Interviews
With the feedback from the team and the analysis of existing data, I came up with a user interview plan focusing on revealing the issues of “Navigation” and “General Experience” in the app.

In terms of user recruiting, the sales team and the customer support team helped select 15 interview candidates, who best represented the most common use cases for our app. We ended up having 5 responses to participate in the user interview.

After transcribing and analyzing the interview recordings, a list of facts/insights appeared

  • Learners:
    • “My Learning” page could be empty when a learner finished all training.
      Some leaners might still need to access the finished training materials for references at work. Thus the part of finished courses could be more accessible in the app
    • Learners often forgot where they left off.
      In some companies, learners are paid to do the training in a specific time slot. If they don’t finish the course within a given deadline, the company schedules a new time slot for the training. Often learners forget what course or what part of the courses they have done.
    • Difficult to re-set the password of a learner account.
      Some learners do training on SkyPrep once a year, thus passwords are often forgotten. Unfortunately, it is quite confusing to retrieve the password on the current user interface.
    • Other insights.

  • Admins:
    • Ability to customize the learner homepage -“My Learning” page.
      The use case of SkyPrep varies largely depending on one’s business needs. Some companies might have training only in the form of “Learning Path”; others might use “Instructor-Led Training” to do their employee training, thus their requirements for the learner’s homepage are significantly different.
    • Additional insights. 

Competitors’ UI Analysis
Analysis of 3 direct competitors (LMS) and 3 online learning platforms:

Screenshot of Competitiors UI.png

Screenshot: Competitors’ UI screenshots for the team update meeting

Design Principles:

Once the research phase was completed, I presented the product team with my findings and a new set of design principles to follow. After incorporating their feedback and running additional research, a final list was produced.

Supportive and Straightforward
We design to give users clear guidance to navigate. Straightforward language makes everything easier to understand.

Consistency Streamlines the Experience
Users see and feel the same way towards similar places, features, occasions. That includes consistent colors, terms, languages, layouts, behaviors.

Components are Resource-Friendly (Reusable)
When designing, first consider using exiting components and modules without compromising user experience.

Distinctive from Our Competitors
Strong brand identity

Low-fidelity Wireframes

Screenshots: Low-fidelity Wireframes

Final Deliverables v.s. Previous Interface

What Have Been Improved

  • Learner Homepage

    In the new interface,

    • “Last Actioned” is added to help learners quickly navigate back to where they left off last time.
    • “Upcoming Due” groups and specifies courses that need to be completed before due dates.
    • “My Current Learning” includes all courses and learning paths that a leaner is learning currently.
Learner Homepage.png

  • Course Overview Page

    In the new interface,

    • The breadcrumb is used to indicate a learner’s location and reveal the hierarchy if a course belongs to a learning path
    • Rearranged the layout to highlight the primary CTA “Resume Course”
    • “Next Course” section at the bottom helps learners to navigate in a learning path
Course Overview Page.png
  • Course Taking Page

    In the new interface,

    • The left side in the new interface is utilized to display the course module list that could be hidden
    • Highlighted course module in green indicates a learner’s current progress
    • Primary CTA “Next Module” helps learners navigate when taking a course
Course Taking Page.png

Challenges I faced 

Communication
Unlike in-house developers, working with a remote front-end developer in a different timezone with limited knowledge of spoken English requires better communication. Choosing the right tools helps significantly. In this project, I used Zeplin to communicate various states of UI components and UI of single pages, inVision to show prototypes, Trello and Google Doc to track front-end development progress and provide feedback.

User Research
Being a solo designer in the project team and trying to get the buy-in from management for more user research could be challenging. To help us see the values of research, I got them involved in the research process, including the whole team and the project manager. I had them sit with me during user interviews and I asked them to participate in the task prioritization workshop. For this part, I am still figuring out ways to evangelize the benefits of user research.

Metrics / Business Impacts

Currently, we are at the stage of beta testing with selected users and we would like to have more feedback before officially rolling out the new interface.

Customer Satisfaction
To better understand how our customers feel about the redesigned app, we are planning to send out a survey after officially launching the new interface. The survey includes aspects of app navigation, password retrieve process, branding and the likelihood of recommending our app to others (Net Promoter Score). We will be focused on the negative comments and the responses of passives and detractors. Based on the survey results, another round of user interviews should be expected. From there, we iterate our product.

⚡️ Unexpected Business Opportunity ⚡️
Right after the completion of the front-end development, prospect investors/partners from a company in the same industry expressed a huge interest in our redesigned app and decided to fly to our office to discuss the potential investment/partnership.

What I learned

Communication is critical. Keeping everyone in the loop helps a project move forward faster.

Be resourceful. Resources are always limited, and user experience is often a “team of one” game. Evangelize on the value of UX, get the buy-in from the management to run more research, and show everyone the actual benefits.

More usability testing and earlier testing.

Choose reliable tools. I experimented with InVision Studio to create some mid-fi UI concepts, sadly ignoring it did not have auto-save. After losing the work of a whole afternoon, I ended up switching back to Sketch.