CASE STUDY: Creating branding and a design system from the ground up

Colours

While planning the initial branding concepts I noticed VoxSmart’s existing logomark evoked the idea of a prism. A lightbulb came on at that moment because it was a perfect analogy for VoxSmart’s platform, which takes complex datasets and separates them into meaningful outputs… like a prism separating light into separate colours.

That concept became the foundation of the colour system, opening up a flexible and expressive palette of colours and gradients that could be applied consistently across the brand.

Another requirement was to retain the existing red from the original VoxSmart logo. All supporting colours were developed around this core hue, resulting in a warm tonal range that sits naturally alongside the greyscale palette and reinforces the brand red throughout.

Typography

Technology sat at the core of VoxSmart’s ethos. While “AI” is an overused term, it still represented a fundamental part of VoxSmart’s product and brand positioning. To reflect this, I selected Neue Machina for the headline typography.

Neue Machina is a contemporary geometric sans-serif with distinctive descenders and subtle typographic details. Its sharp edges, monospaced elements and technical character reinforce VoxSmart's technological aesthetic perfectly.

Legibility is my primary consideration for any digital product design, particularly for a product experienced across multiple screen sizes. I apply my long time defined set of rules when selecting body text typefaces, focusing on details that directly impact usability and accessibility. One example is how a typeface handles the terminal on a lowercase “l”. This will lower the options available, but ensures every remaining option is a genuinely strong choice.

Neulis Neue was chosen for its clean, hybrid geometric–humanist design and approachable feel. It met all my legibility requirements while pairing fantastically with Neue Machina, and offered a balanced transition between technical geometric shapes and subtle humanist elements.

Logo redesign

I redesigned the existing VoxSmart logo to align with the new brand system, improving design precision within the logomark and introducing typographic contrast between "Vox" and "Smart."

Imagery

All brand and marketing photography was kept monochrome, allowing the brand colours underneath to emerge exclusively from VoxSmart’s technology. This concept was tied to the earlier colour prism metaphor which was revealing the underlying information and transforming it into something clear and understandable.

Boldness was a consistent request during the brand discovery amongst all stakeholders. The high contrast relationship between monochrome imagery and vibrant colour reinforces this idea, while also translating effectively to the light and dark mode within the product.

Creating VoxSmart’s design system

Once the branding was approved, my focus shifted to the design system. Close collaboration with the development team was essential. One of the primary challenges prior to my involvement was UI inconsistency and limited communication between creative, marketing, and engineering teams.

With the new CTO and I both coming from an agile background, we helped introduce agile principles and workflows to the team, which were relatively new concepts within the early stage startup environment. For everyone involved this meant establishing shared processes, improving collaboration, and defining clear milestones as the first priority.

The second phase focused on implementation of the design system. Which meant building the design system in Figma using its component architecture to ensure consistency, enable rapid iteration and support efficient design & development workflows.

Grid system, spacing and breakpoints

I designed a flexible grid system to adapt seamlessly across responsive screen sizes, while fitting cleanly within VoxSmart’s existing navigation structure.

Given that consistency had been a key issue prior to my involvement, a breakpoint spacing system was also created and embedded across all Figma components to ensure visual and functional consistency for every screen size.

Shadows

Given the volume and density of information generated by VoxSmart, we restructured the platform around a more modal-driven interaction experience. This approach reduced visual complexity and helped users focus on individual tasks. Maintaining visual hierarchy was established by implementing this new elevation and shadow system.

Icons

I love making bespoke, pixel-perfect icons. There is something almost zen about making sure each icon works harmoniously within the broader design system.

All design components

I adopt the modular approach for all design components. This approach ensures flexibility and long term scalability. Design systems require a large number of elements, and it was essential that these components could combine easily and adapt as the platform evolves.

Given the pace of how technology changes, a well structured design system helps reduce future design and development effort which will save both time and money. For VoxSmart this included the creation of fully supported light and dark mode component libraries.

Implementing the design system & user research

Following completion of the design system, VoxSmart retained me to support the platform’s UI and UX design. Improving the product required more than simply replacing existing components. It needed a user-centred approach that considered how design decisions impacted real user workflows.

Working closely with stakeholders, we defined a clear plan for the platform and its supporting business model. I collaborated across all product areas alongside the relevant project managers, ensuring alignment and shared understanding throughout the process.

Wireframes

Wireframes were used to define initial structures and user flows. Targeted user research with existing customers helped identify pain points. These insights informed the creation of interactive Figma prototypes, which were used to gather feedback and iterate on the designs.

Personas

Future focused concepts were explored and tested in line with VoxSmart’s strategic direction. User personas were developed to evaluate proposed platform features and ensure they supported long-term product goals.

Platform design

Below are examples of the updated platform screens. The first screen shows the platform prior to the implementation of the design system which is a useful reference point for understanding the scope of the transformation.

App MVP

I also designed the app’s MVP which was a streamlined and integrated platform for reviewing transcriptions and flagging compliance issues.