GRADUATION
GetMiClass
Graduation Project at Manipal Digitals: Get Mi Class is a UI/UX project focused on creating an intuitive, user-centric platform for students and educators. The project aimed to streamline access to educational resources, enhance engagement, and deliver a seamless digital learning experience. By prioritizing usability and functionality, Get Mi Classbridges the gap between technology and education, catering to the evolving needs of modern learners.
Year: 2023
Type: UI/UX Design
Based on: Educational Technology (EdTech)
CONCEPT
GetMiClass is a cloud-based educational platform designed to support students preparing for competitive exams. Featuring test questions, instant performance analysis, and expert video solutions, it empowers learners to study at their own pace. With integrated LMS functionality, GetMiClass is accessible across desktop and mobile browsers, as well as via a dedicated mobile app.
Why Redesigning?
CAUSE
Reparation - One of the key reasons for re-launching a website is to repair obsolete content and interfaces, insufficient responsive design of website pages and features, and, most significantly, inadequate connectivity. Keeping in mind that more than half of Online users abandon a website to look for other resources if it takes more than 3 seconds to load, while there are instances of action links directing the user to a separate homepage from where there is no coming back.
A good website is more than simply visually appealing!
INITIAL HMW - How Might we break the stigma around sex education by designing the tools to facilitate the conversation between Adult and children by making it more comfortable.
Errands
TASK ASSIGNED
Design Process
APPROACH & STRATEGY
Bob the builder! Kar ke dikhaenge!
A prototype with limited functionality but clickable parts that shows the user interactions and navigation options of an application is known as a medium fidelity prototype.
MID FEDILITY WIREFRAMES
Web 1920 - Grid: Margin - 326 px I Column- 12 I Column Width - 91 px I Gutter Width - 16 px
Mobile 414 - Grid: Margin - 16 px I Column- 04 I Column Width - 89 px I Gutter Width - 8 px
Style Guide
UI ELEMENTS
The design system has more than 100+ components, which ensure systematic and clean design in any situation and additions that arise.
COMPONENTS
Components are interactive basic elements in the creation of a user interface. I.e. Buttons, Navigation Bars, Cards, Text Fields, etc..
TYPOGRAPHY
I chose the "Helvetica" font for its unique traits: a tall x-height for distant readability, tight letter spacing for a solid, dense look, making it perfect for captivating headlines.
Font Family - Sans Serif
Helvetica - Bold - 36 px - Header - #000000, #FFFFFF Helvetica - Regular - 20 px - Header- #000000, #FFFFFF Helvetica - Oblique - 44 px - Header- #000000
Bello Caps Pro - 44 px - Header - #000000, #FFFFFF
ICONOGRAPHY
Iconography is a visual language used to represent characteristics, functions or content. Icons are meant to be simple, visual elements that are recognized and understood immediately.
COLOR PALATTE
Color allows to set the basic atmosphere, the tone, the concept and also to communicate easily with the users.
Traverse
DEFINING GOAL
GetMiClass is a cloud-based LMS helping students prep for competitive exams with test questions, analytics, and expert video solutions. Accessible on web and mobile, it supports self-paced learning with role-based access for teachers and students. The redesign focused on modernizing the platform, improving usability, and creating a more engaging, trust-driven learning experience.
“Good designers never start by trying to solve the problem given to them: they start by trying to understand what the real issues are.” — Don Norman
Empathize is the first phase of the design thinking process that focuses on user-centered research, where you can gain real insights into users and their needs. I explored leading e-learning platforms to understand how users interact with them and what shapes their preferences. This competitive analysis revealed key expectations around accessibility, content quality, and user engagement—offering valuable direction for identifying gaps and opportunities in the GetMi Class experience.
-
Strong brand recognition and trusted reputation in the education space
-
High-quality, diverse educational content
-
Established digital presence with user-friendly platforms
-
Large and active user base
-
Flexible learning options accessible across devices
Empathise
SWOT ANALYSIS
-
Heavy reliance on technology, limiting accessibility for some users
-
Limited ability to deliver hands-on or experiential learning
-
Challenges in maintaining personalized student-teacher interactions
-
Intense competition in a saturated online learning market
-
Rising demand for online education due to its flexibility and reach
-
Potential to expand into new geographies and learner demographics
-
Collaborations with educational institutions for accredited programs
-
Integration of emerging technologies (e.g., AR/VR, AI) to enhance engagement
-
Established competitors and growing number of new entrants
-
Technological disruptions or platform failures impacting service delivery
-
Shifting government policies and regulations in the education sector
-
Uncertainty around the long-term sustainability of the online learning trend
Hey Alexa! Let’s see who wins?
Build a Pleasant and Welcoming Home Page: Design a visually appealing homepage with intuitive navigation, warm visuals, and inviting language.
- Creates a positive first impression and encourages users to explore the platform further.
Redirect Users to the Homepage After Registration: After users sign up, lead them to the homepage instead of directly entering the learning dashboard.
- Helps users feel more connected to the platform and discover its full range of features.
Create Informational Pages for Live Classes and 7-Day Free Trial: Instead of linking these features directly to the login page, offer detailed, public-facing info pages.
- Gives users a better understanding of each feature, increasing transparency and user trust.
Remove Duplicate Mentions of the 7-Day Free Trial: Eliminate the 7-Day Free Trial listing from the navigation panel if it's already on the Packaging Page.
- Reduces redundancy and streamlines the navigation experience.
Remove Live Class from Non-Login Navigation Panel: Hide “Live Class” from the navigation menu for users who aren’t logged in.
- Avoids confusion and ensures users only see relevant, accessible features.
Add an Exam Updates and Alerts Page: Create a dedicated page with real-time exam changes, news, and alerts.
- Keeps users informed and prepared, increasing the platform’s credibility and value.
Add a Search Feature in the Blog Section: Implement a keyword search function to filter blog content.
- Helps users quickly find the articles or resources they’re looking for.
Indicate the Current Page in the Navigation Panel: Highlight the current page or section the user is viewing in the nav bar.
- Improves user orientation and makes navigation more intuitive.
Categorize the Packages: Group packages based on exam type, difficulty level, or user needs.
- Makes it easier for users to find relevant offerings and compare options.
Provide More Information About Each Package: Include details like package features, content descriptions, and user reviews.
- Enables informed decision-making and builds user confidence in their purchases.
Usuability
HEURISTIC EVALUATION
“Heuristics” simply means guidelines. This approach is used to grasp the issues quickly and effectively, and it uses fewer resources.
A heuristic evaluation was conducted to identify usability issues based on Jakob Nielsen’s 10 usability heuristics. The analysis revealed key problems such as inconsistent navigation, lack of feedback, repeated content, and poor error handling. The site also failed to maintain visual consistency across pages and offered limited visibility into system status. These issues contributed to user confusion and friction, highlighting the need for a more intuitive, consistent, and user-friendly interface to support a smoother learning experience.
Diagnosis
PLATFORM ANALYSIS
A deep dive into the website’s structure revealed several usability and content issues impacting user experience. Repetitive topics, inconsistent headings, and duplicated sections clutter the interface and dilute key information. The platform offers inconsistent experiences between pre-login and post-login states, with important content—like Live Classes—redirecting users without context. Some sections lack accessible links or offer minimal details, making the navigation feel confusing and incomplete. The visual style also varies from page to page, and users often can’t return to the homepage without reloading or using back navigation. These gaps in architecture and content cohesion contribute to an overall disjointed and frustrating experience.
User Persona
RESEARCH AND MAPPING
To create a more focused and effective redesign, I began by conducting user research to understand the needs, behaviors, and pain points of GetMiClass’s primary user groups. These included students preparing for competitive exams, as well as supporting roles like teachers and parents. Through surveys, interviews, and observational insights, I identified key motivations—such as the need for clarity, flexibility, and trust in the content being delivered.
Customer Journey
SHARED MAP OF USERSTOUCH POINTS, PAIN POINTS ANF FRUSTRATIONS COLLECTED
Prototyping
FINAL UI
App Prototyping
FINAL UI
Test
USUABILITY TESTING
Usability testing is a method employed in User-Centered Design to assess solutions by subjecting them to user testing. Participants engage in typical tasks while observers closely observe, listen, and record notes.
I used eight people to test my prototype. Before giving them a few straightforward tasks to do to gauge their true reactions and determine whether the product meets user exceptions, I gave them a brief introduction of the programme. This was done separately and remotely.