Pointer - Design system
Why create a design system?
Industry standards like IOS and material design were important for maintaining consistency and allowing users to feel like Pointer was a familiar and safe space. However, a unique design system would add personality and an edge to the app. After all, Pointer was a brand new concept to the user.
Mood board
The mood board helped to direct the look of Pointer to organic shapes, rounded edges, and nature-inspired colors.
The look
Dogs are playful and nature-loving, so it followed that Pointer should also look approachable and fun. To get started, the design system and branding focused on colors, form elements, typography, and icons. The Stark plugin in Figma was used to make sure designs were accessible.
Design system
It was challenging to decide on the look of certain design elements:
Colors - It was important to settle on colors that implied playfulness without looking like a children’s app. The latest look featured deeply saturated bold colors that were familiar and, most importantly, accessible to users with different visual needs.
Typography - The goal was to find fonts that had a casual feel while being legible. Cooper made for a distinct header, especially on screens where there was plenty of text.
Form fields - After exploring many studies and apps to settle on form fields that were attractive, familiar, and accessible, it surprised me that placeholder texts have been shown to be more harmful than helpful. They were removed in later iterations.