Category:
Work Project
Institution:
Redesigning Zidio Learning
Project Overview
Designing a comprehensive online learning platform for Zidio that provides an engaging, accessible and effective educational experience for its users.
Features
The requirements provided by the company included the following features:
User-friendly interface with clear instructions, icons, and understandable text. A simple and intuitive interface which makes navigation easy for both the students and instructors.
Real-time communication should be included in the platform with tools such as chat and video conferencing to facilitate doubt clarification for both students and instructors.
Offline reading features should also be included to facilitate learning in an offline mode.
Comprehensive course management to help instructors upload and create lectures, assignments and quizzes with the option of uploading notes and reading materials.
Gamification elements and a website mascot to improve engagement of the platform among users.
Deliverables
The following deliverables were to be submitted to the company:
User Personas, Competitive Analysis
High-Fidelity Mockups of primary interfaces
Interactive prototype demonstrating core functionality
Design System including typography, colour palette and component library
Competitive Analysis
A comprehensive competitive analysis was conducted between five different platforms against the existing Zidio Learning platform, which included Udemy, Coursera, LinkedIn Learning, Tutedude, and W3Schools. I was tasked with conducting the competitive analysis of LinkedIn Learning against Zidio Learning.
![]() | ![]() | |
Overview | Zidio Learning is a focus area within Zidio Development Pvt. Ltd, a software development company. |
|
Audience |
|
|
Advantages |
|
|
Disadvantages |
|
|
Key Features |
|
|
Accessibility |
|
|
Navigation | Pros
Cons:
| Pros:
Cons:
|
Identity | Pros:
Cons:
| Pros:
Cons:
|
Tone | Pros:
Cons:
| Pros:
Cons:
|
Strengths | Zidio Learning's primary strength lies in its commitment to providing practical, hands-on experience through real-world projects and internships, effectively preparing learners for industry challenges. | Professional Career Development – unmatched integration with job roles, skills, and career progression via LinkedIn’s ecosystem. |
User Personas
The website was to be designed in three different perspectives: Student, Instructor and Platform Administrator. The team was asked to create four different imaginary personas representing a college student and a working professional as students, and one each for an instructor and a platform administrator. I contributed to creating the user personas for the college student and instructor.


(Source: Rajveer Singh Thakur)


(Source: Rajveer Singh Thakur)
Based on the user personas and competitive analysis, the team was tasked with creating key learnings and opportunities list as follows:

(Source - Rajveer Singh Thakur)

(Source - Arun Reddy)
Colour PaletteThe colour palette for Zidio Learning consists of solid shades and tints of violet with some hints of purple. The first colour is mostly used for secondary cards, with the first one being for primary cards. The third has been used for fonts, navigation bars, buttons and CTAs. Whereas the latter is used for the background of the screen. ![]() | Call to Action (CTA)![]() Typography![]() The font of Montserrat has been used in sizes of 40, 32, 24, 18 and 16. It has mostly been used in a semibold and medium format, except for bold for the 40 font size. |
Mascot
The mascot for the website was selected to be a study partner during the time the user would be active on the Zidio Learning platform. The mascot guides the user for onboarding, as well as suggests relevant courses and keeps track of the user. The mascot is a characterised penguin named ‘Pangwin’.
![]() | ![]() | ![]() |
Design System
The design system consists of the icons used in the design of the website. The design system for Zidio Learning consists of the following icons: user, key for password, search, filter, voice assistant, dark mode, notification, settings, user profile, and back.

Component Library
The component library consists of all the components created for the prototype of the platform.
Instructor Profile Navigation Bar

Course Navigation

Quiz Question Options

Navigation Bar

Course Category Navigation

Module Navigation

Instructors













