Dashboards & Reports

Dashboards

Opportunity: Users needed an area of the platform to monitor and share analytics that matter most to them, often in real-time.

Solution: Provided users the ability to select from an array of data visualizations in order to build out their custom view.

Role: Participated in requirements gathering, ideation and sketching sessions, guerrilla testing, visual design.

Context: Main product feature with dedicated agile team of 5 people.

Biggest challenges: Designing for various user personas from Campaign Manager to Brand Analyst. Users have varying degrees of product knowledge and engagement. Some require deep dives into the data, others only need high level stats. In order to satisfy multiple personas we made the set up work flow simple and lightweight yet allowed for quick customization for users that were more advanced.

The image below is an example of a user created customized dashboard that measure the volume of social media posts in real-time. The hashtag ‘coffee’ is being collected across all public posts on various social platforms. It is then analyzed, and visually represented in user specified charts within the dashboard.

CARD SHELL SKETCHES

The card shell was designed to accommodate many variables. Although there’s a minimum default size, the user has the ability to resize the card to their desired height and width which allows them the freedom to decide how best to display their data.

Breakpoints

A minimum card size was determined based off of the number of data points necessary to display on the x axis. From there, we allowed the grid to accommodate up to 4 columns horizontally - the number determined to be digestible not only on a laptop but also on a high definition display.

CARD SHELL SPECS

The card was built as a component so that it could be repurposed for use outside of Dashboards in other areas of the Crimson Hexagon platform.

DATE RANGES

We provided users with the ability to select from many date range options. This gave them options for being able to compare this years ad campaign with last years ad campaign (ex. this years super bowl ad vs last years’). It did however create a challenge trying to determine the best way to slice the data into a digestible format when the card is only 375 pixels wide. How do people envision a break down of 60 or 90 days? Displaying 60 bars on the x axis is not feasible.

user behavior

The recording above demonstrates how a user may interact with the visualizations on their dashboard. You can see scroll behavior within the feeds, rearranging of cards, and expanding card width and height.

Reports

Opportunity: The platform lacked the ability for users to share their consumer insights with team members across their organization.

Solution: Reports provides users the ability to quickly build, schedule, and share their consumer insights. We gave users a way to autogenerate and schedule regular delivery. It means delivery of campaign measurement, brand health, event or crisis tracking, and benchmarking available in their inbox or accessible via a shareable link.

Role: UX Lead on dedicated 5 person agile team. Oversaw implementation of the user experience that was passed down from external consultants.

Biggest challenge: Using the same API endpoint for both reporting and dashboards. This meant that we had to ensure that visualizations appearing across the two products would be visually represented similarly. This was a challenge because reports allows for more page real estate for viewing a single visualization (1 chart per page) while dashboards allows for multiple visualizations to be displayed above, below, and next to one another in a grid layout. The intended output for dashboards is a monitor (laptop, desktop, tv) while the intended output for a report is tailored towards PDF or PPT which has the concept of ‘pages’.

scheduling & Sharing

Users can easily schedule, share, or download directly from the dashboards header menu.

Custom visualization options

Users can select between line, bar, and area chart while also selecting a customized date range.