Numbers and letters → actual insights.
GOAL
Create a simple, intuitive user flow and interface for this powerful, but extremely complex data analytics platform. Best of both.
ROLE
Interaction designer & visual designer.
OUTPUT
System map, style guide, hi-fi mocks.
Meet Voxi
Voxi is a survey analytics package that enables the user to jointly analyze survey scores and free text input. It is great at generating in-depth, multi-dimensional statistical insights… but its users weren’t able to use it. They reported having a tough time generating the insights they were after, didn’t feel confident navigating through the platform, and had issues identifying the next step(s). The Sum-up analytics team reached out to me to develop a user flow and interface that would make the user experience both effortless and efficient.
Wait, who’s this for?
The data cruncher
Deconstructs complex analytics and extracts insights to be consumed and acted upon by other roles.
The business strategist
Uses these insights to drive business decisions (i.e. leveraging topic analyses and sentiment analyses to identify improvement opportunities in the offering).
The overseeing stakeholder
Wants a global view of the insights generated from the data sets and what it means for the business without getting lost in the data weeds.
How these user types guided my design approach.
Data display in layers
Giving the user the option to navigate between different levels of detail/complexity (e.g. ensuring the reports gave meaningful insights to non-data scientists as well, and not over-simplifying the vocabulary in parts that would mostly/exclusively be used by seasoned data practitioners).
Different data formats for different user profiles
Based on user background, perspectives, needs and expectations from the platform.
Invisible guide
Making it clear where the user is, where they can go from there and where they might be interested in going depending on their profile.
Working out the logic to help all three key user types to get the most of Voxi.
The forest vs. the trees
Voxi is a very, very complex platform both in breadth and depth of features. I started by mapping out the path that would help even unexperienced users navigate it effectively and effortlessly.
Flow revision
After reviewing this version with the team, we decided to run all four types of analyses at once from the user’s query as opposed to having them select the analysis types they were interested in.
This made it easier for the users to familiarise themselves with the different types, gave them a complete picture they could then slice and dice as they please, without impeding on execution speed.
Below is the updated version of the overall user flow.
Bringing the back-end capabilities into the UI.
Sketching
From that workflow, I started sketching the different pages. I chose hand-drawn sketches to quickly iterate from one version to the next, without being distracted by measurements and visuals yet.
Wireframing
To dive deeper into how the different pages would be linked together, and how individual components would function, I then digitalized my sketches into wireframes. For instance, the wireframes below show a few iterations of the project page.
I started focusing on the component level. How was I going to show layout the different projects in a way that is not overwhelming, yet still provides enough information for users to easily recognize what each project is about? I chose a card format for this purpose – flexible, informational, clean, and interactive.
Branding & Styling
There was no pre-existing platform, and the logo was the only branding element to start from. So after wireframing and validating the entire journey, I created a style guide.
I initially designed a dark theme and a light one. We went with the light theme’s fresh, modern and airy look to promote readability (survey analyses could return large amounts of text) and comfort during extended us. Voxi users rely on the platform to guide critical business decisions, so I decided on a gradient of blue tones conveying trust and dependability. To highlight Voxi’s innovative core, I paired a more classic shade with two vibrant, modern ones.
Hi-fi
I then got started on the high-fidelity mockups. The founding team got user feedback as we went, continuously informing and shaping the design. Below are a few of the final screens.
