Product Design CaseStudy — AdaptiveU

Vishnu Srini
Vishnu Srini Design Diary

--

AdaptiveU is a Learning Management System that helps to empower employees and simplify onboarding with custom training.

  • Client: AdaptiveU
  • My Role: UX Research, UI Design
  • People Involved: Product Manager, CEO, Founder, Senior Developers
  • Website: https://www.adaptiveu.io/

Introduction

AdaptiveU is a great product that is focused on improving employee skills in an organization by providing abilities to learn and train.

Problem to solve

Re-designing of any product should consider the below aspects,

  • What are the problems to solve?
  • What are the data available to validate the problems?
  • What is the benefit it brings to Users and Businesses?
  • Does the problem that we are trying to solve resonate with the Brand’s mission & vision

Considering AdaptiveU’s re-design, some of the problems that justified the question were,

  • Lack of Personalised Learning.
  • No clear separation between learning & training contents.
  • Creating a course was hard for users.

My Design Process

My design process involves,

  • Discover
  • Define
  • Develop
  • Deliver

Discover

Data Analysis

I went through the quantitative data to know more about the product usage, use cases, and user activity. By looking into the data I could figure out that,

  • Low Retention
  • Low Active Usage
  • Course Creation was less

Tools used: Google Analytics, Hot jar, Intercom

Competitor Analysis

User Interviews

I happen to interview a few users and here are some of the points derived from the interview

  • No curation of content
  • Content out of user’s interest gets populated on their home page
  • Course creation is hard

Define

We as a team looked into the data collected and agreed upon some major problems to solve

  • To make learning personalized: By doing this the user finds the content of his/her interest on the home page.
  • Putting more focus on simplifying the course creation: Course is one of the must-have features for AU and by simplifying that we can put a smile on our users
  • Defining Learning and Training: Training stops at some point of time but learning is an ongoing process, we as a team believed in this and focused more on pitching the importance of learning by clearly defining boundaries on learning and training content

Develop

Wireframe

After defining the things to do, I was looking for my go-to tools, pencil, and paper 📝. I always insist on this practice with my fellow colleagues and juniors, because getting ideas on paper is way more quick and effortless and also allows you to get quick feedback. So I did a few sketches and tried to get my ideas in a low fidelity mock, I received feedback on the low fidelity mock, did a few iterations, and settled on a ground, here are some of the wireframes for you! In my wireframe process, I try to combine shapes with helping text, because text helps you understand the context of the wireframes much better.

WhiteBoarding with the team (sorry for the bad photography 😝)
Wireframes :)

Design Outcome

Navigation Design

Navigation plays a critical role in any product, it’s the first clue for a user to reach an information

Problems

  • The core value of AU is to access contents, the old nav structure made it hard to achieve
  • Both learning material and training material were placed under one roof called “Challenges” which led to an infinite scroll for a user to search for a specific material
  • Confusion in terminologies: Terminologies like “Challenges” and “Peers” were hard to understand and were non-standard

Solution Proposed

  • Home: Where users can find the content of their interest, the home will have content related to learning.
  • MyQ: A place where a user finds his learning activities, learning progress, saved items, and contributions.
  • People: This page helps in achieving transparency in organizational learning, this serves as a leaderboard with information about fellow peers’ learning progress.
  • Course: This is a dedicated place for training materials, this way the access to training materials was made easy and is separated from the learning materials.
  • Tracks: AdaptiveU users can be part of multiple tracks, tracks are more like channels, which have similar contents. For example, a track named “Design Metrics” can have content related to design, and the track “Business” can have content related to marketing, sales, etc.., It’s normal behavior for a user to switch between tracks, so we decided to have it in the side nav for easy access.
Card UI

Problem

  • Thumbnails are used to grab the user’s attention, but the circular thumbnail in the old design was less attractive.
  • In the old design, the number beside the card title is the approximate time to consume content, this was not clear for many users.
  • Irregular alignment of information.

Solution Proposed

  • A bigger rectangular thumbnail to grab the user’s attention.
  • Content-Type: During the user testing I observed that a user constantly clicks on content, goes to the inner view, and comes back to the home page to click another content. I asked him why he does so, then he said that he is much interested in video/audio content and he was searching to find one. This made me realize the importance of throwing the content type on the card view ( User-testing & Observing them interacting with the system, helps a lot to reveal unexposed problems)
  • Save icon: Helps the user to save content.
  • Content source: We as a team were very clear on providing the necessary credits for every content that is fetched from the internet, so we had the content source included in the card
  • Est. Time: A clear visual clue on the approximate time to consume content.
Content Inner View UI

Brief: The detailed view is to consume content and submit a review on the content.

Problem

  • Retaining the side nav reduces the focus on the content
  • Overloaded with unwanted information.

Solution Proposed

  • The primary action of a user on this page is to consume and write down the review on the content, so we decided to put more focus on the content by removing the side nav and other stuff causing distraction.
Course Creation UI

Brief: Course creation is one of the biggest tasks that we had to design, as the existing system doesn’t work for the users, we did a lot of whiteboarding and wireframes and finally agreed upon the above design

  • The left side holds the information about the lessons and steps. In this way, the user always has the course flow visible.
  • The right half of the UI holds the information about the content added and options to add different content types.
Course OverView & DetailedView UI

Brief: Course overview helps the users to know about the lessons and the number of steps involved, the detailed view guides the users to take up the course step by step.

  • In the detailed view, we have included progress for each lesson and step, in order to help the user understand where he stands.
  • We also made the UI in such a way that the user focuses on one step at a time, to reduce confusion.

Iterations

Card View Iterations

Takeaways From the Project

Using the Product Everyday

This is something that I learned from this project, as a designer do a lot of research on the users to know about their mental model and data bias, but we fail many a time being a user. Using the product every day helped me as a designer to walk into users’ shoes and see their problems. Which in turn pushed me to solve them.

Taking up Customer Chat/Call

Yeah! you heard me right, this one is definitely a hack. Answering customers’ chat/call gives you a different perspective on the product and sometimes even helps you to develop a roadmap for the product. Try this out and thank me later :)

Including Developers in the Design Discussion

Feedbacks from the CEO, founders & Project Managers are important, but including developers in the feedback loop is a game-changer. I couldn’t have imagined this output without developers' feedback, as they always had a different perspective on the use case.

Documenting Feedbacks

It’s very common to miss out on some feedback, as most of them are verbal. So I always used to take quick notes 📝 and using Invision for prototyping helped a lot in logging them.

YES! Requirements Keep Changing

One of the toughest jobs in designing any product is that the requirements keep changing. It could be because of the technical issues or feature requests from the management, but it’s one of the inevitable parts of a product life cycle, and being prepared for it will not hurt a lot.

so yep! that’s all about this project stay tuned for the next one 👋🏻

Thanks a ton!!! for reading this

--

--