BACKGROUND
Windows 10 created a new video editor as a part of the Photos app, I was assigned to the albums. I updated the design addressing existing customer feedback and creating clear entry-points into the video editing experience.
The Challenge
Create clear entry-points into the video editing experience, clear up clutter on the command bar and highlight the new auto-generated movies.
Role
UX Designer
Tools
Illustrator, PowerPoint, Axure, Excel
Research & Ideation
This particular project took a very agile research approach. We had regular studies to challenge and validate our design decisions. In addition to live formal usability studies, we also delivered A/B testing to Windows Insiders. As a result, ideation was happening all the time. There were lots of busy whiteboards and group brainstorm sessions.
Design Explorations
Research Findings
In an effort to clean up the UI, I did an overhaul of the control bar. I updated some copy and icons to make actions more clear, but some actions had further reaching impacts. In the previous version of Albums, there was a button that said “Upload”. There was no additional help text or indication that this would upload the album to OneDrive.
What was worse, after you clicked it, the button simply disappeared.
I proposed removing the button from the control bar and putting it into a new footer to provide more context and information about the album.
What was worse, after you clicked it, the button simply disappeared.
I proposed removing the button from the control bar and putting it into a new footer to provide more context and information about the album.
There were many stakeholders who worried that taking the button off of the control bar would decrease the number of albums uploaded to OneDrive. When we looked at the data after the change, there was indeed a drop in the number of uploads. However, there was also a rise in engagement. As we looked into it more, we found that by moving the ambiguous button and providing more context, we prevented users from unintentionally uploading their content.
Final Design
Header Video
The first major design challenge to tackle was how to handle the album header. With the introduction of the video editor came the addition of videos that are automatically generated from an album. The new video would take the place of the former header image, but a simple swap wouldn’t be the best choice. For one thing, many videos would be a mix of portrait and landscape oriented photos and videos. The wider and shorter the video frame, the more likely the system would crop the video to only show noses or stomachs. Not the best way to showcase the new video engine.
After extensive user research, I landed on a design that minimized cropping while still showcasing the video and maintaining a clean look.
Entrypoints
The other major goal for the redesign was to get users into the new story editor. Using the standard controls would not be noticeable enough to drive people to the editor. Also, it was important to leave the video unobstructed so users could enjoy their content.
The final design uses big, round clickable buttons under the video. These buttons are currently the most popular way to enter into the story editor experience.
The first major design challenge to tackle was how to handle the album header. With the introduction of the video editor came the addition of videos that are automatically generated from an album. The new video would take the place of the former header image, but a simple swap wouldn’t be the best choice. For one thing, many videos would be a mix of portrait and landscape oriented photos and videos. The wider and shorter the video frame, the more likely the system would crop the video to only show noses or stomachs. Not the best way to showcase the new video engine.
After extensive user research, I landed on a design that minimized cropping while still showcasing the video and maintaining a clean look.
Entrypoints
The other major goal for the redesign was to get users into the new story editor. Using the standard controls would not be noticeable enough to drive people to the editor. Also, it was important to leave the video unobstructed so users could enjoy their content.
The final design uses big, round clickable buttons under the video. These buttons are currently the most popular way to enter into the story editor experience.
INSIGHTS
This project taught me how to better work across teams with different goals and objectives. While compromise is inevitable, it takes trust to really work together. When teams work together, rather than against each other, they will ultimately build a better product.