RingTailor

Analyzing Branding Guidelines

One of my first challenges was to interpret and analyze the new design guidelines. Made for print and lacking contrast, they weren’t suitable for an app, so I needed to find alternatives. I tested and analyzed fonts, colors, contrast levels, etc.

Evaluating Previous Design

In reviewing the previous design, I found several usability issues. Text and buttons were in most cases far too small. I found it very difficult to read some texts and to find the right buttons.

Another consistent shortcoming was problems with heading hierarchy and general structure. As a user, I often had to scan all the text to understand what was what. It was also often awkward to use sliders and other functions, either because they were too sensitive or because I didn't understand what they did.

Reviewing Previous Research

Our team was also able to access the research and insights from the previous two iterations of the app, which were made by other UX designers. These insights guided our design decisions and helped us understand the users' needs and pain points better.

We reviewed various materials, including: UX review, customer journey map, impact map, and interview insights.

The insights I took away from studying and analyzing the work of other UX designers helped me get into the project more easily. Building on someone else's research was not something I had done before, so it was a great learning experience!

Developing User Archetypes

Based on the previously gathered material and the product owner's own knowledge, my team developed three user archetypes. These made it easier for me personally to always keep the user in focus during my work.

The main purpose of developing archetypes was to make it easier for us as a team to work towards the same goal and make sure to satisfy the user's needs, even though we were working on different parts of the app.

Sketches and Wireframes

Early in the project, I created sketches and wireframes for the main screens and components of the app, which I used to communicate my ideas to the team and get feedback. Sketching was also a valuable tool for the product owner to communicate his ideas to me, especially in areas where my understanding was limited.

New Typography Guidelines

To meet the requirements of digital solutions, I had to create a new set of fonts since the ones acquired with the new branding were not suitable. Being a font nerd, this became an enjoyable project for me!

To preserve the desired brand feel, I selected options that closely resembled the originals. Additionally, I explored fonts within the same visual category. As a team, we finalized our choice and settled on a favorite set (Roboto Condensed and SF Pro).

Brand Color Palette Adjustments

During my evaluation of the company's new branding, I noticed that the new primary color lacked sufficient contrast against white text, which the company wanted for digital content. I generated several contrast-approved alternatives to the primary color in hopes of finding a suitable solution.

After reviewing my suggestions and hearing my reasoning, the company went with my recommendation to ensure accessibility while keeping white text on their primary color.

Building a Component Library

To ensure consistency across the app and make it easier for designers and developers to implement the design, I created a component library early in the project, expanding it as needed and adding written guidelines for consistent usage. References included Apple’s Human Interface Guidelines and WCAG 2.1.

Since the app was built in Unity, where UI is often image-based, I ensured correct structure and layer order for all assets.

Standardizing buttons was a particular challenge due to a limited color palette, multiple states and variants. After team discussions and feedback from the product owner, we landed on a consistent system used throughout the app.