Role
Lead Product Designer
Team
Project Manager, 2 Engineers, Director of Engineering
Platform
Web
Yahoo’s uploader tool provides editorial and advertising teams access to a CDN for hosting assets across the ecosystem. Most commonly these assets are used in Yahoo property content (News, Sports, Finance, etc) as well the company intranet.
The Problem
The tool provided a basic solution for the user. They could upload their assets and transcode their videos but this often required more steps than necessary. Additional tools were necessary to crop images before the upload process. There was also confusion as to how a CDN worked resulting in frequent question fielding by engineers.
Research methods used:
- Survey feedback from power users
- Brainstorm with engineering to discover their pain points and listen to ideas
- Analytics review
Key Findings
Finding #1
Overall user flow needed improvement.
Finding #2
Incorporate an existing internal cropping tool so users don’t need to prep their images externally.
In the case of multiple image uploads, a gallery will provide the opportunity to crop before saving.
Adding a couple options to the Actions made the list too long. I moved them into a drop down to allow for labels and to save space. I referenced the Yahoo design system for updated icons.
Opening the preview modal allows the user to access the other tools/options as well.
Users can choose to crop at this stage.
Finding #3
Add preview and transcode features in the video upload step. Previously, the user had to upload first, then transcode the file as an additional action.
Finding #4
Add an activity stream to assist engineering in troubleshooting user issues.
Finding #5
There is general confusion about what a CDN is, so we added an FAQ.
Updated design elements
Tradeoffs
When the user opens the tool, it loads with the most recent uploads within the entire company. I recommended allowing team-based directories for privacy and easier file navigation. Since that was not possible given the current setup and time constraints, I adjusted the design to add a directory/folder bookmark feature.
Solution
The final prototype incorporated a streamlined user flow, reducing clicks by 40%. Tooltips, error messages, and progress animations were added to enhance user feedback. The new features allow users to crop their images either immediately after upload or later. Additionally, the video upload action was enhanced by including a video preview and the option to transcode.