Shutterstock EditoR

simplifying Shutterstock’s online DESIGN TOOL

www.shutterstock.com/editor

To comply with my non-disclosure agreement, I have omitted confidential information.

MY ROLE

I am currently the UX lead for this design tool. I designed the new homepage that helps users start new projects. Here, users can manage past works, shop through the galleries of design templates and gain inspiration. I also helped decrease lostness and improve user traffic by 100% and overall usage by 36%.

Impact

My work increased search completion by 36.6% and traffic into search by 85.6%. It also improved lostness in searching, setting a preset size and changing the font color by 55.7%, 44.8% and 18.9% respectively.

How might we Decrease the usability gap?

Our team had come a long way to create Shutterstock Editor and its many features but our users were designing and downloading were rather simple content. In fact, our data showed that most of our users were using less than 5% of Shutterstock Editor’s features. Our focus then became to decrease the usability gap.

The discovery

I practice mixed research methodology working with analytic tools such as Mixpanel and Google Analytics and at the same time supporting further insights with qualitative research methods. I conducted multiple 1:1 user interviews, usability testings, contextual inquires and a focus group. All the ideas come from understanding user behaviors and where the opportunities lie.

1. our users aren’t who we thought they were

I noticed a discrepancy between the users personas we are working with and the people who were actually using our platform: our user persona were creatives in the creative industry but rather, my research and analysis showed that our users mostly consisted of non-creatives regardless of the type of industry. Users were using very basic features and enjoyed the pre-made design templates that Editor provided. In addition, user interviews demonstrated that users knew only few of the standardized design icons and had trouble starting a design. Eager to look further, I decided to host a focus group of non-create group of users to test if they could be our new target users.

focus groups

I decided to host a focus group with two groups of novice design tool users: one with little to no exposure to design tools and one who were more intermediate. For each of the groups, we found out about their background, workflows, work tools, tool features, and their associations to existing tools.

I was able to uncover how non-creative users used stock images, what tools they were using and which design tool features were essential to them and most importantly what tools they found most attractive to them. These group of users didn’t have access or felt the need to use expensive and sophisticated tools. These group of users used stock assets in their everyday work but did not have the right tools in hand. They would depend on Google presentations or use Microsoft Paint (I KNOW!).

Using the findings, I made many UX recommendations and shared them with stakeholders throughout the company, of which we decided to focus on these findings:

1. Users don’t understand standardized design icons so when they are placed within a screen with many unknown icons, they feel overwhelmed.

2. Users don’t feel empowered or inspired when starting a design project.

3. Users often recycle their previous designs.

4. JTBD - Quick and easy: It all comes to creating high quality design in the shortest amount of time and effort.

5. Users, regardless of their design expertise, would rather have more features than less.

These all pointed to the fact that our users didn’t feel empowered and had low self-efficacy. To give them inspiration and a starting guide to create beautiful content with the beautiful stock asset from Shutterstock was crucial.

2. Simplicity ≠ less features. simplicity = perception of being easy to use

Coming into the team, there were many stakeholders who suggested that Shutterstock Editor needed to be “simple” and “simple” meant that there should be less features and more focused features. However with moderated 1:1 research along with the findings from the focus group, I started to realize that this wasn’t the case. I’ve found that regardless of one’s background and expertise, users wanted to have the option to be able to do more than not.

I like that this tool does more than Microsoft Paint. I don’t think Photoshop is the tool of the future. It’s just too hard to learn how to use it. This tool looks like I can do what I would do on Photoshop but without having to learn how to use it as much.

What was hindering the users from experience this was the perceived difficulty of the tool.

This tool looks like a tool for professionals, I don’t think I will learn how to use this any time soon.

Here, you know how to use photoshop, you can drive this.

3. behavioral metrics: task success rate, time to success, lostness

Because I make design decisions based on data, I decided to grasp a quantitative understanding of the current UX of Editor by measuring the success rate, time to success and lostness of our 11 most used features.

task Success rate

After carefully going through user testing recordings, I found that users were having trouble completing four tasks with applying an image background at only 13.3% success rate. The task rate was so low because there was an error in the way we were handling the art board.

Time to success

On a range of time to success where users took 2 to 5 seconds to complete a task, there were three anomalies that took an average of 30 seconds to complete: Image search, setting a preset size and then changing the font color. To better understand why the time to success was so long, I went further to look into the lostness score of the three features.

Lostness

Looking into the lostness score of the three features, I found setting the preset size didn’t have a lostness problem but image search did with 0.77 and changing font color with 0.5. This helped me set a priority to the changes our team had to make and influence the product roadmap more effectively.

The reason that setting a preset size had a high average and median time to success but low lostness was because our drop down UI didn’t show all the options because the drop down extended past the browser height. Most users who were using IE especially with those who had browser extensions could not see the last few options. This led them to search for preset sizes elsewhere, extending their time on task. However, since our preset panel on the left was very discoverable, the lostness score was low.

Users were lost searching for images because users were going into the Elements panel instead into the Search panel. This was due to the fact that users thought that the search icon meant for largely for searching, not images specifically. Instead users were going into the Elements panel and selected through Shapes, Icons and Emojis tab to see if they could find images within.

Users were lost in finding how to change the font color because our font color is sectioned off in a different panel called Fill color outside of the font options. Since fill color didn’t make sense to the average user and was next to Stroke color which was also jargon to the user, users had trouble discovering how to change colors.

the Challenge: make shutterstock editor simple

Improve usability

Redistribute, Clarify & Prioritize

Shutterstock Editor necessitated a lot of vertical scrolling from the users to discover our features so I decided to redistribute and breakdown features. I also prioritized our key features by collapsing secondary features on default instead of having them all opened like we used to. This change in particular increased the usage of our crop tool by 25%.

I updated the persistent tool for better organization of information and better discovery. I updated the layout and added labels. I also updated the Advanced tools to Image tools and regrouped the Crop tool in this section.

For better visibility of the tools and organization, I decided to divide the Filter section into two (Filter and Effects) and made them collapsible. I also changed the design of sliders so that the icons were more visible and there was a better visual hierarchy.

I updated the labels to use plain language, updating Stroke to Border color and moved Fill color within the Font section.

Users didn’t expect that Search was for searching images and instead went to Elements. We decided to update Search to Search images.

Provide guidance and inspiration

Several qualitative user research discovered that users were having trouble starting projects and managing them. To support these users findings, I decided to expand the ask to build one home page to three pages:

1. My designs: work management and retrieval

The My designs page was intended to provide a starting guide for users. It not only shows a selected of templates the users may find interesting, the users can go through the carousel to look for more. Also, they can visually see the designs they’ve created before and easily manage them. Since our team practice agile development, further features like editing, searching, deleting designs on this page is planed for later.

2. Templates: a starting guide

We have a wide selection of templates but we do not have high usage of these templates. To guide users to use more of these templates, I decided to dedicate a page entirely for templates. this way users can not only easily go through the selection, they can also discover other types of templates that they can use in the future.

3. Discover: inspiration and learning

Editor had a large list of posts written on the tool but it was very difficult for users to read them and gain inspiration while on the tool. Instead of having users find out related information on search platforms, I designed a way for user to find them directly on the web app by creating a Discover page. This could be used no only to provide users with information and inspiration but also to showcase some of other Shutterstock tools.

Leadership

I’m Shutterstock’s annual hackathon winner! Oh boy do I love hackathons. Our team came up with an idea to provide free Shutterstock SDK (called S-Free-K!) to developers and designed an attached advertisement to help with user acquisitions. This idea is currently being looked into by the BA team to put into production!

Frustrated with some of the product decisions that had been made before, I also decided to hold a focus group and was able to showcase my findings to multiple stakeholders in hopes to gain more initiative to support the user based not looked upon before.

Learning

This product was certainly a UX challenge as I wasn’t dealing with a linear workflow; rather, this product behaved like multiple browser based web apps that had dependency on each other. Hence I worked heavily with the developers and came up with solutions that not only appeased the user but also the performance and the technical constraints.

Prioritizing feature development and designs was always a challenge. Being able to articulate the problems, solutions and the supporting evidence to stakeholders was challenging but I quickly realized that showcasing data was very helpful in making an impact in the product roadmap and decisions.