Wizikey

Dashboard redesign for insights

Product Landing Page

Duration: 3 months

What is Wizikey?

Wizikey is a digital platform which:

1. Helps brands get the insights on the trend of the news items media is publishing for them or other brands in the industry. So that they can execute targeted media outreach and build stronger media relationships.
2. Helps engage brands and media through communication in the platform. (not covered in the project)

My Role

Solo designer accompanied by Product manager. Both of us were led by VP of product. My role included collecting project requirement from VP of the product, talking to the success team and work together with the assigned product manager to solve problems through design and collaborate with front end developers to execute the design.

Problem

With Wizikey’s existing product, brands were able to create dashboards to monitor news trends about their competitors and save them to see their insights on the dashboard. The insights and trends was ineffective for the brands were not helping them understand how can they increase their presence in the market.

They can only monitor overall news trend of the competitors.

Existing dashboard with monitoring capabilities

Project Kick-off and key requirements

This was a small organization and the kick-off meeting was led by the CEO. The attendees were the VP of product, front-end development lead, data engineer and myself.

Key Requirements

Based on the demand from the existing customers and some requirements from the potential customers, there were three types of insights that brands needed to understand their presence in media. Those were:

1. Brand share of voice —It is a measure of the media coverage of brands vs. their competition.
2. News insights — It highlights brand’s mention in the news independently as compared to other brands.
3. Narrative insights — I can measure brand’s narrative and check where they stand among their peers

Brainstorming

To cater the requirements, we did a brainstorming exercise on what else needs to be changed on the platform. We came up with 4 main ideas based on its dependency on the key requirements above.

1. Given the number of insights that need to be added to the dashboard, a separate section on the platform is required, from which brands can derive substantial value.
2. A news making score for the brand in the market is required based on other insights.
3. Brands should be able to see all the news and media covering them.
4. Brands should be able to see a list of reporters covering the news in that landscape. (Planned for the next project)

Early Sketches

Navigation

With the new section of insights created, the company found this opportunity to sell the two features separately i.e. Trends and Engage.

For this, I updated the product navigation so that the two services can be sold separately and cross selling opportunity can be utilized.

Addition of “Trend” section in the side navigation

I removed the CTA with drop down from the navigation so that it can go under each section and reduce confusion.

Trends Dashboards

I sketched the initial ideas on how to present the based on the insights needs to be shown to discuss with the team to get their feedback.

First sketch based on the requirements

Feedback:

1. The change in navigation will bring a lot clarity and flexibility.
2. Each chart should be filterable by brand name and time. It should be exportable.
3. The corresponding news should be shown with the charts.
4. Showing headline grab in Share of Voice doesn’t give a lot of value. We can show share of voice by news count and reach.

Mid-Fidelity Design

Using the current design system and the feedback on the sketches, I created a mid-fidelity design.

Mid-fidelity design

Iterations

1. “Share of Voice” dashboard layout was hiding the charts on the bottom. The layout needs to be made visible upfront.
2. The charts in the “Share of Voice” dashboard needs to be more consumable and title needs to be self explanatory.
3. Providing ranking would provide the brands their position with respect to their competitors.

Contribution to the design system

New navigation — The navigation component needs to be updated first in order to accommodate “Trends” section and promote cross selling. So I worked with the front end developers to get it implemented in parallel.

Change of chart colors — Chart colors were on very pastel side which were making black or white texts difficult to read. So I introduced chart colors to which passed the AA criteria for web accessibility.

High-fidelity responsive designs for hand-off

Key Results

1. Charts became accessible to more platform users.
2. The company could put a pricing based on “Trends” and “Engage” sections.
3. The web pages became responsive for all screen sizes.

Learnings

1. Selection of colors for charts is very crucial because it should be readable by people with different types of color blindness. Small details like leaving a two pixel space between the colors in donut chart makes it more readable.
2. For responsive web pages, it’s important to work on 12,8,4 column grids and thinking of elements accommodation and text wrapping on small screen is very crucial.