SHUTTERSTOCK EDITOR MOBILE
In Q4 2019, Shutterstock netted a deal with a platform partner that included creating a mobile version of its editing tool, Shutterstock Editor.
PROJECT OVERVIEW
ROLE
Lead designer and researcher
DELIVERABLES
Designs to make the existing Editor mobile responsive
Research to validate time to task success
KPIs
Parity with (or reduction of) time to task success for most-used features.
EXISTING EDITOR EXPERIENCE
Editor’s key functionality is broken into 3 groups:
Left menu for additive actions (ex: adding an image to canvas).
Right panel for manipulating and editing canvas objects. Given its higher complexity and dynamic logic, we focused primarily on these actions.
Canvas actions for positioning and transforming objects.
FOUNDATIONAL RESEARCH
Using a combination of open card sorting and evaluating click tracking (through Google Analytics and Mixpanel) I evaluated the tool’s existing information architecture and provided recommendations for prioritizing most-used features and regrouping features so they could fit within a phone’s viewport.
CARD SORTING
I conducted card sorting with users of existing editing features to see how they would naturally group them.
KEY TAKEAWAY
Manipulation features like Flip and Delete were generally viewed as higher level actions that we pulled out into a more quickly accessible menu.
CLICK TRACKING
I dug into the click tracking on editing features in order to prioritize the most-used features in the IA.
KEY TAKEAWAY
Features like Crop and Filters were most-used but low down in the editing panel UI. These were moved up.
Disabled actions had high click rates, indicating confusion. We removed unusable actions to declutter and reduce misclicks.
THINKING AHEAD WITH DESIGN
The team had a tight timeline for this project so design explorations occurred in parallel to technical explorations. As a result, a series of designs were created that would allow the team to iterate from an MVP design (reusing as much existing code as possible) to an ideal design.
INCREMENTAL PHASING OF DESIGN
From left to right, one can see the steps discussed with the team to move from using all existing components to custom mobile components.
NORTHSTAR MOBILE FRAMEWORK
By evaluating competitor applications and existing user workflows, I designed a page structure that would allow users to view all editing options without losing sight of the canvas. Leveraging the research findings, features were prioritized so that most-used features appeared immediately within the viewport and lesser-used features were hidden in the overflow.
MVP MOBILE FRAMEWORK
To achieve as close of an experience to the Northstar design as possible while still reusing as much existing code as possible, we implemented a quick actions menu that appeared next to selected objects, allowing them to access the menu of editing options. The menu was redesigned based on research findings to move most-used features to the top.
KEY IMPROVEMENTS
Based on research findings, the following improvements were integrated into the mobile design.
PRIORITIZING POPULAR ACTIONS AND REMOVING UNUSABLE ACTIONS
All features and sub-features were re-ordered to reflect click rates and disabled actions were hidden from the UI to reduce confusion. This allowed us to make commonly-used actions more easily accessible and findable within a mobile viewport. In testing this design, we saw a decrease in time to task success for our 4 most commonly-used features of 2–6 seconds.
QUICK ACTIONS
Higher level manipulation features — Copy and Delete — were pulled out into a more quickly accessible “Quick actions” menu, alongside the trigger for the full editing panel. Since users grouped these differently from other editing features and used them more frequently, we separated them and exposed them faster.
ISOLATION MODES
As part of our MVP design, we included the ability for users to preview canvas objects while simultaneously manipulating editing handles. For features like Crop, this was a necessary feature since users would be unable to crop an image with the editing menu open on top of the workspace. This allowed the team to reuse the “isolation mode” pattern for other features and laid the groundwork for moving us towards our ideal design.
CANVAS INTERACTIONS
I designed guidance for handling touch interactions on the canvas to create as natural an experience as possible. Gestures like panning, scaling, and rotating were all introduced into the mobile design.
NEXT STEPS
The MVP was delivered to our API partner at the end of April. The team is continuing to develop and improve the experience to progress it towards the Northstar design. Additionally, the team is strategizing how to roll the mobile experience out to Shutterstock’s e-commerce customers.