Findability and Scannability

Redesign the browse menu, result page and course page to improve the effectiveness and readability of the conversation from search to enrollment on LinkedIn Learning website.

Contributions

Observation
Interview
Card sorting
Lo-fi wireframes
Usability testing
Hi-fi wireframes
Prototype

Tools

OptimalSort
Sketch
Figma
InVision

Duration

10 Weeks
Mar 20 - Jun 20

Team

Lucy
Phil

SCENARIO

Cannot Quickly Find a Desired Course through the Browse Menu

I plan to take an online course about Jazz Piano on LinkedIn Learning during the quarantine. I use the browse menu to explore courses that I’m interested in. There’re tons of courses under the music topic, but I can’t find any target course. I’m too frustrated with the browse menu and have to use the search bar to find a course.

RESEARCH

HYBRID TESTING

We conducted hybrid testing with 9 e-learning users to understand the current LinkedIn Learning browse menu, its results page and the course page.
Each testing section contains:

Interview

Focused on the previous and current experience of e-learning platforms to understand the context of course searching and enrollment.

Open Card Sort

Labeled and grouped 104 page titles under the "creative" branch from current browse menu on LinkedIn Learning to recategorize the menu.

Observation

Remotely observed participants to complete tasks on LinkedIn Learning site to determine the effectiveness of using the browse menu and the result page to find a specific course.

Survey

Asked participants to evaluate the experience of task completion with Likert scales to understand their feelings.

The open card sort was assigned before the observation to avoid priming participants.

FINDINGS

Interview

1 ). 8 participants used the search bar as the primary navigation.
2 ). 6 people expected course progress content on the homepage.
3 ). The importance of course titles (5 individuals), description (6 people) and syllabus (7
participants) for determining enrollment.

Observation

1 ). The average task completion time was 03:32.
2 ). One participant required assistance to complete the task.
3 ). All users missed the category cards in result landing page.

4 ). 7 people tried filters, but none found helpful filters.

5 ). 4 individuals expect to revise the order of the course information.

Survey

1 ). 3 people found very difficult to neutral to navigate the site with the browser menu.
2 ). 7 participants were neutral to unlikely to use the browse navigation.

3 ). 4 individuals felt difficult to neutral of scanning information on various pages.

Open Cart Sort

Broke up items of the “creative” branch into four new parent levels:
- Design
- Music
- Photography
- Video Media

Click Here to See the Regrouped Menu

DESIGN GOALS

To help users to effectively find and decide to enroll in a specific course, we aim to increase:

the findability of the browse menu to target to a specific course;
the effectiveness of subjects/topics grouping and ordering on the results pages;
the scannability and readability of course content on results and course pages.

DESIGN

DESIGN OVERVIEW

Homepage

Result Page

Course Page

LO-FI WIREFRAMES

We created the lo-fi wireframes and redesigned the following content on home, result landing and course pages.

Homepage

1. Redesign the browse menu on homepage.

Used “Subjects” instead of “Browse” to inform users courses were categorized based on various topics.
Broke the “creative” branch into four parent levels based on the results of card sorting for efficiently displaying the whole list.
Provide more white space in the drop-down menu for better scannability and readability.
Distinguished different affordance between “hovering to go through the menu” (with an arrow icon) and “clicking to go to the result page” (without arrow icon).
Utilized both bolden font and changed background color of the list items that were selected to inform users of the path and current location.

Homepage

2. Added completed courses and rearranged the in-progress courses.

Used tabs to categorize in-progress and completed courses.
Applied card design pattern to group information of in-progress and completed courses for better visual consistency and readability on large screen.
Refined card information to help users to decide on the next stop:
- For in-progress courses, we displayed information that can help users to decide on keeping going on with them (title, progress bar, completion time left, save icon).
- For completed courses, we enabled users to take actions on reviewing and rating (title, view course button, view certificate button, rate course button).

Result Page

1. Removed the category cards.

The original category cards did not help any of our participants in targeting a course.

2. Rearranged the course content.

Applied card design pattern to display results for better use of the space (6 courses were displayed in one screen while only 4 in the original design), and therefore reduced the frequency of scrolling down the page.
Displayed key course information for greater scannability to help users select target courses efficiently.

Course Page

1. Rearranged the hero banner to emphasize important information.

Removed information that does not contribute to users’ decision making on enrollment (i.e. difficulty level, total number of people like the course).
Added overall course rating, total number of rating and information of the instructor that is important for users to enroll in a course.
Moved key information to the left side of the hero banner for better scannability.
Enlarged the size of the preview area to encourage the action.
Put the preview on the top right corner of the hero banner and grouped it with enrollment buttons for visual consistency.

Course Page

2. Regrouped and reordered course information.

Categorized course information into four tabs to break down the large chunk of text content into smaller pieces:
- Course information
- Instructor
- Reviews
- Related Courses
Placed the enrollment buttons at the bottom of the syllabus column to allow users efficiently sign up/pay for the course.

USABILITY TESTING 1

We created a click-through prototype, performed a usability test with 6 participants and designed some tasks to evaluate:

the effectiveness of the top navigation, scannability of the results page and readability of the course page;
the readability of information and related action buttons of in-progress and completed courses.

Click here to the task 1 Click here to the task 2

After the tasks, they were asked to identify challenges, concerns and improvement suggestions and complete a survey about the experience with the prototype.

FINDINGS

1. The average task completions time was 02:32.
2. 4 people reported a positive experience interaction with the navigation.
3. 2 participants commented on the incohesion of the hero banner on the course page (too much white space to group the information effectively).

4. We decided not to improve the filter section on the result page because it is out of scope of our project.

ITERATED LO-FI WIREFRAMES

Based on the testing results, we iterated the lo-fi wireframes and prepared for the second round of usability test.

Homepage

1. Redesign the browse menu on homepage.

Used a font weight between activated (bold) and inactivated (light) items for title content (e.g. “All Design”, “User Experience Topics”).
Bolded the text of the items that lead to the next page while it was being hovered to provide clear affordance.

Course Page

2. Revised the use of the space on the hero banner.

Left more space for brief course description.
Narrowed the white space between the instructor’s information and other course information.
Left extra space at the bottom of the hero banner for scalability needs (i.e. long course title that occupies more than one line of the space).

USABILITY TESTING 2

We performed a second usability test 6 participants with some tasks to evaluate:

the effectiveness of the navigation drop-down and the scannability of the results page (adopted the same task from observation section of hybrid testing);
the readability of the course page.

Click here to the test

After the tasks, they were asked to identify challenges, concerns and improvement suggestions and complete a survey about the experience with the prototype.

FINDINGS

For the task that was adopted from the hybrid testing, the average task completion time was 01:34, reduced by 55% compared to the task completion time in the hybrid test.
All participants completed both tasks successfully without obstacle.
On the course page, 5 people had positive experience of scanning information, 4 users reported positive experience of finding related courses, and 6 participants can find the reviews easily.

HI-FI WIREFRAMES

Based on the findings of the second-round usability test, we created a click-through prototype as the final deliverables of this project.

Click Here to Explore the Interactive Prototype

Homepage

1. Polished the visual design of in-progress courses.

Used brand colors to emphasize the tab that was selected to inform users of their current locations.
Aligned the “See More” link with the baseline of the tabs.
Moved the time left to the top of the progress bar for better display longer text and emphasized the progress bar with brand colors and longer size.

Homepage

2. Balanced the visual hierarchy of three buttons on the completed course cards.

Highlighted the most frequently action “View Course” with filled button.
Grouped “View Course” and “View Certificate” together by button outlines and theme colors.
Utilized brand blue and underline to isolate the “Rate Course” to attract users’ attention and encourage them to contribute on rating.

Homepage

3. Revised the top navigation and its dropdown menu.

Applied brand colors to the top navigation and moved the search icon to the right side on the search bar for visual balance.
Highlighted the selected path and the next step (by hovering) with darker text.

Result Page

1. Enhanced content hierarchy of the results page.

Bolded the topic title to highlight it.
Adjusted margins and text alignments of various sections to improve scannability.

Course Page

1. Employed brand colors to amplify the visual hierarchy.

Applied filled blue on the “Start my free trial” to attract users to the paid service.
Labeled the learning time information with text for clarification.

Course Page

2. Further improved the readability of the course information section:

Utilized brand blue on the activating tab to label the current location.
Applied theme colors on LinkedIn items (i.e. skills, LinkedIn profile).
Modified background color on unfold items of syllabus section for better scannability.
Adjusted margins to better group information.

PROTOTYPE

Click Here to Explore the Interactive Prototype

REFLECTIONS

LIMITATIONS

Time constraint of 10 weeks, narrow down the scope of the “creative” category.
Did not evaluate and redesign the search result filters.
Remote testing due to the global pandemic COVID-19.

FUTURE WORK

The rest of the branches of the drop-down menu.
Redesign the search result filters (e.g. combining the current general filters with the removed category cards as topic specific filters)All participants completed both tasks successfully without obstacle.