IBM Skill Up – Diversity & Inclusion Learning Experience
IBM Skill Up is a five-week global learning series for educators and students, led by IBM experts and focused on career development. We redesigned the platform from the previous year to improve usability, accessibility, and engagement for a more effective learning experience.
Team
Design
Wendi Ma
Sonia Yau
Product manager
Justin de Freitas
Content design
Sophie Silkes
Vivian Chen
Engineering
Edwy Woo
Art director
My role
As the lead designer on this project, I was responsible for planning the project timeline, leading user research sessions, and hosting project presentations and feedback sessions with the client team. I ensured smooth communication with developers to guarantee seamless handoffs and oversaw the project pass to development. Additionally, I collaborated closely with the art director, who provided feedback and direction, to create a library of reusable and customizable illustrations that enhanced the platform’s visual appeal and consistency.
The problem
The original platform struggled with low engagement due to unclear navigation, visually similar components with different functions, and buried links that users often missed.
Long, unstructured paragraphs made content hard to digest, and key actions like event signups or registration weren’t clearly communicated.
These usability issues made it difficult for both educators and students to fully benefit from the platform.
Research methods
Design audit
We evaluated the design for usability and found issues like unclear value props, inconsistent navigation, poor accessibility (e.g., missing transcripts), and weak content hierarchy with buried links and overly long text.
User interviews
In team interviews, we found confusing navigation, inconsistent cards, and unclear separation between educator and student content.
Personas
We identified two user groups:
-
Students (14–20): Using the platform for classwork, they want engaging, easy-to-follow content.
-
Teachers: Looking to integrate IBM P-TECH into their curriculum, they need accessible, high-quality resources.
User journey
Through user journey mapping, we found that both learners and educators struggled with clarity. Learners questioned the platform’s purpose and how to access past content, while educators wondered about its value and how to share it.
Early Exploration and Direction
We began with a design audit to identify friction points in navigation, layout, and accessibility. To better understand user goals, my design partner Sonia and I each created user journey maps, then compared and aligned them to uncover gaps and shared insights.
With a short timeline and limited budget, we took a lean, collaborative approach. We began creating early wireframes in Figma to clarify direction, translate assumptions into tangible form, and begin testing right away. This allowed us to continuously iterate and refine the design to better align with both user needs and our design goals.
.png)
Opportunity
From the key pain points, we identified an opportunity to improve clarity, usability, and engagement across the platform experience. This led to three design goals.
Design goals
01
Clear, intuitive navigation that builds user confidence and trust
02
Accessible archived learnings for easy discovery
03
Making it easier to register for IBM Skill Up event, while promoting the IBM Open P-TECH program
The redesign
The redesigned homepage features more tiles and cards to improve content organization and make browsing easier. It also incorporates Open P-TECH’s updated branding, with refreshed colors and illustrations.
To help users quickly distinguish between different Skill Up sessions, we used colour-coded banners and icons for clear visual cues.
Tags
To help users quickly understand which content is meant for them, we added clear Educator and Student tags at the top right of the homepage. These tags are immediately visible on page load, and a toggle link allows users to easily switch between views.
My Contribution
After identifying pain points around unclear audience targeting and difficulty accessing relevant content, I explored ways to better distinguish educator and student views. I reviewed IBM’s design guidelines and proposed using visible role-based tags.
I tested different styles — with and without icons, variations in color, and multiple placement options (top right vs. top left). By gathering feedback from users during testing, I was able to iterate on the design and land on a solution that felt intuitive and unobtrusive.
CTAs
In the previous design, key CTAs like event registration and toolkit access lacked visual emphasis and were often overlooked. For example, the link in the “Check out our event for students” section did not stand out.
To improve clarity and guide user action, we introduced visually distinct banners with embedded buttons. Each banner highlighted a specific goal such as registering for all five events, signing up for Open P-TECH, or accessing a free teacher toolkit.
My Contribution
I explored different banner styles, testing colour schemes, typography layouts, and icon or illustration use while maintaining a clear hierarchy. I also tested multiple button designs, ensuring they followed IBM’s design guidelines and aligned with the overall brand and user interface experience. By testing these designs with different users and collecting feedback, I was able to iterate and refine the solution to better meet user needs.
Cards
The previous design did not clearly distinguish between live events with IBM subject experts and recorded or archived sessions. This caused confusion for users who needed to quickly identify whether they could sign up for upcoming events or access past recordings.
My Contribution
Recognizing the critical need to differentiate content types, I prioritized identifying the essential information that each card must convey to align with distinct user goals. I crafted tailored card designs guided by IBM’s design principles, thoughtfully applying iconography to signal different actions and clearly indicating whether links lead to external sites or internal pages. By emphasizing transparency and predictability in interactions, I aimed to reduce cognitive load and build user trust, ensuring the navigation felt intuitive and seamless, minimizing any potential friction or confusion.
Reflections & Challenges
The redesign was well received by the client, who valued the clearer navigation and easier access to recorded learnings. Differentiating content for the two main user groups—Educators and Learners—was a key success, and this approach was adopted in the 2025 update.
We built on the existing design system while adapting it to meet user needs. Collaboration with the design system team was crucial for refining our solutions and maintaining alignment.
As lead designer, managing the project timeline and quality within tight constraints was challenging. Early planning and regular feedback helped us stay focused and improve iteratively.
Working with a junior UX designer reinforced the importance of clear communication and setting expectations. Collaborating with content designers and project managers taught me to ask precise questions and translate vague requirements into actionable designs. Empathy and teamwork were essential throughout the process.
Full case study available