Working as a product designer for the Amplify desktop platform.
Collaborating with designers, product managers developers, AMs and customers in all phases of the product delivery lifecycle (Discovery, Research, Design Testing & Measuring).
Case study #1 - Content Revamp
In this case study, I will provide insights into my thought process, the methods and tools I used, and explain my reasoning and thoughts behind the decisions I made.
Intro
The content creation section is one of the most important in the user journey.
Every user needs to upload, edit and track the content.
The “before” solution had many defects;
- Users had to scroll up and down between the sections while working
- Users made manual labor while the automatic version wasn’t enough prominent
- Lack of a proper preview (which is very important)
- The current design can’t scale for new features and product vision (Carousel and video support).
Research & insights
This project was led by me with the support of my product manager and the front-dev as a partner, we made a big change.
- KPIs were set to measure success in the process and post-release.
- Data was collected from the BI team, users and online tools.
- Concepts were created and tested on an early stage.
- New layout designed with dev to have as lowest pushbacks as possible.
- The feature was exacted with every phase release
- We got really great feedback from users 🎉
Early-stage prototype (test it)
Next stage prototype (test it)
User control
In the “before” solution, as a part of the flow, the user entered a URL and the platform auto-crawled an image and a title from the website. Our data showed that only 28% of the users used that image and title. I removed this feature to see how it affects the users. Users didn’t understand who moved their cheese, and although they didn’t intend to keep the crawled data, they asked to have this feature back. I’ve added a checkbox to bring control back but kept it unchecked (the system crawls in the background so the user can turn it on and see results immediately).
Immediate feedback
Every website that present the content pieces has a different CSS, causing the headlines getting cut and affect preformance. The preview pane on the right panel shows how the headline will look at the 4 most common dimentions Outbrain works with, so the user could adjust the text. There’s also a warning next to the headline field so the user gets immediate feedback.
Frictionless flow
One of the key flows is creating variations of the content pieces in order to test which headline and image works best. In the old design this feature was under a modal and the CTA was undifferentiated for some of the users.
In the new design the variation is embedded in the flow, and the user doesn’t need to make an extra effort in order to create it.
An immidiate feedback is being shown so the impact is very clear.
Built to Scale
Another feature was the carousel that was embedded while keeping the same layout for a continuously experience.
Case study #2 - Demographic Targeting
Intro
Demographic targeting helps advertisers target the right audience. Advertising based on certain demographics reduces unnecessary impressions and saves the budget by only showing ads to people who will be interested.
The "merge" Challenge
When Outbrain marketers wanted to narrow their campaign audience, they had a very limited “audience interest” settings.
So a 3rd-party vendor was called to the rescue 👏.
The problem was how to merge the new solution in the current component, while:
- They have a different tree hierarchy
- The vendor charges an extra fee
To clarify the fee requirement I added the cart icon next to the title and highlighted the price per click on the description popup.
The "error edge-case flow" Challenge
Observing users using the prototype brought up a new insight.
The majority of the users have picked categories within the selection limitation (up to 20 categories) but some of them preferred adding more than 20 and then eliminate the extras.
My first intuition was to block the users from adding more categories when reaching the max, but I decided to keep the limitation as a warning while removing the adding limitation so users can select as many categories as they wish, and then remove the extras.
To be sure about this decision I used event tracking snippet on this CTA to measure usage. As this is an edge case, the majority of users didn’t reach the error phase, but those who did had a 100% task completion rate.
The "orientation" Challenge
The selected categories list was originally formed underneath the search box, but it caused the user not to be able to see them while browsing for new categories.
- Moved results to the top of the search box
- Made the categories linkable
- Cleaned up repetitive explanation text
This way the user will be able to scan, navigate and orientate with ease.
The "browse vs. search" Challenge
In the “before” solution there was only a browse mechanism as there was a limited number of options to chose from.
With the new addition, more than 700 categories were added and although it was easy enough to navigate via the tree and find the categories, a search solution was needed.
There were 2 options on the table:
- Adding another tab for the search (“All”) and clicking the text field will prompted the “All” tab as default.
- Make the text field typable and have a new clean look.
While I tended more to the second solution as it felt more intuitive, I’ve taken it to a quick user testing and the results were very clear.
In order to differentiate the two types of categories, I’ve added a tag on the right side of each row.
