TLDR;

The pandemic has shifted businesses towards remote work and collaboration via Zoom. Walmart wants to improve the Zoom literacy of associates through a partnership with LinkedIn Learning. However, the Zoom LinkedIn Training Site (ZLTS) is currently hosted on outdated software and a heuristic evaluation reveals usability issues with the content and navigation.

As the sole designer and researcher, I led the website’s end-to-end redesign. I conducted user research to identify gaps in the content and visual design, restructured the website using Walmart’s Design System, and personally implemented the new site using Walmart’s internal website builder.

After the redesign, this website saw an increase in the Net Promoter Score by 115%. I successfully transferred the site to a new front-end software to increase site efficiency and consistency of enterprise tools. Not only does this website provide a template for current LinkedIn Partnerships that also require this transfer, but this redesign also streamlines the process of implementing future LinkedIn Partnerships Walmart will need on their internal sites.

Jump to Final Designs

context

The Zoom LinkedIn Training Site is an internal portal leading to the LinkedIn Learning website

Associates can earn a professional certificate, select specific lessons to learn from, and complete learning journeys (courses). As part of Walmart’s effort to improve Zoom literacy, associates are encouraged to complete all four learning journeys on LinkedIn Learning.

OVerview of the old experience

Home Page
Introduces the site and the two sub-pages

Learning Journeys Page
Act as quick-links to lessons for returning users

Skill Toolbox Page
Nests all the learning journeys and specific lessons LinkedIn Training offers

The Business Problem

The Walmart Experience Manager (WEM) is an internal website builder used for many enterprise sites. WEM allows a streamlined process as designers are able to drag and drop components to create their web pages with zero coding required.

Currently, the Zoom LinkedIn Training Site is not built with WEM. Stakeholders have expressed the business need for the technical transformation of the front-end interface as it would increase website efficiency and overall enterprise site consistency.

define

Heuristic evaluation reveals that the site does not adhere to design standards

The research team and I identified several usability issues with the site and also cited recommendations going forward.

Snippets of Heuristic Evaluation

I conducted user interviews with associates to understand how they interact with the ZLTS

‍I led 10 user interviews: 5 associates that have used the site before and 5 associates who have not. This helped me uncover pain points from different POVs.

An important insight noted was that it seemed like users rarely used the ZLTS. Users were either unaware of the site or stated they didn't need to use it as they are already familiar with Zoom.

I echoed these concerns to the team, and it was decided that this was more of a business need than user need. We continued with the redesign, setting the goal of creating an intuitive site that is free of all UX issues and easy for users to navigate if ever needed. Additionally, this website could be used as a template for future LinkedIn Learning partnerships.

Considered other learning platforms through conducting a competitive analysis to drive design decisions

Through affinity mapping, I found that the user problems of the ZLTS boils down to three main pain points:

1. Content is dense and unorganized 📚

Information is overwhelming and uses many unfamiliar technical and inconsistent terms.

2. Limited understanding about the system ⚙️

Information presented does not effectively guide novice users through core tasks. Users aren’t able to differentiate between modules.

3. Disjointed Navigation 🗺️

Users aren’t able to quickly search for modules and lessons. The navigation is not intuitive; users have to remember what each term means to get to their destination.

ideate

Developed a user flow to provide a foundation of content needed and the path users would take to complete a task

Not only did this provide structure, but stakeholders and others removed from the project could also refer to this flow and immerse themselves in the user experience.

Restructured information architecture to understand how users would navigate to different pages from the homepage and the breadth of the redesign

There were no major changes except the decision to combine the Skill Toolbox Page and Learning Journeys Page (LJ Page) into one individual page in order to:
• Eliminate Repetition: the LJ Page only had redundant information
• Withdraw Ambiguity: at first-glance, novice users were unclear what "learning journeys" were on the homepage
• Remove Extra Time: the LJ page's only function was that it acted as a fast path to the Skill Tool Box Page

Created mid-fi screens of possible solutions

I was limited to WEM design components and had to ideate solutions based on what was possible when building the site in WEM.

REFINE

Conducted unmoderated usability testing through UserZoom

I created a research plan reviewed with stakeholders and aligned on the scope of the redesign. I established a series of tasks for participants to perform to measure task success rate.

The main goals of this testing session were to:
• Compare two initial designs of Zoom Skill Toolbox Page
• Assess whether content is clear and easy to understand
• Gauge successful task completion of important tasks (finding lessons, quick links)
• Understand if the information architecture improved findability of content

REFINE

Final Outcome: Highlights

After synthesizing results from the usability testing and reviewing them with stakeholders + senior designers, I iterated my designs based on feedback and started creating hi-fi designs. Each highlight captures an aspect of the new ZLTS.

Pain Point #1: Content is unorganized and dense

Restructuring the Visual Hierarchy

I focused on reorganizing the visual hierarchy of the website. I reordered information based on how useful it was towards a user’s understanding of Zoom LinkedIn Training. I added CTA to each section of the home page and utilized colors to separate sections of content and draw attention to sections that encourage users to set up LinkedIn Learning accounts.

OLD HOME PAGE

NEW HOME PAGE

Instead of using stock images to represent the learning journeys I also redesigned the badges and cards for each module. I used Walmart Enterprise Branding colors and guidelines to develop the new badges. Additionally, I reached out to the PO and requested him to rewrite specific blurbs as they were vague and oblivious.

OLD BADGES

NEW BADGES

Pain Point #2: Limited understanding about the system

Home Page Redesign

The current home page is visually unappealing and text heavy. The CTA’s draw attention to secondary tasks and there is an information overload. As this is the first page users land on, it was imperative to include an informative introduction on everything the site has to offer.
‍
I restructured the home page into sections of information where users are exposed to information chronologically. My main goal was to help users recognize course options and provide brief introductions for each module.

OLD HOME PAGE

NEW HOME PAGE

Pain Point #3: Confusing Navigation

Tabbed Layout

The current layout presents all lessons on one page, user testing stated that it took long (1m36s) for users to find a specific lesson using this design.

Thus, I came up with the “Tabbed Layout”, which shows modules and lessons organized into a table of contents design. Users were able to find specific lessons quickly (47s), did not have to do much scrolling, and strongly agreed they would know where to navigate if they were to return to the site. This layout also provides fast paths for experienced users to arrive at their desired destination.

OLD NAVIGATION

NEW TABBED NAVIGATION

Final Design of Tabbed Layout for Zoom Skill Toolbox

Technical Design Changes

After reviewing my final designs with my manager, I learned that there were limitations to my design that weren't feasible to create in the WEM (internal website builder). I had to make changes accordingly, sacrificing some conveniency.

WEM does not allow the "tabs" component to link to a sub-page. When a user clicks on a tab, it must lead to content within the tabs container. This meant that our sub-navigation was completely useless.

1ST ITERATION SUB-NAVIGATION
Clicking on the "Zoom Skill ToolBox" tab will immediately lead the user to the learning journeys menu

FINAL ITERATION SUB-NAVIGATION
Clicking on the "Zoom Skill ToolBox" tab will lead you to a similar page as the home page, except the introduction section has changed into a brief introduction to the Zoom Skill Toolbox. Clicking on the button under the introduction will lead the user to the learning journeys menu.

Additionally, I had to remove the header image and include a section that allow users to return to the homepage.

Impact

When we first began the project, I sent out a survey to calculate the current Net Promoter Score (NPS) of the ZLTS. I used the NPS score as method of measuring the success of our redesign with quantitative data.

NPS BEFORE

[4 Promoters - 12 Detractors] =

-27% 💔

NPS NOW

[28 Promoters - 0 Detractors] =

88% 🎉

This project was very impactful for the enterprise team as there has been a business need to transfer the ZLTS to a new front-end software to increase site efficiency and consistency. During these 3 months, I personally implemented this website on the WEM and fixed every identified usability issue.

Takeaways!

Collaborating with Stakeholders 🤔

I worked very closely with stakeholders during this project. I learned that efficiently collaborating with stakeholders involves clear communication, active listening, and fostering a shared understanding of project goals. Regular feedback loops, addressing concerns, and integrating stakeholder insights helped contribute to a smoother project progression.

Communicating often and early 🔑

This was my first time working for a corporation with multiple design systems. I had to understand the limitations and possibilities of company specific tools and platforms. It meant constantly iterating my designs to align with their site builder and asking for feedback about the tiniest details.

Presentation and Documentation 📄

As the sole designer, I actively scheduled meetings with managers/POs. I asked questions concisely to make sure my design choices were clear especially because we worked remotely. It was important to document my design decisions and research studies as an intern for future associates to look back at if ever needed.

Redesigining the Zoom Linkedin Training Site

TLDR;

Thanks for being here. ٩(｡•́‿•̀｡)۶