A redefined flow of curating content
Olapic is a business-to-business SaaS company with headquarters in New York City, USA. They offer 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.
Role: Product designer
I was tasked with being the responsible Product Designer to figure out the optimal way for media to flow through the Content Engine from collection to publication. I was in charge of the concept development, prototyping, and user evaluation along the way in the process. The objective of the project was to research, design and evaluate the most optimal solution, and thus I had to start from the beginning by understanding and defining the problem by listening to the users, to designing a solution based in the insights, to implementing it in an agile development process.
Lean User Experience Design
Design from early sketching to high-fidelity prototype
The design challenge
Every day, hundreds of users access Content Engine to collect, curate and publish the content they need for their social media campaigns, channels, and other marketing touch points. The existing Content Engine was built on intelligent algorithms, multiple interfaces with Instagram’s and Twitter’s APIs and human intelligence to find just the right content for the different brands (Olapic’s customers).
These brands have representatives that interact with the platform every single day. These users come from many backgrounds, and they all have individual workflows that the platform has to fit into. Whether it is to find specific content for a running campaign, or it is to start a new collection, the platform should always serve the user with the right functionality at every step in the user’s journey. The challenge was to understand and manage these different journeys, and then to come up with a suggestion for a solution based in this understanding.
The process was heavily inspired by Lean UX. This meant that it was highly iterative and about quickly developing the concept, testing it internally and externally and then learning from this to iterate on the solution.
This made it easier to fit in the UX work in the existing agile processes in Olapic.
Step 1: empathize and 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.
One persona was the day-to-day user of the platform. Her main jobs were to go to the platform, find content to use and then activate it.
Another persona was the manager of the day-to-day user, who was responsible for strategy, quality assurance and also to go through collected data.
The last persona was the manager of the manager. His responsibility was to make sure that the overall KPI’s were targeted and that the money went to the right places.
The persona that ended up being in focus for the project was the day-to-day user of the platform, since it was her workflows and experience that needed to be improved.
I watched several recorded user research sessions and analyzed online behavior data collected with the tool FullStory to understand the behaviors. The user research equipped me to move on with a thorough understanding of the users’ jobs, goals and their frustrations.
The existing platform
The Content Engine enables brands to moderate media collected from social media. The main interaction is to look through collected content, and then decide whether to approve it, reject it or group it with similar images.
The image to the left shows the main part of the existing platform. There are filters to narrow down the volume of content, and then there are different actions related to the media.
Step 2: analyze & Define
With an understanding of the users, their behaviors and motivations, we were then able to list the main jobs to be done in the Content Engine for the persona ‘Hannah’. We decided to map her jobs out in a user flow that defined the steps of each job. We created the user flow in the online software called MURAL. 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:
- 1. Moderate new content
- 2. Review moderated content
- 3. Tag content to streams
- 4. Organize content
- 5. Look for content to use
With these jobs outlined, I was then able to move on to ideating on the solution.
We used the user flow as a tools to align everyone on the team on the most important jobs to be done for the personas. The flow changed along the way as we got more insights.
Step 3: 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.
I used low-fidelity sketching as a way of concretizing and visualizing our initial thoughts of possible solutions in a quick and plentiful manner. This would create the ground for further discussion and help narrowing the focus.
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.
When I moved on to wireframing the concept, this also worked as a great communication tool with other designers and team members. I brought in my progress to our weekly design critiques to hear what other designers would say about it.
Step 4: 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.
Another large part of the new, redefined flow was the actions possible
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.
Step 5: implementation
The final vision and concept ideas were done in April 2018. The users were blown away by the new flow and design and everyone wanted to begin implementation right away. In May 2018, the first steps towards implementation were taken, and the implementation is still taking place.