A redefined flow of curating content

Product Designer @ Olapic 2018

Summary

Responsibilities

Concept development, sketching, prototyping, and user evaluation along the way in the process.
Collaborating with engineers to implement the solution to pixel-perfection.

Problem

Olapic offers a service that enables brands all over the world to collect, curate and publish social media-generated content for their marketing channels. All this happens in the main part of the service – the platform called Content Engine.

Through research, found that users spent too much time finding and organizing content in Olapic’s platform. They also couldn’t find enough good, high-quality content for her campaigns. And this in turn led to businesses having a hard time proving Olapic’s return on investment.

Solution

Implement a redesign of the Content Engine that centralizes content in one place to make it easier to find content and reduce number of actions for publishing content.

Our goal was to increase the amount of published content by simplifying the content curation flow.

Reduce the time it took to moderate content by 50%.
Increase the amount of approved content by 10%.

Process Overview

Empathize & Understand

To get us started, it was essential to observe and understand how the users interacted with the platform. The better I understood their behaviors and interactions, and the underlying mechanisms in the system enabling these, the better I could challenge the status quo of the platform.

Rather than trying to understand everyone using the platform, I used already defined personas to uncover essential user aspects. Olapic had previously developed three personas that functioned as representations of the most common users of the platform.

The persona that ended up being in focus for the project was the day-to-day user of the platform (Hannah), since it was her workflows and experience that needed to be improved the most.

Analyze & Define

We decided to map Hannah's jobs out in a user flow that defined the steps of each job. This enabled all roles on the team (manager, designer and developers) to define the flow together in several workshops.

From this exercise, we had defined five main jobs for Hannah to do when using the platform:

Moderate new content
Review moderated content
Tag content to streams
Organize content
Look for content to use

With these jobs outlined, I was then able to move on to ideating on the solution.

Ideate

With an understanding of the current workflow of the user, we were able to narrow down the focus on what elements that had to be there in order for the platform to serve the user in her different jobs in the most optimal way. This led to the next phase of sketching out the new UI for the concept that would incapsulate all the findings.

The sketches included “hot filters” which were previously used filters already applied and easy to close, different buckets for the content depending on where in the flow it was, and then a search bar disconnected from the filterpanel.

The low-fidelity sketches functioned as a means for discussing the future solution, the elements in it, the visual and semantic prioritization, etc. As soon as the team approved the direction, I started sketching in higher fidelity to get a sense of scale, proportions and look. The higher fidelity sketching ended up being wireframes that would let everyone understand the direction of the design better than with the low-fidelity sketches.

Prototype

After having sketched out the first concepts in higher fidelity, I moved on to creating a prototype of the desired solution. The goal was to be able to quickly get internal validation and then move on to external user testing with real users. We ended up talking to many internal stakeholders including other designer, developers, account managers and sales people to hear internal thoughts.

Then, we moved on and tested the solution on about 10 external users from different brands. The feedback we got was invaluable and allowed us to make informed decisions about further iterations.

The following screens show the final result of the process.

New look, New flow

The new look is more simple, cleaner and with focus on the most important part: the content.

The content flow is divided into three main sections: queue, reviewed and media library. The three sections hold content through its journey from having been collected, to rights granted to then being publishable.

New modals and new actions

Another large part of the new, redefined flow was the actions possible in the modal. These modals allowed the user to focus on the most important jobs-to-be-done: view info, tag to stream and ask for rights.

Media cards

In addition to the overall flow and the modal, the media cards were also rethought and redesigned. I ended up designing all possible interactions with the media cards – depending on where in the flow they were.

Results

Metrics to Prove Success

Approval time got reduced by 74% (from 254 to 66 hours).
Amount of approved content increased by 12%.
Customer retention was improved by 28%.
NPS score improved from -14 to +31.