Design System for a Mobile App

Project overview

Project Goal

The project goal was to create a design system for a native app (ios and android) called 'Gamdok'. 'Gamdok' is a Korean word for a coach. Gamdok is a a mobile app for soccer coaches. First MVP that is being designed and implemented as you read is a useful tool to create groups within a club(Team in soccer term) for weekly or bi-weekly practices.

I have previously created a Design System at my previous work. From the live website at the moment, I re-organized existing componenets and created new from scratch and put them all together into appropriate colour scheme, typography and iconography with reference to Material Design and many more. This document will be updated as the project continues. (Updated on 2023.01)

Moodboard

Three concepts related to soccer field were collected and proposed. All three were very different and I could vision their unique branding which made it difficult to select the most appropriate one, but as always, the answer lied with the users. Through potential user interview with coaches in amateur leages, the age range varied a lot. As much as we wanted to make the most trendy and visually vibrant and aesthetically pleasing app, being accessible to all age groups was the most crucial part.

After long discussions within the team and also asking out to more than 20 people after explaining MVP of the app, and their opinion on each of these three concepts, we have chose the Bright Dawn to be our final moodboards. The tone downed colour scheme was perfect even for heavy texts and to avoid overwhelmingness, helping users to focus on the contents.

Typography

From previously created moodboard, the goal was to find a typography that suits app's keywords.
Font Manrope was perfect choice to achive 'calm' and 'friendly' yet 'modern' looks. It also has a simplicity and most importantly, great readibility.

'Koach' is a native app for ios and android. Instead of referencing material design which I often do for responsive web deisigns, I referenced Apple's 'Human Interface Guideline-typography' and its Default (large) sizes for accessibility. I am currently in the progress of designing larger fonts to meet the dynamic type sizes, to make 'Koach' even more accessible.

Colour

Focus was to keep the colours accessible. Made sure all primary colours are tested according to WCAG and to use colour combinations that meet minimum of AA standards when it comes to fonts. Those that are not compatible with font colours are only used as accent colours or stage colours without font.

Colour Accessibility Check

When testing according to WCAG, I referenced MailChimp's colour guideline to check compatibility with to be most commonly used colours

Button & Chip

Using the typography and colours, main CTAs are created with patterns.

Text Field

Using the typography and colours, main CTAs are created with patterns.

Error Messages

Using the typography and colours, main CTAs are created with patterns.

Executive Summary

This was my first time creating design system for native app from the very scratch and this is an ongoing project. I am extremely excited for the final product to come, but most importantly I am learning so much more as the project goes. Remaining logical with proof and reasoning to support each components of my design is something I got to strengthen a lot through this project so far, I will be updating both my work and learnings to keep you posted. Thank you for reading.

^ Back to Top