nadine aurora tabing

ux design & research & etc.

Rebranding, UI/UX Design, Research

Public health organizations compile huge amounts of data and present that data both to their constituents, and to the government as part of mandated assessments.

As the sole designer at LiveStories, I redesigned the UX/UI of entire product, including overhauling the UX/UI for its website and core data visualization tools, and the branding and product design language. All this was to make “data about how we work, live, and play” more accessible, especially to those who are not “data experts.”

As part of the redesign, I selected new colors for our logo and worked with our marketing team to develop a new identity for LiveStories. The colors were chosen for how they would stand out against other identities at public health conferences.

A photo taken during guerilla testing of a high-fidelity prototype

A banner from the LiveStories branding redesign

I incorporated colors into the design system for our product, which also included guidelines for typography, voice, and accessibility to meet customer requirements.

A screenshot of the LiveStories design system

Design system

I also made clear stickers for our hack-a-thon!

Sticker for participants. Sticker for champions!

Stickers for participants and winners

Project: Chart Editor

The product's main challenge was: how do you make complicated health data easy to browse and understand? Most LiveStories users are data experts, and wanted to share their analyses through compelling methods like online interactive charts. But, they were unfamiliar with coding, and needed a way to make charts without taking away time from their other responsibilities.

Knowledge about data science also varied between users. A concept that one user calls an “indicator” is known to another as a “dimension,” and both of these things are concepts not generally well-known to constituents who were the target audience of visualizations.

Other requirements of this design included:

Team

I was LiveStories sole UI/UX designer, and developed sketches and facilitated testing with customers, using low-fidelity prototypes or live builds.

I also created high-fidelity mockups and wrote detailed technical requirements for direct hand-off to three different development teams responsible for web UX/UI and data visualization UX/UI. Two teams were local, one was remote. I supported all engineering teams through sprint cycles, providing detail for unforeseen edge cases, and adjusting design when necessary to ensure sprint goals were met.

Our product and development teams. I took product requirements and made sketches and tested with customers. I also interacted with 3 development teams to hand off designs.

LiveStories team setup

Process

I started all concepts from sketches.

A sketch of a redesign for the filters in the chart editor

A sketch for how filtering charts should work

Once I had a general idea for a feature, and feedback from the VP of Product and development teams on what parts seemed most challenging to understand and develop, I started testing. I created a process for user testing new features on our existing customer base, using low-fidelity click-through prototypes and live builds. I interacted with all customers remotely.

A screenshot of a low-fidelity prototype

A screenshot of a low-fidelity prototype

High-fidelity Mockups

One of the main aims of the design was to consolidate all chart controls in one place, instead of an initial design that contained controls all around the chart.

Example interaction flow for the chart editor

Example interaction flow for the chart editor

Because LiveStories aimed to normalize the vast variety of public health data into a single data model, there was also the challenge of giving users a way to search for data sets. Users had to be able to find sets with data for the proper times and locations, as well as data sets that fit specific and vast requirements. Users might only want data sets that have data for “California,” or data sets that excluded certain counties, or data sets that only represented data in “percent of people” rather than “percent of households,” and so on.

A screenshot of a high-fidelity mockup

A screenshot of a high-fidelity mockup

The updated designs were viewed by users as simpler, cleaner, and more straightforward compared to both existing designs and their current charting tools. The design was viewed as extremely successful in the context when organizations “just needed a chart,” and didn't want to wade and perform surgery to cut and connect spreadsheets of number data just to present simple numbers to the public.