Download From

UPSC PRELIMS

Empowering Your Journey to Success

Overview

To help LA Excellence transition from an offline coaching institute to a digital-first platform, we designed a dedicated Prelims app and web app focused on daily practice, test-taking, and progress tracking. The goal was to build a structured learning system that fit into the daily lives of UPSC aspirants—without compromising academic rigor.

Context

3 weeks

Iteration & Final Structure

Simplified features, reworked navigation, added new test modes.

5 weeks

Development & Testing

Assisted development and QA before launch.

2 weeks

Initial Design

Created IA and low-fidelity wireframes.

4 weeks

App UI Design – Mobile & Web

Designed high-fidelity screens for both platforms.

2 weeks

Research & Process

Surveys, competitor analysis, and user flow planning.

As the UI/UX Designer on the project, I led the end-to-end design of both the mobile and web apps. I was involved across all phases—from competitor research and information architecture to wireframes, high-fidelity UI, and final developer handoff. I worked closely with educators, and developers to ensure the product aligned with real-world learning behavior and constraints.

My role

Title

UPSC PRELIMS

Duration

Nov 2023 – Feb 2024

Tools

Figma, Photoshop

Team

Developers, Product Managers

Research & Process

We started by studying existing UPSC prep apps to understand their strengths, gaps, and user expectations. Since the market was saturated with prep platforms, we focused on identifying friction points—cluttered navigation, lack of progress tracking, and one-size-fits-all approaches.

Market & UX Research

LA Excellence helped us circulate a survey among their existing offline students through google form and classroom channels, gathering over 180+ responses. We also conducted 10 student interviews and discussed workflow needs with 2 mentors.

Student Survey

70% of students preferred mobile-first experiences for daily practice.

There was strong demand for custom test creation and better result analytics.

An OMR-like interface was requested for real exam simulation.

Students wanted low-pressure modes for revision—leading to the Tutor Mode feature.

Key insights

Initial Design

To ensure clarity and smooth user navigation, we mapped out all core user journeys and structured the app into well-defined sections. This helped align our design goals with both user expectations and platform scalability.

We started with a clear breakdown of all key flows:

user flows

With the structure in place, we created low-fidelity wireframes to outline core flows like onboarding, test creation, test-taking, and results. These quick, grayscale screens helped us validate UX decisions early, align with stakeholders, and iterate rapidly before moving into visual design. They laid a strong foundation for the final UI.

Low-Fidelity Wireframes

Onboarding & User Profiling

2-step flow capturing user basics and UPSC preferences

Subscription & Payment

Plan selection, payment via PhonePe, access controls

Test-Taking Interface

Tutor & Exam modes, with/without OMR options

Test Dashboard & Creation

GS & CSAT split, daily/tests, create-your-own test

Result & Performance Reports

Performance summary, analytics, PDF export

Profile & Settings

User info, subscription, referrals, settings

We began by analyzing existing UPSC preparation apps to understand current UX trends and feature expectations. From there, we mapped out the core user flows and built the initial information architecture, followed by low-fidelity wireframes covering the full app experience.

Early Structuring

After sharing the wireframes, we engaged in detailed discussions with the client around core experience decisions. We explored the bottom navigation structure, evaluating the relevance of Coach feature. The answer mode experience was another key topic—where we presented both a simple selection flow and an OMR-based option for test-taking. These conversations helped us gauge client priorities, clarify MVP scope, and ensure the UX aligned with their vision before moving into visual design.

Client Discussions

Only Single Answer Mode

(Basic MCQ Selection)

Less Detailed Performance Card

(Basic Information)

Connect with Coach

(Get Strategic Guidance)

Bottom Navigation with 4 Tabs

(Home, My Tests, Performance, Coach)

Home

My Tests

Performance

Coach

MCQ Selection

Answer with provided options for a digital test experience.

Ex:

GET A COACH

Find Your Interview Coach

Unlock your full potential with experienced personality test coaches & gain an edge in your interview.

Iteration & Final Structure

Taking feedback into account, we re-evaluated both user expectations and the client's operational priorities. The goal became clear: reduce friction, simplify navigation, and support realistic test-taking behavior while maintaining performance insights.

This led to a complete structural redesign, which included:

Improved Onboarding: Including 2-step user profiling based on UPSC year and attempts.

Restructured Navigation: Only essential features surfaced (Prelims GS & CSAT).

New Answer Modes: With OMR Sheet (for authentic Prelims exam simulation) & Without OMR (For faster, casual test attempts).

Removal of Coach: Coach feature removed to streamline scope and focus on core test workflows in the MVP.

Design Adjustments

Mobile App Design

After finalizing the structure and incorporating client feedback, we moved on to high-fidelity designs for the mobile app. The visual language was crafted to feel modern, focused, and intuitive—balancing clarity with the depth needed for UPSC preparation. The design covered all key user flows, including onboarding, subscription, test creation, test-taking modes (exam & tutor), and performance insights.

High-Fidelity Interface

Onboarding Flow

Launch → Intro Screens

Subscription Screen →Payment → Payment Success → Welcome Onboard

Phone Number Login or Sign up → OTP verification

Two-step Profile Setup

Dashboard Experience

Dashboard → Notifications

Question Bank → Performance

Test of the Day → PYQ Tests → Model Tests

Profile

No. of Used Questions

Custom Test Creation

Question Bank Card Create your own test

PYQ Tests

Prelims-GS

Test of The Day Card

Start Test

Model Tests

Performance Card View Report

Prelims-CSAT

Notifications

Prelims-GS

Design your own test

X no of test is created. Check them out!

View All

X no of test is created.

View

cREATE

Question Bank-GS

Used 101/10K qns.

Title of the Test

START TEST

25 Qns

30 Mins

Fri, Dec 8, 2023

Test of the day

View All

See your performance analysis report aggregated across all tests (overall) GS.

Performance Analysis Report

VIEW Report

PYQ tests

Model tests

Prelims-GS

Prelims-CSAT

Welcome

to La Excellence

Web App Design

Web App Prototyping Video

After finalizing the app design, I translated the same UX into a responsive web app, with layout adjustments for larger screens and mouse-based interaction. While development began on the app side, I concurrently handed off the web design specs.

High-Fidelity Interface

Development & Testing

I collaborated closely with developers to ensure smooth implementation across mobile and web. Provided detailed specs, interactive prototypes, and supported dev sprints with regular design reviews.

Conducted final QA checks to catch UI/UX issues, ensuring a polished and consistent user experience before client delivery.

handoff, and quality assurance

THANK YOU

Design Project By - SRIJAN

Test Creation Flow

Dashboard → Create Test

Select Subjects → Select Topics

Customize Test → Test Created

Test Result

Test Result → Question Wise Result

User Profile

Profile → Edit Profile

My Subscription → Settings → Contact Us

Test taking Flow

Test Instruction → Test Mode

Exam Mode → Answer Mode → Without OMR (Simple multiple-choice selection)

Tutor Mode (No timer, No result, Explanation visible for revision)

Exam Mode → Answer Mode → With OMR (Replicates UPSC-style bubbling)

Navigations → Test Summary →Test Submission

My Learnings

Designing for the UPSC Prelims App & Web App helped me master UX for test-heavy educational workflows. I learned to balance structure with flexibility, especially in handling exam vs. practice modes.

The project strengthened my cross-platform design skills, as I scaled the experience from mobile to web while maintaining clarity and performance. Most importantly, I embraced iterative change, adapting to shifting client needs while keeping the user experience consistent and intuitive.

Impact & Growth

Whoa there, tiny screen!

This one's meant to be seen on a canvas as wide as its ideas.

Switch to Desktop

View on Behnace

Whoa there, tiny screen!

This one's meant to be seen on a canvas as wide as its ideas.

Switch to Desktop

View on Behnace