Editor was conceived as a lightweight image cropping tool that Shutterstock customers could use to make simple edits on licensed images. By the time I joined in early 2016, the team had already completed several rounds studies to conclude that there was an opportunity for an image editor that could replace more complicated tools such as Photoshop.
As design lead on the Editor project, I worked closely with associate designers and partnered closely with product owners to define the vision and gathered user feedback that informed product decisions.
I worked with the product manager to define requirements and applied design thinking to uncover opportunities, customer pain points and provided solutions which solved customer problems.
I presented research findings to leadership, provided analysis and design concepts that helped bridge the gap between business, product, and engineering. My efforts inspired the company by giving voice to the customer and created more empathy necessary to build better products.
I collaborated with internal and external stakeholders to ensure business needs and user goals were coalesced into an aligned strategy. I coordinated with engineers, visual designers, and copywriters and communicated issues as they arose to meet deadlines.
I collaborated with creative partners on the design systems team and contributed new design patterns to Shutterstock's Studio design system. I upheld a cadence of design reviews with 8 other core platform designers to ensure a consistent Shutterstock user experiences.
I paired with engineers from concept through delivery. Throughout the design review process, we collaborated to iron out edge cases. I monitored KPI's of released features that leveraged new data to iterate towards better solutions.
I designed and crafted each feature with attention to detail and provided developer specifications for handoffs. I partnered closely with engineering through the use of design review sessions to ensure delivery of a high-quality product. To validate my designs, I ran user tests to remove uncertainties and presented my findings to galvanize the team towards usable solutions.
Shutterstock Editor launched as a MVP capable of cropping images after a customer download. After the release, feedback indicated that there was an opportunity to create additional features which help users with other parts of the post download workflow. At around the same time, Shutterstock’s grand vision was to become a creative platform offering end-to-end solutions. The features which would be built on Editor’s would one day be added to various userflows within this new platform. Our immediate challenge was to capture more parts of the customer workflow by entering the creative workflow space. By offering existing customers an expanded set of creative tools, we hoped to create an experience where customers would create and publish creative projects within our ecosystem. We looked to these products as the main competitors in the space:
Editor needed to identify a baseline set of features which customers wanted to use, while avoiding the complex user experiences that plagued apps like Adobe Photoshop. Our customers were already using those tools and were likely subscribing customers. Persuading them to try a new product would pose a significant risk.
To get to market quickly, we looked to existing design tools and designed a framework that used proven patterns. With this in mind, we set out to define the roadmap of what needed to be built and how much resource it would need.
Because we were building a product from the ground up with a clear idea of what needed to built, design and development were working in parallel streams to ship each feature. Design had a 2-3 sprint head start, and I led each design kickoff with a workshop, followed by discovery, and validation. Once designs were completed, I would work on the next feature in the roadmap, while concurrently providing design feedback to engineering as they were developing each feature until they reached the production site. This method of working was effective and helped us ship many features on time. Unfortunately it had a hidden cost. We were heads down pumping feature after feature, and over time, we stopped who we were creating products for and made too many assumptions.
Working from this feature-driven perspective with a fixed deadline meant features were lined up one after another. There was a lower margin of error. We wouldn’t always be user testing all features. If we thought a feature was straight-forward enough, we would bypass testing and move on to design the next feature.
The amount of pressure on UX further intensified when the dev to design ratio ballooned from 4:1 to 8:1. We had to coordinate and communicate effectively to deliver the project on time and within budget.
Although we had to cut corners where possible to meet deadlines, we were fortunate enough to have research from customer and market insight to help drive the planning process. These are the key insights of our customers that helped define the product:
Shutterstock Editor is a simple, easy-to-use design tool for creative professionals. Whether you’re creating from scratch or looking for impressive templates to deliver amazing results, Editor helps you create amazing designs in minutes. We wanted to offer an exhaustive list of features that could help them get the job done faster, without feature bloated UIs that customers were afraid of. We wanted to let our users know that we cared about making them look good in front of their bosses and feeling great about their designs. We wanted customers to know we would always be there to help them create better designers.
I hypothesized early on, that to avoid a complex interface which supported the growth of features coming down the pipe, a new UI update would be necessary at some point in the near future. Having said that, I did not want to distract from the immediate task to deliver the MVP, deferring to instead, focus on leveraging the current interface and maximizing the current framework. At a later point in the project, we eventually created a new framework to support the addition of new features.
To turn our photo editor into a design tool, we needed to design interactions for the CRUD operations. I researched similar applications and came up with a framework of interactions that could be repeated across different object types.
Once we began to introduce more states to the design workflow, we needed a way for users to save their design. This posed one of the biggest challenges for the team. We had aspirations to become a standalone product, but could not bifurcate the product from the image page. The company was unwilling to invest further resources to build up SEO for a standalone Editor. As a result we stuck with numerous entry points from Shutterstock that did made the product hard to find. This decision would come back to haunt us later.
As the number of features grew on the app, we needed to reduce the visual clutter presented to users. We also started to notice the left canvas toolbar needed to be simplified. We explored many options. Our biggest concern was how users felt about not being able to see the icons. Because we had plans to rapidly increase the number of features we were adding, we needed to visually weigh down the number of alphabets used on the UI.
My gut told me that removing the labels would diminish discoverability and intent to click, so I decided to validate the designs through user testing. Testing the options, revealed that users were ok without the labels, so long as the tooltips were instructional and representative of what the feature might do. The testing group were also a group of highly enthusiastic designers who were already primed for action.
I created prototypes of differing fidelity based on their importance to the overall user experience. For flows with high visibility that posed a risk, I used Invision to link key screens together. For micro-interactions, I used Origami and coded them. I also shared the prototypes with customers and user tested with them.
Below are some screenshots of the final product when we launched Editor 1.0
The product was well-received when we finally launched! Overall we had positive feedback. We ran a large scale baseline survey and learned 82% of users reported they were satisfied on a 5 point scale.
We celebrated the successful launching of Editor. We had tight timelines, dealt with unfair expectations and delivered a high quality product with great numbers. We saw more designs being created and more downloads since the launch.
We had launched a product that met the baseline needs of our customers to create, edit, and publish designs. Yet, after running post launch surveys and interviews with customers, we had room for improvement. After the launch, we kept a close eye on our customers. We knew there were big gaps in the product and needed to formulate plans for follow-ups. It was a surprise to the team when we learned that many of the issues reported mirrored what we had discovered during usability. There were issues that were beyond the scope of our project for which there would be no easy fixes. We had grown the feature set so quickly, that the framework was barely able to support all the new functions. The roadmap included aggressive targets post-launch which did not allow for time to tackle accrued design debt. We had information architecture issues and were concerned with the structuring of content.
When I look back at the launch of Editor, I am proud of what we accomplished (somewhat). Listening to customers tell us how our product helped their lives validated the hard work the team put into making Editor come to life. We took the lead of creating the first workflow product for Shutterstock under intense deadlines and delivered a feature-rich product that embodied a vision of what the company aspired to become. That said, we made many mistakes along the way. We were given tight delivery deadlines and weren't disciplined enough to stop ourselves when we didn't story workshop to gain customer perspective, choosing instead to rush towards delivering features. We dove right into design reviews of designs that should have been user tested. The mandate from stakeholders to get to 'feature parity' with our competitor led to a waterfall-like process which prevented us from consistently using feedback to inform our decisions. Strategic business decisions from executives prevented the bifurcation of Editor from Shutterstock, which made user experience decisions difficult. We weren't focused enough from many perspectives. We tried to satisfy too many customers and created too many solutions which our UI framework could not support. We got lost in building features and created unnecessary complexity. Most importantly, we weren't dedicated to product principles based on what we knew about the user and overtime, became disconnected with the initial goal to provide users with a simple tool for creating designs for business needs. Today, Editor serves many customers who use the tool to create designs for their business needs. We have a lot of work ahead of us to evaluate the user experience and seek opportunities to improve upon what we built. We are far from finished. I am proud of the product and what it represents, setting high standards of interaction design for the organization. In creating Editor, we exposed a lot of product issues at the company level, that needed to be addressed. We are in a better place to learn and improve. In launching Editor, we paved the way for Shutterstock's goal to become a powerful creative platform.