" ...the site did not require a significant redesign. A large part of this project was understanding what should not change as much as what should. "
Project Background: Designers were randomly grouped and tackled a problem. Solutions were presented to a panel of industry professionals. My team was awarded 1st place out of 27 teams.
Overview
Process ❖User Research ❖Define problem ❖Ideation ❖Final submission
My key contributions ❖UX Research lead ❖UX Design ❖Project Management
Team ❖Four designers
Tools used ❖Figma ❖Google Drive ❖Mural ❖Calendly
The Problem
E-learners have responsibilities (demanding jobs, families, etc.) which require most of their time.To reach their EDU goals they need a platform that is easy to use, responsive, and flexible.
Our Solution
I created and lead a mixed methodology approach (user interviews and usability tests) to identify most common user issues preventing them from starting and finishing courses. My findings lead to 3 key opportunities that would make the most impact within our time frame: (1) Redesign layout of key featuresthat power users enjoy, but most users forget, or are unaware of. (2) Minimizing visual stimulus to prevent information overload and choice paralysis. (3) Implemented accessibility standards that support the current design structure.
redesign Impact
❖ Addressed key pain points users often encountered when searching for, or continuing, a course. ❖ Redesigned components to encourage users to return to their courses and feel motivated to self learn. ❖ Better balance of user and business goals with updates to the hero section of the landing page, mostly with visual spacing. ❖ Added design choices to encourage search and browsing by improving the highly-used search bar. ❖ Reduced cognitive overload on the landing page and course selection page with updates to information architecture and grouping user's most sought out details.
Want to skip ahead? **Click hereto skip straight to our design decisions. **click hereto skip to my learnings from this project. Or scroll down to read through my process leading to the findings and solutions above.
Time crunch: Mixed Methodology Research
I advocated for, and then created our mixed methodology approach for our research (user survey, interviews and usability tests) as we were working with short time frame, but needed deep knowledge of user behavior and needs to ensure an effective redesign.
Click to see details about the Survey
User Interviews and Usability tests -I led 80% of all user interviews. - I handled all communications with participants before and after testing.
Click to view a couple of interview script questions
Click to view a couple of usability test script tasks
Key Research Learnings Users are: ❖ Consistently overwhelmed by landing page content. ❖ Do not finish courses on Udemy due to motivation or distractions. ❖ Most drawn to courses by price, reviews, teacher detail, thumbnail.
Synthesizing Data
We hit a road blockorganizing user data due to theincorporation of distinct types of user data: user interview data and usability testing data.
I suggested we incorporate a Venn diagram, which allowed us to create clusters in accordance to proximity to overarching themes of emotionally-driven themes and content-driven themes.
Click to see the research-informed questions that led to our design solutions
Redesign Decisions
Based on user data and our goal to redesign for most impact focused on the following key areasof the homepage: ❖ Navigation bar ❖ Hero section ❖ My Learning section ❖ Homepage body that showcase additional courses
LoFis Two designers and I utilized Figma's chat functionality to discuss ideas, progress, and provide feedback. LoFi iterations of the navigation bar:
A LoFi iteration of the homepage
Final Design Decisions HiFis I collaborated with one designer in Figma on final designs. Udemy old navigation bar:
Our redesigned navigation bar:
Design decisions: ❖ Moved search bar to the center of navigation bar: usability tests indicated the search bar is the most used item on the navigation bar ❖ Added speech-to-text functionality to the search bar for accessibility and inclusivity, and its a very popular feature on competitor platforms. ❖ Updated icons to rounded buttons, to better visualize the touchpoint, and increased their size to followGoogle’s well-known and widely used Material Design Standards. ❖ Simplification of navigation bar: IA was updated to simplify and remove focus from items new and power users don't look for.
Udemy old Hero Image:
Redesigned Hero Images:
Design decisions: ❖ Inline links were updated to buttons to create a stronger, more eye-catching CTA for users and increase click rates
❖ Updated imagery to be less abstract, less focused on daily sales (which an overwhelming amount of users strongly disliked) with images of productivity actions, and stronger Udemy colors making hero items more memorable and motivating.
Udemy old 'My Learning' section:
Our redesigned 'My Learning' section:
Design decisions: ❖ Updated the ‘My Learning’ link to a purple button (on the right of both versions) for a stronger CTA and visibility. ❖ Added course thumbnails for each class to increase visibility of active courses and draw, creating incentive to continue courses. ❖ Added a numerical value to the course completion bar to indicate track completion progress, taking the guesswork out of course progress.
Final Submission
Final homepage HiFi:
Challenges of the project
❖ As one of the most popular e-learning websites, Udemy did not require significant structural re-design. A large part of this project was understanding what should not change about the website as much as what should. ❖ Without a clear objective on behalf of the client, namely specific business goal(s) set by Udemy leaders, it was difficult to understand the best place to begin. At this state I recommended we study the brand, and use their focus, voice, and company values to create matching business goal(s).
Thank you — yes you!
I had a great time working with the team to discover, and solve problems. A special thank you to the team at IterateUX.
