iMedia
MediaSpace, is the current media management platform at the University of Illinois, serves ~100,000 monthly users. Our design team was tasked with empowering people to unlock the full potential of learning content resources within the platform.
seconds average time reduced in search
search accuracy
task completion rate in video uploading
increase in user satisfaction
As a product designer, I revamped the platform's media upload, data entry, and search process, resulting in a more streamlined and efficient content creation and discovery process for users.
4 Months
1 UX researcher
1 Product manager
1 Data analysis
1 Accessibility specialist
2 Product designers
3 Developers
Interactive prototypes
The Problem
Instructors create and store engaging content, while students can access, download, and review multimedia materials offline.
However, users are struggle to organize and find important course materials.
For years, the university has received frequent complaints about lost media assets, requiring E-learning staff and faculty to recreate them repeatedly. The shift towards online learning, especially highlighted during the pandemic, underscores the necessity of effectively using our educational videos. As digital content continues to pile up, the costs rise and the value of our investments decreases. We urgently need to improve how we manage and utilize these resources to enhance educational delivery and reduce waste.
Define Problem Scope
The project began with an ambiguous scope, aiming to uncover the root cause of media asset underutilization. We conducted a comprehensive UX audit and stakeholder interviews, revealing that the problem stemmed from the upload process:
Inconsistent asset uploads and data entry were limiting search and sharing capabilities, leading to underutilization of valuable content.
Define Target User
From 18 user interviews, my Two-by-Two Matrix Analysis revealed E-learning staff has more complex behaviors than faculties. This informed our decision to prioritize enhancing the user experience for E-learning staff, with plans to add features for faculties.
Our design goal is to empower the Daily Disgruntled User into a Content Power User.
Upload - User Pain Points
E-learning staff regularly use the platform to manage and organize media for teaching purposes, performing tasks such as individual video uploads, bulk uploads, and metadata entry. However, they face significant pain points while completing these tasks:
1
Confusing data entry fields and settings
E-learning needs to input metadata for media search and content management. Human error often occurs in manual metadata input process and users also tend to skip non-required fields to save time.
2
Slow upload process causes anxiety
E-learning staff needs to help faculties with individual video uploads to store, organize and manage media for teaching purpose. They experience anxiety about potential data loss during the upload process.
3
Media and metadata mismatch in bulk uploads
E-learning staff bulk upload assets with shared properties, but mismatched metadata in CVS file and media folders cause tedious re-uploads and data re-entry for each video, wasting time and causing frustration.
E-Learning Staff - Scott
Define Solutions
How might we streamline media individual and bulk upload process that ensures standardized metadata input?
In leading collaborative ideation workshops with design, product, and development teams, I used a 'How Might We' question to guide us in turning insights into product features.
We prioritized design features based on pain points frequencies and crafted user stories together for team alignment. Our aim was to improve media upload efficiency and consistency while ensuring data integrity and usability.
Upload - Solution 01
The Metadata Completeness Indicator and Notification prompts users to complete data fields and alerts them to any incomplete information, reducing abandonment rates and ensuring comprehensive metadata for effective media search.
Predefined Selections provides standardized setting options that minimizing manual typing promote accurate metadata input.
Upload - Solution 02
In the existing upload process, users have no way to check the data. With the fine-grained progress tracking page, users can independently monitor the progress of each file and promptly verify the order of matching files. This helps them save the work of conducting separate investigations afterwards.
A metadata verification step is added to enhance the accuracy of batch data uploads.
Now, the system automatically compares the uploaded data with the database and displays potential error messages to alert users, eliminating the need for manual inspection of each data column.
Search - User Pain Points
E-learning staff heavily rely on specific searches to locate assets for content updates and quick troubleshooting. If they forget, they must email instructors, causing delays. The broken search function hinders content discovery and content reuse.
1
Users often forget or don't know the keywords
Complex keywords, including course codes and unfamiliar terminology, are hard to remember. Users often revisit searches long after courses end to update or retrieve teaching materials.
2
Users struggle with keyword-only content searches
When using only keyword searches, users often encounter the challenge of dealing with thousands of results. To ensure efficient access to relevant assets, users require the precision and flexibility of metadata-driven queries.
E-Learning Staff - Ben
Exploration and Testing
Users face search challenges with vague keywords for media titles, leading to overwhelming results. In testing, 5 out of 9 participants spent over 1 minute adding filters to refine the search.
I explored various designs to address this issue, trying to narrow down the search results before adding filters.
The most frequently searched categories are placed in the search bar to help users locate items quickly. However, I've discovered that users have complained about multiple search boxes. Some users expect each filter to operate independently, while others assume a default logic (like OR or AND).
Reduced search confusing by changing multi-search boxes to dropdown list.
The dropdown list displays clear OR search logic. Working together with upfront Media type tabs allows users to quickly filter out irrelevant content and focus on the media types that align with their preferences.
Search - Solution 01
I further enhanced the search by adding more parameters, transforming it from a vague guess into a targeted exploration. Users can now choose between OR logic or AND logic, giving them greater control and reducing confusion.
Search - Solution 02
I organized the filter list sequence via card sorting sections with users and collaborated with the backend developer to ensure seamless integration with the database.
Collaborating with an accessibility specialist, I ensured the design's compliance with WCAG 2.0 AA standards. The addition of a "Submit Filters" button alleviates the challenge screen reader users face with constant page refreshes on filter-heavy pages.
Search - Solution 03
Comprehensive Search Results now display the location of key information, enabling users to quickly assess whether a resource meets their course reference needs.
Usage History Tags show users how specific media assets have been used in the past, helping them discover new ways to effectively reuse content and maximize the value of existing library assets.
User Quotes
Finally, a search bar that actually understands me! Now I can focus on curating high-quality content.
The upload process makes it easy for even non-technical staff to contribute content.
Finding relevant videos used to be like digging for gold, now it's like walking into a well-organized library!
Reflection
Working with accessibility expertise, I enhanced design for all users, prioritizing HTML order, color contrast, and clarity for screen readers. This project heightened my awareness of diverse user needs, contributing to the university's commitment to universal design and inclusivity for all students.
During implementation, I had a disagreement with a developer over design changes. I learned to express my understanding of the engineering perspective, explain my design choices, and maintain flexible communication for better collaboration.
