logoMain
cm-logo

Clap Codemithra

Clap Codemithra is training platform with courses in emerging technologies geared to increase students proficiency, help students get placed, and create their path to success.
WEB APPLICATION
New Macbook Pro Mockup Front View

Objectives

Pain Points

While reviewing the old designs of the application, we came across few gaps .

Login (1)

Design Process

Discover

In the discovery phase, we gained a deep understanding of the user requirements, business goals, competitors’ strengths and weaknesses, industry trends, and the current state of the product.

Define

In the define phase, we analysed the information we’ve obtained to draw insights and defined the goals, objectives, and our strategy moving forward into the process.

Design

In this phase, we generated and explored a wide range of concepts through wireframes and lo-fi prototypes. We then developed a design language and applied the same throughout the designs.

Discover

We conducted a stakeholder workshop to understand the brand, its product. Based on their inputs, we derived certain brand attributes that give an idea that how the brand should be perceived by users.

Discover (1)

Define

After formulating elements, we started to define the visual language of the product.

Based on these details, we created initial screens to get an idea of visual components.

Define (1)

Design

After getting feedback from stakeholders, we started creating visual design components like a Navigation bar, hero section, buttons, etc.

Based on these components, we started with the visual designs of the various modules of the product.

Design (1)

Design Language

TYPEFACE

Aa

Poppins

ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
Light
REGULAR
MEDIUM
SEMIBOLD
BOLD
COLORS
5350FF
EFEEFF
162A3C

Icons

Final Screens

Dashboard

Easily accessible recently viewed courses, what courses they have enrolled in, their timeline, their private files.

Course Categories

In order to make categories more understandable, we created specific icons based on color coding

My Courses

A lesson number and time estimate were added for a better understanding of the lessons

Video Lessons

Toggling between lessons is now easier with clear buttons

Our Recent Projects

Got a project in mind?