A little bit of context before getting deep
As part of the unification and merger of the 5 companies. The 5 products have different interfaces, features and workflows. However, they all align in their objective: Enabling users to track news, mentions, journalists, and media outlets related to their organisations. Additionally, they provide summarised reports on the social media conversations surrounding them.
One of their goals was to create a unified platform that combines the 5 companies. The issue we had is that we didn't know what users want from the platform. We had 3 options to choose from.
- The first option was to build a new platform from scratch.
- The second option was to change and improve the user interface of the 5 platforms and transfer them under one ecosystem.
- The last option was to choose one platform and integrate the other platforms into it.
After reviewing the ideas with the main board and clients, and conducting a competitor analysis, we decided to select one platform and integrate the other platforms into it.
The platform contains the 4 main pages such as Monitor, reports, contacts and manage. In this case study, the focus will be on redesigning one of their pages. We will focus on designing the " Chart Analytics " page.
Problem Statement and objectives
This page is primarily used by PR agencies. Many users struggled with reading and setting up the charts, leading to frustration. Additionally, a significant number of users began switching to a competitor's platform, which raised serious concerns for Onclusive.
Our objectives:
- A total UI revamp
- Make charts readable and easy to understand
- Improve the layout of the page
This is our the analytics page looked before
Design Process
Discovery and Research
As a team, we discussed the users' pain points, drawing on insights from previous data supported by user feedback.
For research
We conducted 7 user interviews with clients and account managers. Here is the resumen of some of the questions and the answers from them
After analysing the data, we developed a user persona that outlines what this page represents, along with the objectives, needs, and pain points of PR agents.
Ideation and Solution
Before getting deep into wireframes. We came up with a user flow that summarises the whole journey.
We started testing on how many charts should we include per page. Users favoured seeing 3 charts per page.
Next, we tested the design of the top section. Since the data showed that users often associate selecting between "till" and "compare to" with choosing a date, we explored this aspect. Additionally, we tested the accessibility button, as it was mentioned multiple times.
Users didn't favour the radio button for selecting between "till" and "compare to," and they preferred the second option more.
Final Design
We already had a design system but we had to create some additional components for the charts and date selection for this page.
Here is the final design
* More designs to add
Testing
After showing them the final prototypes. Users where content about the changes:
- 13 users were satisfied with the new charts design and mentioned that it is easier to understand and read the charts.
- 12 users were content that we added " till " and " compare to " to the date selection as it made it saves a lot of time
- One critic was about the limitation of how many brands users can choose ( that is something to be fixed in V2 )
Personal Intake:
Iterating gradually was crucial for us as a team, as it demonstrated how much time can be saved as a designer. This approach was especially effective when involving all team members and users from the start.
After completing the initial project, my team and I began working on V2. Unfortunately, my contract with Onclusive ended before we could finish. V2 was designed to offer users greater flexibility with charts, such as allowing them to upload their own data, choose the number of charts displayed, and make more important charts larger and dominant through the screen. The last feature was intended for V1, but it was delayed due to the time and cost required for development by the engineers at Onclusive.