Design methodology

Step-by-Step documentation on how I build the design system and web pages for the website and user portals.

Planning and revisiting the foundation

I had to go back to making sure I understood the scope of the project

• What’s the project about? Design a responsive website and web application portal for end-users, courier, and business owner.
• Who are your end-users? - Adults in their 20’s - 50’s who do not want the hassle of going to get items themselves.
• What devices will they mostly use? - Their mobile phones

Setting up the UI fundamentals

Create a Style Guide - For this project, I had already defined the brand colors and typography so it was easier to get colors in order. You can further have a look at them in the Figma file.

• Color palette
• Typography:
• [x] Grid System & Layout
• [x] Buttons (Primary, Secondary, etc.)
• [x] Form Elements (Inputs, Selects, Checkboxes, etc.)
• [x] Spacing & Sizing Scale
• [x] All states (Default, Hover, Active, Focused, Disabled, and Loading)
• [x] Motion: Used drop box’s animation (0.65, 0, 0.45, 1) for 300ms on hover