In-app notification

Mockup of the in-app notification system.

Design System

The first order of business was to generate tools to enable the entire team. The design system would serve us all as the source of truth to keep visual and language consistency. Out-of-date Sketch files were available, which I used to rebuild the system in Figma, and with the assistance of developers I could bring the system also up to date.

The Product Owner would have visibility, drafting tools to play, and solid references to approach developers or stakeholders. Developers and QA would have documentation and a source of truth. I would have tools to create high-fidelity designs and provide brand governance.

Component library from audibene

The system helped us keep track of components evolution over time. Taking into account that the maintenance relied solely on me, and we pursued a simple solution for all of us to use, we agreed on a versioning system per file and not per component.

After not having designers for an extended period of time, the team wanted to put special focus on having documentation, open files, multiple references; in summary having memory for posterity. The name of the game was future-proofing.

File versioning example

Current files were marked with green release number. Old files were marked with a grey release number, with an [Archive] prefix, and stored in an Archive folder.

Contacts design detailing

Accessibility and branding

Font sizes audit

Font size

I was aware that a big number of our customers had also some kind of eyesight problem and we needed to know if we were supporting them correctly. In our New Relic dashboards I found the percentage of customers using custom font sizes.

Guided by these percentages, I took screenshots of every single app screen in the most used custom font sizes. The goal was to find where the threshhold for diminishing returns of bigger font sizes was. The screenshots were placed on a figma file, color coded by the level of impact on the interface, and annotations with suggestions on how to fix the issues added.

Together with the developers we explored different solutions, and generated font-size guidelines. They would use these guidelines to limit the size to which texts in the app were allowed to increase.

I also created high-fidelity mockups for some of the edge cases that the guidelines did not fully cover.

Before and after updating the a11y font size standards

Before and after comparsion of the chat screen with the font size adjusment for an A11Y friendly design.

Color palette update info card

Color palette

The accessibility updates also included modifications to the color palette, as dark mode was not yet fully optimized. Moreover, as audibene underwent a redesign in 2020 and the tech teams were still utilizing outdated brand standards, brand updates were also necessary.

For these updates we had sessions with the developers where we looked at the current colors roles and discussed which to update, as well as doing a clean up of unused colors. I then set out to explore color combinations that were brand and WCAG compliant. In the end I delivered a new color palette with updated roles and a set of comparison screens for the developers and QA to use as a guide.

Above a guide card with the main changes for dark more and a set of comparisons.

Hearing coach dark mode

UI Design

for hearing care mobile apps

These are some of the design initiatives I led as the product designer for the app development team at audibene. As the only designer in a team that had not had a designer in over a year and a half, there was a lot of groundwork needed for a succesful re-integration of design in the product development process.

Our iOS and Android applications were developed in-house by a multidisciplinary team, and offered to audibene customers.

The app offered a chat, troubleshooting, and a hearing wearing tracker, among other features for customers aged 60+ in the U.S.A, Canada, and several European countries.

Product Design
Design System
Interface Design
WCAG Standards