All Ears is a mental health app that connects people with mental health experts. I got an opportunity to work with this early stage startup to create the design system and design the user interface of the app.

I started off with wireframes made in the form of paper sketches to visualize the basic app interface. Multiple discussions with founders were required to finalize the structure of the app.

Once the structure was in place, I came up with a color palette for the app. The aim was to reflect the emotions of the app in an appropriate manner. We wanted All Ears to represent calmness, simplicity, and trustworthiness because these are the important aspects for someone in need of mental health support.

Blue checked all these boxes of All Ears emotions. We did not want it to be particularly bright and saturated, and at the same time, we had to make sure it did not look dull and gloomy. To achieve this balance, a soothing tint of blue was chosen as primary color to give a feeling of calmness and support. Rest of the palette needed for supporting the UI elements was generated from tints and shades of the primary color.

While selecting the typeface, the goal was to be clear and simple. The desired features of the typeface were high legibility, modern look, and friendly nature. After considering several available options, 'Poppins' was chosen because we wanted the typographic style to be familiar for users.

I created typography styles that all the textual content in the app would follow. These styles were included as a part of the design system.

Based on the UI design decisions taken in previous steps, I created a preliminary design system consisting of major components that would be used in the app interface.

Though most of the structure was guided by the wireframes, I defined minute specifications of the layout while designing the high-fidelity designs. Inspired by the Material Guidelines from Google, there is a 4-column layout with a margin of 16 pt and gutter of 16 pt.

There is a huge difference between designing a concept and designing a practical, real world application that will be used by people. Starting from scratch and incorporating all use cases is a challenging task.