Portfolio

Portfolio

Apollo, Instructor's Online Reservation Platform

Delivery year

2022

Portfolio

Overview

Dimensions

  • UI Design

Tools

  • Figma
  • Photoshop

Deliverables

  • Interface design
  • Colors & Typography
  • UI Components

Timeframe

2 weeks, providing UI Kit and Interface design.

Description & Goals

Apollo is an instructor's online reservation platform that aims at presenting professional teachers in different disciplines and booking training sessions with them. The platform offers an exclusive profile for each instructor to promote their experiences. Every user wishing to book an instructor can do so through the instructor's profile. In addition, it has a blog section that shares new articles and news related to the platform goals with its users.


Color Palette

Upon customer request, the following primary color has been used in the design process. Besides primary color, two other colors have been taken into account to ensure enough contrast whenever necessary. However, the secondary color in this row belongs to the Red channel, which is appropriate at the time of error occurrence and can be mistakenly misused. Therefore, it has the minimum role in our design and was employed for shapes only.



Typography

Apollo takes advantage of Noto Sans typeface. The typeface has proven legitimacy and is common in web design.

H1

H2

H3

H4

H5

H6

Subtitle

Body

Button

Caption

Apollo Platform

Apollo Platform

Apollo Platform

Apollo Platform

Apollo Platform

Apollo Platform

Apollo Platform

Apollo Platform

Apollo Platform

Apollo Platform


Iconography

In this project, all selected icons were chosen from Google Material Symbols.



Components

The following components were designed and employed in the project:

  1. Buttons (Text, Filled & Outlined)
  2. Checkbox
  3. Text field
  4. Dropdown menu
  5. Accordion
  6. Dividers (Inset, Middle & Full)
  7. Data table
  8. Tabs
  9. Chips
  10. Cards



UI Design

The design process was done for the following sections:

  1. User authentication (Login, Forgot password & Sign up)
  2. Instructors hub
  3. Blog & News (Single article & Articles)
  4. Instructor public profile (Working profile, Teaching, Sample videos & Comments)
  5. User private profile (Edit profile, Favorite instructors, Inbox, Payment history & Booked sessions)