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.
I incorporated colors into the design system for our product, which also included guidelines for typography, voice, and accessibility to meet customer requirements.
I also made clear stickers for our hack-a-thon!
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:
- Allow users to make a vast variety of huge selections, including: selecting all states, all counties in a state, all cities in a county, a state and states with similar demographics...
- Build in the groundwork for future “smart” charting with the aid of data analysis
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.
I started all concepts from sketches.
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.
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.
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.
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.