How I Designed a Platform to Help Pilots Ace Their DGCA Exams: A Case Study
From ideation to execution, this article will take you through the journey of building an aviation exam preparation platform.
🚀 How it all started?
A little backstory before we get into the actual case study
When the world was grappling with the first wave of COVID-19 and the education sector was hit, my acquaintance, Capt. Anuj and Capt. Lakshaya completed their Commercial flying and entered the education sector. They knew that the aviation studies field faced several problems and lacked online platforms to assist students.
Although many coaching institutes had shifted to online teaching, there was no platform to assess students’ knowledge. It was then that they conceived the idea of creating a mock test platform, that would help aspiring pilots become exam-ready.
Primary Research :
Did some market Research
Conducted market research to understand our potential users, before delving deeper into their needs. I connected with students and pilots who have completed their flying, to gain insight into the market and the types of users who may benefit from our platform.
Through this research, I discovered that the market is quite large and concluded that these sets of users would be the potential audience for our platform.
1. Aspiring Pilots
Who are in the initial phase of their careers.
They may use the platform to take practice tests and assess their level of preparedness
2. Flying Cadets
These users are currently enrolled in flying schools and preparing for exams.
They want to evaluate their knowledge before attempting the DGCA exam.
3. Airline Pilots
These users are already working as airline pilots and aim to climb higher on the career ladder in the aviation industry.
They may use the platform to enhance their knowledge and stay updated with the subjects.
4. Instructors from coaching institutes / flying schools
These users may be teaching in coaching institutes or flying schools and wish to test their knowledge and stay up-to-date. However, this group represents a relatively small percentage of users on the platform.
Understanding Our Users Better
In order to create a solution that truly meets the needs of users, it was important to understand what they want and what they’re looking for. With this in mind, I conducted interviews with students who were studying for the DGCA exams from home.
I wanted to know more about their behaviors, patterns, likes, dislikes, and any challenges they faced with the current studying methods, so I prepared a questionnaire for them.
Next up I created a questionnaire
By empathizing with their experiences and gathering this information, I was able to gain valuable insights into what needed to be solved. This helped ensure that the solution I created would bring about positive change for users.
Post User Interview
Some of the valuable insights I received from users were both interesting and crucial. The insights that stood out include:
To quickly identify and resolution of the issues, I categorized them for easy tracking during the design process. This approach will help me in presenting the issues and design solutions to stakeholders.
Secondary Research :
Exploring the Competition
With user insights in hand, the next step was a competitor analysis. This exploration was intended to understand the information architecture, user patterns, and flow of our rivals’ platforms.
Post Competitor Research
After this research, I sketched our platform’s information architecture.
This was created to
- To determine the number of levels that the site will have and establish a hierarchical structure.
- To understand if the users can efficiently navigate to the desired location on the site.
- To ensure that users can easily find and access the pages they are searching for.
✧ Charting User Journeys
The website had several flows, such as:
- Payment flow.
- Taking a mock test or e-test.
- Saving questions or bookmarking.
- Reporting disputed solutions to the admin.
The payment flow was relatively straightforward, similar to any e-commerce site. However, the most crucial flow was taking a mock test or e-test, which was the primary purpose of the website. Therefore, I started working on this flow first.
User Interface
After finalizing the font style, color scheme, spacing systems, grid systems and creating basic low-fidelity sketches, I proceeded to design the user interface (UI).
During this stage, I continuously referred back to the competitive analysis conducted during the research phase, to ensure that the design followed established design patterns, rather than creating a new one from scratch.
Time was a critical factor at this stage since I had to complete the entire project within 45 days and I only had 30 days left to test my designs with real users, before handing over the Figma design file to the developers.
My favorite part of the entire process has to be the UI design phase. It’s because I feel a sense of pride, that all the research and thinking that I did for the past few days is now coming to life. I was super excited as UI design is what I enjoy the most. Even though UI design is just one small part of the entire process,
I believe it’s super important because a bad UI is like a badly designed cake, no matter how great it tastes, no one wants to eat it. With that said let's see what I designed …..
Login Screens
The login and registration screens were easy to design, but it was crucial to identify their states and edge cases.
I initially identified there was
1. Default,
2. Active (when a number is entered in the input field),
3. and Invalid OTP
Initially, I began with a basic standard input field for entering the OTP. However, I soon realized that it did not align with the preferred method of entering OTP codes.
I iterated on the design by separate boxes for each digit of the OTP. Additionally, I considered various states while refining the design, which is showcased below in iteration 2.
Dashboard Screens (Post Login)
The dashboard screen is the gateway for users after they’ve logged in and it essentially acts as the command center for the complete student-oriented experience on the platform.
The banner is an influential area of the homepage, offering the first point of interaction for users. Different banner content for different user types offers personalized experiences, making users feel valued and understood.
Nevertheless, various elements of the dashboard adjust according to different user personas. Let’s delve into how this works:
1. For First-Time Users
After they log in, these users are greeted with a welcoming banner on the dashboard that invites them to fully engage with the platform. They are prompted to subscribe to a subject of their choice and start taking mock tests.
2. For Paid Users
The dashboard for these users is tailored to their specific needs.
a. If they have yet to attempt any mock tests, the banner nudges them towards taking their first mock test or e-test.
b. Conversely, if they have already taken some mock tests, the upper section of the dashboard showcases their previous test results. This readily available information helps users quickly grasp their progress.
3. For Paid Users Nearing Subscription Expiry
These users see a dashboard banner highlighting an option to renew their subscription before the last day and avail a discount. This message imbues a sense of urgency and serves as a gentle reminder for users to renew their plan. It subtly promotes the continuation of their paid plan.
Navigating back to the control tower of user flows, let’s take off on the runway of understanding the process of taking a mock test or e-test.
✨Fasten your seatbelts and prepare for lift-off 🛫!
✧ User Flow 01
Steps in Taking a Mock or e-test flow
↓ Step 1: Subject Selection:
Users begin by choosing a subject.
For free users, they are allowed to take the first topic of any subject as free as part of the demo test.
On the other hand, paid users have the flexibility to take individual topics or even the entire subject as a mock test. To differentiate between these options, topic-wise tests are labeled as ‘e-tests’ while subject-wise tests are referred to as ‘mock tests’.
↓ Step 2: Instruction Review:
Next, it’s important to read and understand the instructions associated with the chosen test. This ensures clarity about the test format, duration, and any specific rules that need to be followed.
↓ Step 3: Test Screen:
After understanding the instructions, users answer the test questions displayed on the test screen. The design of this screen mirrors that of the actual DGCA portal to provide users with a familiar environment and to prepare them for the actual test.
↓ Step 4: Test Submission:
After answering all the questions, the next step is to submit the test. It’s crucial to review answers and make any necessary changes before submission, as changes cannot be made afterward.
↓ Step 5: Results and Solutions:
Finally, users receive their test results and detailed solutions. This valuable feedback can help users learn from their mistakes, understand the correct answers and identify areas where they may need further study or practice.
Let's delve into the specifics of this mock test flow, page by page
✨ Page: The Subject Details
I designed this page as the ‘pre-flight check’ of our platform, giving newcomers an opportunity to ‘taxi on the runway’ before deciding to ‘take off’ with a subscription.
We opened the doors to the first topic of each subject for complimentary demo tests, letting prospective subscribers ‘inspect’ the quality of our content and user interface.
Users have unlimited ‘flights’ with these tests, however, for the journey to additional topics, a subscription is your ‘boarding pass’.
✨ Page: Instructions
This page is essential for setting expectations for the user. It lays out all the key instructions for the upcoming test. To ensure clarity, we employed color coding to differentiate between attempted, unattempted, and unvisited questions.
✨ Page: Test screen
The design of the Test Screen was a delicate balancing act. We wanted to offer the best user experience possible, yet we had a constraint to consider maintaining similarity with the official DGCA exam portal.
This decision was purposeful, as it provides users with a serious, exam-like feel, something we saw as a unique selling point. This resemblance to the DGCA portal not only prepares users for the real exam environment but also assures them of our platform’s credibility.
✨ Page / Pop up: Submission Summary
After submitting a test, users are presented with a summary pop-up. This immediate feedback shows the number of questions attempted, unattempted, and unvisited.
✨ Page: My Results
Unveiling the Elements of the Results Page — A Comprehensive Breakdown
Our results page is meticulously designed to offer an insightful and encouraging post-test analysis. Each section holds specific significance and serves a distinct purpose. Let’s delve into each one:
➡️ Section 1: Overall Score
The very first section provides users with their result — ‘pass’ or ‘fail’ — and the percentage of the total score they achieved. Including the passing criteria provides a clear benchmark and helps users understand where they stand in terms of meeting the exam requirements.
Quick access to this information allows users to instantly gauge their performance, which is the primary objective of this page.
➡️ Section 2: Status Message
This section offers a personalized message based on the user’s test outcome. Regardless of the result, users are encouraged to continue practicing and enhancing their knowledge.
Personalized messages increase user engagement and foster motivation, reinforcing the idea that each attempt, whether successful or not, is a step towards success.
let’s see some examples
For users who passed:
“Congratulations! Your hard work paid off and you passed the test. Continue practicing to maintain your strong performance.”
“Well done! You’ve cleared this mock test. Keep up the consistency in your learning journey.”
“Impressive performance! You’ve successfully passed this mock test. Stay committed to your practice to retain this level of achievement.”
For users who failed:
“Don’t worry, it’s just a setback, not the end. With more practice, you’ll improve. Keep going!”
“You didn’t pass this time, but remember, every attempt gets you closer to your goal. Let’s take this as a learning experience.”
“It seems like this test was tough, but don’t lose heart. Consistent practice will surely lead to improvement.”
➡️ Section 3: Detailed Performance
Here, users can see the breakdown of their results -
correct answers, wrong answers, and unanswered questions.
This detailed analysis facilitates self-assessment and encourages users to identify their strengths and areas for improvement. It also enhances the user’s awareness of their time management skills.
➡️ Section 4: Comparative Analysis
This leaderboard-style view allows users to compare their scores with other aspirants. Peer comparison can foster a healthy competitive spirit and motivate users to improve their ranking. It also offers a broader perspective on their preparedness level relative to others.
➡️ Section 5: Next Steps
This section includes an encouraging message from the admin (our captains, in this case), suggesting users take another test. Users can also find links to resource materials like PDFs and video lectures for further study. Encouraging users to continue practicing and providing relevant resources promotes continued learning. Moreover, the presence of a ‘real’ captain strengthens the credibility of the platform.
➡️ Section 6: Feedback
Users can provide their feedback on the test they just attempted. This opportunity to voice opinions or concerns fosters user engagement and can provide valuable insights for further improvement of the platform. It also strengthens the relationship between users and the platform by making users feel valued and heard.
✨ Page: Detailed Solution
The goal of the Detailed Solution page is to provide in-depth feedback on the user’s performance on each question of the mock test. This way, the user can understand where they made mistakes and learn the correct answers.
Here’s an in-depth look at each of the proposed sections.
➡️ Section 1: Header
The Header section contains the subject, topic, and important test details like pass or fail status, test score as a percentage, and count of correct, incorrect, and unanswered questions.
Providing such summarised data at the top allows users to get an overview of their performance at a glance. Understanding their overall accuracy and the number of questions they didn’t attempt can help them strategize their learning.
➡️ Section 2: Solution block
This section contains the questions, their options, a detailed solution, and added features like the Save and Report options. The user’s response is color-coded: green for correctly answered questions, red for incorrectly answered ones, and grey for those left unanswered. The correct option is also highlighted in green.
↪ Elements :
- Question & Options: Displays the question and the options that were provided during the test.
- User’s Response: The option selected by the user is highlighted and color-coded based on whether it was correct, incorrect, or unanswered.
- Correct Answer: Regardless of the user’s response, the correct answer is always highlighted in green.
- Detailed Solution: An in-depth explanation of why the correct answer is correct.
- Save Option: Users can save or bookmark a particular question for future reference. This can be useful for questions they found challenging or insightful, and wish to review later.
- Report Option: If users encounter an issue with a question, such as an incorrect solution or any misinformation, they can report the problem to the admin for review and resolution.
✧ User Flow 02
The concept of a bookmarking solution or save option resembles the functionality found in Spotify’s personal playlist.
Typically, users utilize bookmarks to save content for future reference, allowing them to revisit and refer back to it.
This is also similar to Airbnb’s wishlist feature, which enables users to save properties and designate them as default or user-defined.
We realized how valuable this concept could be for our students, as it simplifies the process of organizing and finding questions.
↓ Step 1: Initiation of Save Action
On the Solution Page, users can tap on the ‘Save’ option linked to the question they want to save for future reference.
↓ Step 2: SaveList Naming
A pop-up emerges where users can choose a default name for their ‘SaveList’ or customize it according to their preferences.
I felt offering both default and customizable ‘SaveList’ naming options fosters flexibility and personalization. It enables users to categorize their saved questions, enhancing their ability to recall and revisit the relevant content later.
↓ Step 3: Save Confirmation
Upon defining the ‘SaveList’ name, a toast message appears to confirm that the question was successfully added to the selected ‘SaveList’.
Providing visual feedback through a toast message serves to assure users that their save action has been successfully executed. This confirmation enhances user confidence in the platform’s functionality and reliability.
✨ Page: Savelist / collection / save for later
I cannot conclude the discussion on the Savelist flow without diving into the design of the Savelist page itself.
Up next, I’ll delve into the elements I considered during its design, and I’ll explain why this page holds such a significant place in the overall structure of our platform.
⚡️ Understanding User Behavior:
- Frequent Revisits: Users often come back to this page to access information marked as valuable.
- Looking for Specific Questions: Users may search for a specific saved question.
- Reviewing Saved Items: Some users may review all saved items to reinforce learning.
- Usage of Sorting & Filtering: Users use Sort and Filter functionalities to efficiently manage and retrieve saved information.
⚡️ Necessity of the Savelist Page:
- Easy Access: The Savelist page provides a dedicated space for users to easily access saved questions.
- Personalized Repository: It serves as a personalized repository, enhancing users’ learning experience by enabling review and revision of crucial content.
- User Experience Enhancement: This page is key to a personalized and seamless user experience, thus increasing user engagement and satisfaction.
⚡️ User Goals:
- Effective Review: The main goal for users on this page is to effectively review and study saved questions.
- Focus on Specific Topics: Depending on their study plan or preparation level, users may want to focus on specific subjects or topics.
- Managing Saved Items: Users might also aim to manage saved items, such as organizing them in a specific order or removing items they no longer need.
⚡️ Benefits to the Users:
- Easy Access and Management: The Savelist page provides easy access and efficient management of saved content.
- Enhanced Study Efficiency: It significantly improves study efficiency as users don’t need to search through the entire question pool to review desired content.
- Enhanced Learning Experience: The page offers a personalized, well-organized study aid, contributing to more effective learning and potentially improved exam outcomes.
- Filtering and Sorting: The ability to filter and sort saved items based on different criteria like date and subject/topic allows for a tailored learning environment that meets each user’s needs.
✧ User Flow 03
Question Reporting
In instances where users encounter questionable / disputed data on the solution page, they have the option to report it to the platform administrators. Essentially, any user-identified errors are communicated to the administrators for review.
The administrators assess the reported issues via their admin dashboard, implement corrections if necessary, and subsequently resolve the issue. Upon resolution, the student will receive a notification affirming the resolution of their reported issue.
✨ 👆🏼Page: Reported Questions
Resolved State :
The green block serves as a clear indicator that a reported question has been addressed. The admin’s response and a link to the corrected question ensure user validation and streamline the review process. The admin’s reply within this block provides users with a sense of acknowledgment and validation for their efforts in improving the platform. It also maintains transparency about the actions taken to resolve the query.
Under Review State :
The orange section reassures users that their reported question is under examination. This creates a feeling of participation, communicates the value of their contribution, and enhances their overall user experience. The status ensures users are aware that their query has been acknowledged and is being worked upon.
This compact notification banner on the homepage is designed to deliver instant, efficient updates to the users, letting them know that their reported issue has been addressed.
- Report Query Number: Displaying the report query number allows users to easily correlate the resolution with the question they reported. This provides transparency and allows users to track the status of their individual queries.
- Resolution Date: Displaying this date is essential because it provides a timestamp of when the action was completed, thereby giving users a clear understanding of the platform’s responsiveness to their queries.
- Admin’s Reply: The admin’s reply is a key element that personalizes the interaction. It provides specific details about the resolution and demonstrates to the user that their report was carefully considered and acted upon.
- CTA: View Details: button for viewing more details offers users the option to engage further with the resolution process. By clicking on the CTA, users can navigate directly to the detailed resolution page.
✧ User Flow 04
Payment /Subscription Flow
The process of designing the user flow for subscription and access to our mock tests was fairly simple. This is because subscription models are widespread across many online platforms, giving us plenty of examples to refer to and help us create an easy and user-friendly experience. Let’s take a look at how we divided this subscription and payment process into clear steps:
↓ Step 1- Initiating Subscription
The process begins with the user clicking “Enroll now” on the subject card of interest, marking the first step towards subscribing.
↓ Step 2: Picking Your Subscription Duration
Next, the user is taken to a page to choose the duration of their subscription. Options include monthly, quarterly, half-yearly, or yearly. This allows the user to align the subscription with their learning objectives and schedule.
↓ Step 3: Checking Your Order
Once a choice is made, an order summary page is displayed. It presents all the details of the subscription, including cost, duration, and any available discounts. This gives the user an opportunity to review their order before moving to the payment stage.
↓ Step 4: Paying for Your Subscription
The user is then directed to a secure payment gateway where they can choose a preferred payment method. Options like credit card, debit card, UPI, or others are available, ensuring the user’s comfort and convenience.
↓ Step 5: Confirming Your Payment
Upon completing the payment, the user is redirected to a page indicating the payment’s outcome. If the payment is successful, the user receives confirmation of their subscription and immediate access to the mock tests. In case of a failed payment, options are given to retry or choose a different payment method, ensuring the user can proceed with their subscription without any major issues.
✨ Key Learnings from this Project
- Gained valuable insights into the importance of time and task management, successfully completing the project within a 45-day timeline with an additional 5-day buffer.
- Deepened knowledge of design systems, including molecular design systems and variations of element states, enhancing the understanding of design consistency and scalability.
- Recognized the importance of considering various user flows, edge cases, and feedback from developers to ensure design caters all possibilities.
- Developed a realistic and practical understanding of the design process, focusing on usability and practicality rather than merely pursuing visual aesthetics.
- Emphasized the importance of self-learning and continuous improvement, utilizing online courses from platforms like LinkedIn and Udemy, as well as researching and reading relevant articles to enhance skills and knowledge in UX design.
🔮 Future Scope
- Gather regular feedback from users to improve the platform’s user experience & faults.
- Introduce a video section to provide users with a “watch and learn” feature, enhancing the learning experience.
- Implement a vault of previous years’ questions to offer additional practice materials and help users familiarize themselves with exam patterns.
- Explore the possibility of gamifying the platform to make the learning process more engaging and interactive.
- Consider adding a premium feature that offers mentor support for users seeking personalized guidance and assistance.
👨🏻✈️And we’ve landed! We’ve successfully navigated to the end of this article’s flight plan
Thank you for being my co-pilots on this exciting journey through the blueprint and construction of our pilot exam preparation platform.
We’ve soared through skies of insights and expertise, and I hope you’ve enjoyed the journey and found it insightful.
Though our wheels have touched ground and the engines have quieted, remember that in the realm of ideas and innovation, the conclusion of one journey simply paves the way for the next adventure to take flight.
Should there be any lingering queries in the cabin after our journey, don’t hesitate to signal. You can reach out to me on social media. I’m always up for engaging in conversations and feedback.
Contact Details
🩵 LinkedIn : https://www.linkedin.com/in/saiesh-volvaikar-5734a9107/
✉️ Email: saiesh14@gmail
In the vast airspace of online content, the end of one article merely signals the readiness for the next takeoff. So, fasten your seatbelts again and prepare to soar to new heights. Until we cross paths at another airport of ideas, keep flying high! ✨🚀
👏 Give a long-press and clap if you liked what I did! 😁
