Saving months of extra work with open collaboration and transparent communication.

From day one, I’ve done hands-on design work on Unmetric’s flagship product – Analyze. This case study is about how I successfully led a significant navigation redesign for the two most used sections in Analyze, simultaneously launched a prominent new feature – Outliers, and redesigned the homepage after five years.

Homepage mockup V1
Unmetric Analyze Homepage: It took us three carefully planned releases, eight months of hard work, and a lot of collaboration and communication to get here.

My Role

  • Research
  • UI/UX Design
  • Onboarding Strategy
  • Onboarding Video
  • Information Architecture
  • Usability Testing

Team

  • CEO
  • Head of Product
  • Two PMs
  • Two Dev Leads
  • Three Engineers
  • Two Front-end Devs
  • UX Copywriter
  • Myself

Tools

  • Moleskine
  • Sequeal Pro
  • Figma
  • Camtasia

Timeline

  • Eight months
  • Apr–Nov 2019
  • Four releases

Constraints

Problem

Navigation was hard

In Unmetric’s flagship product – Analyze (the social media benchmarking tool) – the two main tasks performed by 100% of the users are:

  • Analyzing your owned profiles, competitors, or any of the 100K profiles
  • Comparing Groups (a set of social profiles)

In the older solution, we made it easy to discover and use these two features. However, the recent feedback revealed that the users find it hard to navigate and search for a brand if they have added a large number of profiles.

Validating the problem

I talked to our customer support team, asking if they have heard any other feedback related to these primary tasks and sections of Analyze. They told some users are using Command + F to search a profile they are looking for.

In the last few years, we signed up big brands, like, Unilever, Coca-Cola, GM, Pepsi, Accenture, Edelman, etc. and they needed to analyze a large number of profiles and groups.

Clearly outlining the problem

After validating the problems with our customer support team and some brainstorming, I broke down the problems as:

  • Profiles were sorted by added date and not alphabetically
  • Groups were sorted by creation date and not alphabetically
  • Connected pages are hidden
  • Not easy to switch/discover other social networks
  • Homepage remained the same when networks were switched
Old Focus home design
From Google Analytics I found that ~65% of our users had screens with viewport height of less than 800px, so they could only see 15 profiles at a time. Also, these are sorted by the date they were added by the users, and not alphabetically.

This made it hard for users to find profiles they need to analyze, especially when they have 50 or more (74% of total active users).

This is the old homepage design. See how the networks are hidden under the drop-down (problem #4).

Also, notice how the content remains the same even when networks are switched (problem #5). Some of these links would just take users to the dedicated sections under a selected network.

Process

Let’s take a step back

I shared these issues with our Head of Product, who agreed. However, I wanted to take a step back and see how many users might be facing any of these issues. Also, what percentage of total active users have added more than 25, 50, and 100 profiles. And, what’s the average number of groups an active user has created.

No Mixpanel, no problem

There was no Mixpanel dashboard configured to see this particular data set, so we pulled data from the database. I sent the data points I needed to our dev lead, and he got back after 11 hours as we are in different timezones.

I wasn’t happy with our progress on data analysis, so I decided to pull the data myself. I collaborated with another developer to setup Sequel Pro and a few SQL queries to pull that data.

Profiles and Groups added by users

Alphabetical sorting to fix problems #1 and #2

Data analysis reflected that most of our users (70-80%) might be facing issues to look for profiles and groups. There could be a bunch of approaches, but I decided to go with a solution that required least effort: alphabetically sorted profiles and groups (by default) and the added ability to search for profiles.

I had a chat with our dev lead and discussed these changes. A simple solution like this was an easy win and it was released in a couple of weeks.

Homepage V1
Changing the profiles sort order from “date added” to “alphabetical.” We did the same for Groups. We should have fixed this a long ago.

Solution for problem #3

Another frequent feature request was to move Connected/Owned Profiles to a dedicated, more visible section. This came from our accounts team as they believed that this is a very important feature to make users stick and get the most out of our platform. And having it buried under the Analyze section is not helping.

My plan was to move it to the main navigation in the sidebar so people can see it from anywhere. This will make it more discoverable and accessible.

Idea to move connected profiles to the sidebar nav

A designer’s endless pursuit for improvement

Even though the main issues were fixed, I was not happy with our homepage. The most visited section of the app was unthoughtful and plain dumb. Nobody ever complained about it, though.

No complaints don’t mean it’s perfect. Users didn’t say anything as it was not causing any issues. But as a designer, it’s my responsibility to improve areas and experiences that sometimes seem small and unimportant.

Homepage early sketch
An early structure of homepage outlining important actions and navigation changes. This exercise helped me clearly think through the structure of our huge app and come up with five sections we should have on the Analyze homepage (listed below).

The first solution

I started brainstorming to see how I can fix the homepage. Moving the most important actions which were somewhat deeper in the app came to my mind right away. After some sketching and scribbling, I came up with a rough solution that included:

  • Change networks drop-down to tabs and put on the homepage
  • Move profiles, groups and connected accounts under network tabs
  • Add ability to search profiles and groups across networks
  • Ability to star profiles and groups, so they are pinned on top
  • Sort by recently accessed, date added/created (default), and alphabetically
Homepage mockup V1
A quick homepage mockup I presented to our CEO with Networks as tabs, Profiles and Groups moved to the homepage, plus search and sort features.

Feedback always helps

I have worked with our CEO for almost eight years now, and he is the smartest person I know, even when it comes to product and UX. I don’t seek solutions from him (that’s what he hired me for), but I always like to bounce my ideas off him.

Our CEO asked me why we are making these changes and how this will help. After he was convinced with my answers, he suggested to get rid of “sort” and “star” functionalities as multiple users from the same organizations use the same login. I didn’t know this fact, but after he told me his suggestion made absolute sense.

Homepage mockup V2
Revised homepage design after discussion with our CEO. Sort and star functionality is gone.

Something important was cooking simultaneously

When the homepage design was almost complete, and I was ready to hand it over to our front-end developer, I got a message from our data science lead. He provided some info on an upcoming feature: Outliers. We set up a meeting to discuss it in detail. I asked him a few questions upfront so as to understand more and what ideas he had.

During the meeting, he told me that his team has been working on this feature for some time now and ready for the next phase. This feature would allow users to detect anomalies and help users stay on top of their competitors and social in general.

He suggested that we add a dedicated section for Outliers in the main navigation somewhere as it a unique feature among competitors. This placement would give this feature more importance and visibility in our platform.

I agreed but suggested that instead of adding another section (we already had over ten icons in the main sidebar), why not put it on the homepage? That will make it even more discoverable and prominent.

He liked the idea but mentioned that Outliers wouldn’t be available all the time for all the users. I promised to think more about this scenario and revert back.

Collaboration and communication saved us again

On one hand, I almost finished the homepage with network tabs, profiles and groups. On the other, I had an idea of putting Outliers on homepage. Things were getting complicated, but one thing I knew for sure was, we can’t merge these two solutions together.

I was happy that our data science lead reached out to me early and directly; otherwise we might have launched the homepage with profiles and groups. And later, it would have been super hard to change the homepage again because a) we just did it, and users will hate this frequent change, b) months of development efforts would go to waste.

All dashboard should be feeds

Our CEO and I always agreed on all dashboards should be feeds argument. This was our chance to make Analyze dashboard/homepage a feed of content insights, i.e., Outliers. And later on, we can add more types of insights that we were showing inside the main sections. Currently, users had to go to these sections and tabs and see those insights for themselves. Pulling them out on the homepage and letting users customize what’s useful for them would definitely be a game-changer.

I suggested to put content feed with Outliers as a second tab (as both are content streams) on the homepage while moving profiles and groups in the sidebar as a mega menu. All of us agreed on this solution.

Homepage mockup V1
Homepage V3:
The final version with Feed and Outliers.

Super easy way to access profiles and groups

After putting Outliers and Feed on the homepage, I went on to find the best possible place to access Profiles and Groups. With one click, users can access any of their Profiles or Groups. All the networks are now clearly visible. One can quickly search for a profile without jumping between networks. I also added links to quickly add/create and manage Profiles and Groups.

Introducing QAS (quick access sidebar) – a super-easy way to access Profiles and Groups from anywhere inside the Analyze app. New homepage with Feed and Outliers is in the background.

I love how the QAS is shaping up and believe it will translate into great user experience and fewer clicks to insights and data.

– Our CEO on Slack, after seeing the final version of the QAS

Let’s do some usability testing

Our head of customer research ran a few internal usability tests based on the scenarios I provided, and the results were all good. Finally, we found usable solutions that the whole team liked. We shipped these changes in three separate release to make it easier for the users to adapt.

Onboarding Users

To keep the learning curve lower, we split this project into three releases and carefully put some gap between them. We updated the section icons in the first release. After three weeks, the new homepage with Feed and Outliers was pushed. The sidebar navigation was rolled out after six weeks with an onboarding video.

Usually, we write an in-app blog post about the changes/new feature. However, in this case, I believed it would be much easier for users to understand the changes by watching a short video.

Our Head of Marketing did the voiceover while I wrote the script, recorded the video, and edited it too.

Outcomes

Lessons


More Projects