Trailhead Re-Design
Researched and Re-Designed the Trailhead, an e-learning platform from salesforce which is used to training and learning purposes for both salesforce employees and outside people
"we decided to study the learning experiences of students and professionals on these platforms to identify their pain points and uncover some some design opportunities to overcome these problem"
My Role
User Experience Designer & Researcher
Timeline
Jan 2021(3 weeks)
Team
Shashank (Myself)
Seth Lucas
Tools
Design
Collaboration
Slack, MIRO
Figma
Overview
Our prompt was to choose any particular module from list of learning modules from the Trailhead website, which is the E-learning platform of Salesforce and then redesign its page to improve the overall user experience and accessibility.
This project was in collaboration with salesforce where our objective as to choose any topic/module and then improve the overall user experience and the accessibility. So, as a team we conducted research over articles, publications, and online sources about e-learning experiences and their preferences. We discovered a couple of interesting insights:
THE PROBLEM
What is it about?
Below is our final prototype after the re-design.
THE SOLUTION
Final Prototype
RESEARCH
Understanding Problem Space
As a part of the research, we first proceeded with competitor analysis, we chose Coursera, Microsoft Learn, and Grow with Google as our 3 main competitors. Also, the features to compare were decided based on the highest usage by the users.
Semi-Structured Interviews
After our competitor Analysis and Literature Review, we then created a script and then performed semi-structured interviews to find the research data that can be used for possible edits in our present Einstein for Marketing Cloud module in the Trailhead.
High-Fidelity Mockups
DESIGN
“When the interviewers took notes about their interviews with each of the candidates, they were able to recall about 23% more nuggets of information from the interviews than people who didn’t take notes.”
A majority of the students (61%) exhibited multimodal learning style preferences, which indicated that they preferred multiple modes of information presentation.
After we were asked to choose a module from the trailhead, we started exploring all the list of modules that were available. Our target was to choose a module which covers all ways of learning data like from videos, images, tables etc. So that if we re-deisgn the page, we can similarly implement the design improvements for a particular data type in other modules of Trailhead.
Understanding what makes users engaged and learn more from the platform?
To understand what makes the user learn more from the website with the most efficient way using the most appropriate data type, we first researched potential competitors to understand what they are offering to grab customers and then followed by literature review and then followed by semi-structured interviews. Since the time period for this project was less, we decided to confine the research to these 3 methods.
Competitor Analysis
Insight: Trailhead lacks in all most all of the most used features by its competitors and we then decided how to integrate and improve these particular features in Trailhead to improve more learning engagement.
No. of participants : 04
Participants' background : 2 college students and 2 working professionals
Participants' age range : 22 - 30
For the interview script, we have added a few tasks and questions. The script was designed to be brief and straight to point to keep our user's focused. Please click here for the script - shorturl.at/pzIMN
Pain Points
After we have done our primary and secondary research, we have scrutinized the information we got through these and then pointed out a few major points that the users are commonly facing. Below are the pain points:
#1 Not inclusive to other learning styles
For the users who learn best through visual or audio learning, they must learn through. There is no tool to keep track of bookmarked information that can be accessed at a later date.
"I enjoyed learning about the product, but I lost focus halfway through. I'd prefer to learn this from a video instead."
- Participant 1
#2 Lack of Interaction
As the users progress through the contents of the unity, they begin to lose focus and motivation. There is an absence of color and interactive elements within the content to keep users attention.
"The whole website could use some personality and brand identity. Reading through this makes me feel like I'm studying for an exam."
- Participant 3
#3 Learning Curve
Users can scroll up and find the answers while completing the quizzes. Therefore, they can decide not to learn the content and skip over units, impacting their learning potential.
"If I was in a hurry to finish this, I would just CTRL-F the answers in the text. I feel like I'm not actually learning at that point."
- Participant 2
#4 Misleading Navigation
On the main module page, users are getting lost within Trailhead due to ambiguous navigation flows. Icons can be deceptive and information is scarce to guide the users.
"I feel frustrated about clicking links because there is no hover function. I'm afraid I might make a mistake and end up on the wrong page."
- Participant 1
Persona
Caleb is a marketing specialist at a marketing firm. He just got hired at this marketing firm and is going through his training period.
The marketing firm Caleb works for is a major customer of Salesforce, utilizing products like Marketing Cloud and Einstein for their business operations.
Tasked by the director of his department Caleb needs to learn more about Marketing Cloud and how AI, such as Einstein, can improve his performance as a marketer.
Proposed Changes
Quiz Overhaul
Give quiz its own page, can go back and forth if needed.
Weekly Goal
Weekly goal system to keep track of progress, reduce burnout.
02
Module Page
Rating System
Rate the module so writers can receive feedback, with a number of rates given.
Description
Add learning goals and description of module page to give it clarity.
Info. Hierarchy
Add color and bold to headings, to create hierarchy and grab the user's attention.
Notes System
Keep track of important information through highlighter tools.
Media Learning
Ability to learn module through video and audio formats.
Images Fix
Enlarge images and allow zoom function to add interactivity.
Card Design
Turn module lists into cards with numbered elements.
Create Trailmix
Improve flow and design of creating a trailmix through the module page.
Dropdown
Clicking on the tag icon in the module menu will send down a dropdown list to choose your action.
Navigation Fix
Fix breadcrumb and search bar for better flow.
01
Unit Page
01 Module Page
This is the landing page after selecting a module and through our interviews, 3 out of 4 users mentioned that the timing and completion status is a bit confusing. Also, there are no factors based on which they can select the course. Also, modules with a huge list of sections are difficult to view and process.
Before
After
Improvements made
-
The rating system allows the users to rate based on their experience. This rating(Average of all the module ratings) allows the UX writers to evaluate and improve upon subsequent iterations.
-
Added the module description and learning goals to give a better clarity for the user. Also added the in progress icon which gives the user idea about unit progress.
-
Redesigned the module list into cards with numbered elements. This adds to a more robust and elegant design.
02 Card Design
The list design was too overwhelming in the case of large lists and also the details were not appropriate or understandable. Also through the interviews, as previously mentioned, 2 out of 4 users mentioned the timing and completion status were confusing.
Before
After
Improvements made
-
Added card design system for more robust output. Also, a total count of units inside a module that helps the users is added.
-
Previously the in-progress icon was not shown, but now, if the user leaves a unit in between, it shows the in-progress icon instead of the green check icon.
03 Dropdown
The dropdown used to add any module to the trailmix (custom list of modules that any user can make) is confusing as there are no information segregations to add to the existing trailmix or new trailmix. Also, in the case of long lists of trail mixes, it gets confusing.
Before
After
Improvements made
-
The dropdown to add the module to new trailmix is now in place dropdown giving the information segregation.
-
When user clicks on the existing trailmix, then he is directed with the list in the same dropdown.
-
The icon beside trailmix 2 has changed because the user added that particular module to the trailmix 2.
04 Consistency
When the user has decided to add a particular module to a new trailmix, then the page he addresses was lacking consistency. Also, in our interviews, all 4 participants said there was a learning curve when they first saw this page compared to the module home page.
Before
Creating trailmix
After
Creating trailmix
Before
Editing trailmix
After
Editing trailmix
Improvements made
-
The overall UI of the page is now designed to match the card design that we put on the landing page. Also, the data entry fields now match with the overall design of the trailhead from other pages.
-
Also at the bottom, it shows what module you are trying to add to this new trailmix. And the buttons UI is also now consistent with other pages.
05 Feedback
When the user adds a module, he is then lacking feedback that says about the success. Also, in our interviews, 2 out of 4 users mentioned about the feedback issue making them worried if it is really added or not.
Before
No feedback message
After
Improvements made
-
A feedback message now appears when the user adds any module to existing/new trailmix.
-
The design and UI are done in such a way that it maintains consistency with the brand colors and layout design.
06 Unit Page
The information provided was too overwhelming for the users as mentioned in the interviews. Also, all 4 users mentioned that they usually maintain physical notes which they said they have used while attending the quiz. Below are the screens addressing these issues and other overall UX improvements.
Before
After
Improvements made
-
Added color/bold to headings, and other UI elements, to create hierarchy and grab user's attention.
-
Ability to learn module through video and audio formats
-
Keep track of important information through a highlighter tools.
-
Weekly goal system to keep track of progress, reduce burnout.
-
Enlarge images and allow zoom function on double click to add interactivity for better reading purposes.
-
The "Take quiz" button at the end of the page takes the user to a new page with quiz.
RETROSPECT
My Key Takeaways
01
Prioritization is Important!
During the project, we had many features that we can improve but prioritizing what to work on can based on research can help complete your project in time.
02
Asking the right questions
Since we were new to the trailhead platform, we initially had trouble understanding but as a group we had asked some good questions which made our project smooth and easy.
03
Project planning
This project was only for 3 weeks and hence we had to learn and become familiar before conducting research. So, a solid team plan and teammates expectations are discussed.
Thank you for reading!