The Problem
Fiza operates as an educational technology startup, boasting of 20 plus Applications on Play Store. Upon my incorporation into the team, I conducted a thorough examination of the project systems and spotted numerous repetitive elements including color schemes, font styles, and templates. The developers occasionally relied on a color selector to extract attributes from the blueprints, ushering in a lack of consistency.
Goal
Establish a unified design framework encompassing standard rules for colors, typography, layouts, and additional factors. This will maintain a stable semblance across our products, facilitating scalability as the business expands.
Colour Styles
I utilized tones of the brand's principal and auxiliary hues to formulate a color scheme that mirrors its character.
Primary Colour
#E7F7E9
Green
50
#B6E6BA
Green
100
#92DA98
Green
200
#60C96A
Green
300
#41BF4D
Green
400
#12AF20
Green
500
#109F1D
Green
600
#0D7C17
Green
700
#0A6012
Green
800
#084A0D
Green
900
Secondary Colour
#fef8e8
Orange
50
#fad57c
Orange
100
#f8c343
Orange
200
#f7b71d
Orange
300
#ad8014
Orange
400
Grey Scale
#EBEBEB
Grey
50
#C1C1C1
Grey
100
#A3A3A3
Grey
200
#7A7A7A
Grey
300
#606060
Grey
400
#383838
Grey
500
#333333
Grey
600
#282828
Grey
700
#1F1F1F
Grey
800
#141414
Grey
900
Subject colours
#707BFF
Maths
#F380F5
Physics
#64ACEF
Government
#6E7BEA
Literature
#F150A3
Accounting
#6491D3
Commerce
#1F99BC
CRS
#DF8D49
Economics
#7D9D38
IRS
#53DDC4
S. studies
#337EED
F. Maths
#D357D6
Geography
#D09234
History
#74A1DF
Agricultural science
#52AC91
Integrated Science
#949E56
Computer
#EA6DBF
Home Economics
#FFC700
PHE
#FF5A5A
Igbo Language
#58CF88
Yoruba Languange
#FF68B1
French Language
#F39560
Arabic Language
#6B90EE
English Language
#6A82FF
Hausa Language
#4CD4F4
Chemistry
State colours
#FF5259
Success
#51C46B
Error
I created a typescale based on display headings, utility headings, paragraph styles, and supporting styles.
Display Headings
Body
Icons
I chose to use a simple icons set like Hero Icons because complex icons can be overwhelming for users. I wanted to make sure that users could easily understand what each icon represented.
Buttons
For the buttons, I made them simple and in different states; active, hover, focus, and disabled states. The buttons are 100% responsive and scalable.
Form Fields
Like the buttons, I designed different variants and states for the form fields to give the developers an insight on how each state or variant should look.
Design systems are living documents that evolve as products and users do.
"A Design system is a living document that is constantly evolving. As your product or service grows and changes, so too will your design system. New components will be added, existing components will be updated, and the overall structure of the system will be refined. This is because a design system is not just a collection of components; it is also a set of principles and guidelines that govern how those components are used. As your understanding of your users and your product evolves, so too will your design system."
