MySuccess Mobile App
"Empowering Aspirants in the Digital Era"
SECTOR:
EdTech | Education
TOOLS USED:
Figma | Miro | Lookback | Google Docs | Zeplin
MY ROLE:
Logo Design
User Research
Competitive Analysis
User Experience Design
Interface Design
Accessibility & Usability Testing
Style Guide
Understanding Project Requirement
MySuccess is a digital product catering to the needs of competitive exam aspirants intended to enhance their educational impact.
​
The app's vision was to embrace the digital wave during the pandemic and fueled by the urgency of the hour, our collaboration aimed to "blend learning flexibility and easy access to a comprehensive array of study materials".
Design Goal
To design a mobile application for assisting the aspirants of UPSC Civil Services Exams (India) in their preparations for the exam.
Target group for phase 1: Those aspirants who already signed up for the offline coaching classes with the client.
Stakeholders
Aspirants
Teachers
Admin
Business
Business Requirement
Quick Resolution:
The client wanted to tap the potential of online learning in the wake of the pandemic.
Portable & Cost-effective Solution:
The client had hired the development team and content development team and hence the app design needed to be in tandem with the available resources.
Student Retention:
The focus was on retaining the students enrolled offline and catering to their needs first.
Competitive Solution:
Many market players were emerging and the solution was to be optimized according to the prevalent offerings along with a certain unique selling point, to get an edge over the competitors.
Design Process
DISCOVER
User Research
Research Analysis
Affinity Diagram
Research Report
DISCOVER
DEFINE
Personas
Pain points
Feature Ideation
User Scenarios
DEFINE
User Flow
DESIGN
Information Architecture
Rough Sketch
Wireframing
Colour & Type
DESIGN
Hi-fi Prototype
DELIVER
Accessibility Testing
Usability Testing
Design Iterations
Style Guide
DELIVER
DISCOVER
Understanding Aspirant's Requirement
A mix of primary and secondary research was conducted to understand the aspirant's requirements and needs.
_gif.gif){kind=small}
User Survey
30 participants
Qualitative Survey
Random Sampling
Goal: To understand-
-
How can digital products best support UPSC aspirants to access on-demand online classes and materials?
-
Which current features/functions are useful has wide-spread acceptance?
User Interviews
4 participants
Semi-structured
Random Sampling
Goal: To understand -
-
In-depth understanding of how UPSC exam aspirants use digital tools to access online classes, solve their doubts, and download class materials.
-
What goals do they try to achieve when using these tools?
-
What opportunities and needs might exist for an e-learning app to alleviate the current pain-points?
Content Analysis
65 Codes
14 Sub-themes
6 Themes
Process:
-
Familiarized with survey responses and interview transcripts.
-
Identified key themes related to student experiences, preferences, challenges, and expectations.
-
Reviewed & iterated for consistency & relevance,
-
Synthesized insights through visual representation by creating an Affinity Diagram
Report Creation
4 key findings
5 major pain-points
A thorough report supported by the graphs generated during surveys and quotes from participants interviews was created and discussed with the design, development & business teams. The report underlined the key findings, pain-points and the way forward.
DEFINE
Visualising Aspirant's Pain-points & Motivations
The target user group hailed from diverse professional backgrounds.
Three personas that represent the real-life journey of the students were identified on the basis of the research data. They focused on the motivations and pain points of the students while transitioning to an online mode of learning.
Major Concerns of the Aspirants
Ease & Accessibility
Pandemic & the diverse background of UPSC exam aspirants required on-demand access to classes & study materials.
Query Resolution
Simulating offline classes on digital platform includes lack of authentic, regulated & prompt peer discussions and query resolutions.
Quick Class Notes
Aspirants belonged to various professional background & hence required prompt & easy access to lecture notes.
​
​
Motivated Learners
Study at ones own comfort comes with a challenge to keep the students motivated & upbeat.
​
Technical Difficulty
Aspirants also included students from remote areas who were not so adept in using technology required easily comprehensible interface
Brainstorming App's Features
Feature Ideation
-
How can the pain points be alleviated?
​
-
What features can help achieve the resolution?
Features were ideated against every pain point with the aim to address them using Affinity Mapping.
Feature Prioritization
-
What features bring more value ?
Value-Complexity Matrix was used to prioritize the features.
Value: Impact a feature will have on user experience.
​
Complexity: Resource & Design challenges involved.
User Journey Sketch
-
How will the user navigate through the app?
The design sprint visualized the app's user journey in 8 stages. Design ideas were sketched and discussed in cross-team meetings for user value assessment.
Information Architecture
-
How will the content of app be structured?
The IA was created to organize and structure information, aiming to enhance user understanding, & navigation across team.
DESIGN
Wireframing
Wireframes designed prioritizing features based on user and business value, considering development complexity and available resources.
Splash View
Shows the name, logo & tagline of the app while loading.
BRAND VISIBILITY
Illustration Carousel
Illustrations describing what the app provides for the user enhances user’s interest in the app and intrigues them to register.
BRAND VALUE PROPOSITIONS
Unified Sign-In/Sign-up
Uses backend data to decide user login/signup flow. If already registered then takes to the landing page directly, or else asks to confirm a form.
SEAMLESS EXPERIENCE
Recently Visited Content
Personalization of content enhances user engagement providing tailored experiences and relevant user experience.
PERSONALIZATION
New & Relevant content
Promotes exploration, aiding users in finding new content, courses, or features, reducing the likelihood of uninstallation or discontinuation.
VISIBILITY & DISCOVERY
Like, Save & Starred Content
Users save content matching their interests, enhancing their experience. Analyzing preferences and trends informs content improvement and creation.
CUSTOMIZATION & EASE OF ACCESS
Chats : Admin, Group & Personal
This gives users confidence that assistance is available if they encounter issues or have questions.
HELP & SUPPORT
Lecture Details & Progress
Easy to access class contents and the live progress of lessons keeps users motivated & informed.
FEEDBACK & CONFIRMATION
Download Icon & List of Classes & Pdfs
Provides multiple options & ease of access to the resources and hence less cognitive load.
EASE OF ACCESS
Bottom Menu
Supposed to help users navigate through various features thus facilitating technical ease.
TECHNICAL EASE
Wireframe Design Iterations
A usability study was done with the design and development team at the wireframe level and discussed changes were adopted for the hi-fi designs.
Tags: New Video or Live Video
Such a tag will bring the element of recognition & reduce the cognitive load of users further.
VISIBILITY & DISCOVERY
Attachment in Chat
Such features enhance flexibility in the user experience enabling the user to learn at their ease.
FLEXIBILITY
Gamified Scoreboard
Gamified learning progress & competitive scores engages the user and keeps them motivated through their learning process
MOTIVATION
Logo Design
Logo Design was primarily based on the business requirement and was kept coherent with the brand offerings.
Font Family : Open Sans
Readability
Versatility
Contemporary
Web-Friendly
Open Source
Logo requirements
Structured
Modern
Elements of Learning
Elements of Collaboration
Design System
A comprehensive Design System was created including the basic components of the apps.
Why a Design System was required:
​
-
Faster time to Design
-
No need to rethink UI components
-
Uniformity across App
-
Easy to scale with more members in the team
The Design system included:
​
-
Colour Palette
-
Typography
-
Shadows
-
Buttons
-
Icons
-
Input Fields
-
Other important components
Colour Palette
Typography
Design Solutions
The design prototypes were developed on Figma after multiple iterations. Focus was maintained on solving the user's pain points. WCAG Guidelines were maintained while designing the UI.
Current Phase: Easy Login
In phase 1 the app is supposed to be for the students who are already registered with the coaching institute. Thus the students can easily login with the code on their mobile number
Future Phase:
The app will require a sign-up page for signing up new students.
The future phase can still maintain the easy login/signup using a phone number by leveraging the database.
Current Phase: Allotted Courses & Only Chat Functionality
Since the courses are being allotted according to the registration, there are only 4 sections of lectures: Ongoing, Saved, Live Lectures, and New Lectures.
​
The chat functionality is easily accessible and only supports text communication.
Future Phase:
The app will require a section for available lectures that could be subscribed to at the student's discretion.
Eventually, there can be option to schedule a voice call or video consultation with the mentors or teachers.
Current Phase: sorts the doubt resolution issues
The design resorts to features which could help the students resolve their doubts dynamically with both teachers and students while maintaining the validity of the solutions.
Future Phase:
Can incorporate AI and gamification in the design of interactions to make the experience more engaging and effective.
Current Phase: Provides editable personal and library details
Ease of access and simple interaction are maintained for the students so that they can verify their details and edit if required.
Future Phase:
Scores, Streaks & Metrics can be created using gamification which will help in better motivation for the students.
Current Phase: Easy access to the resources.
The main focus of the app is to provide ease of access to the coaching institute's resources.
The status on the resources helps the user to
DELIVER
Testing the Designs
Usability testing of the designs was done among 10 priority users to check loopholes.
The Lookback tool was used to test the designs by observing participants' responses and frustration during the 'Cognitive Walkthrough'.
​
The major problem for students in digital learning is their query resolutions. It was well taken care of using many features to cater to the issue from different angles.
Major Changes
Star, Delete & Edit chat bubbles: 3 Participants pointed out the need for star, edit or delete of the chat bubbles.
Select and un-select all the multiple lists of documents: 6 out of 10 participants showed frustration at the select option on the list of documents page. Their prime concern was the functionality to de-select the options at once.
Challenges & Learnings
The journey from research to prototyping was a rich learning experience, uncovering valuable insights into user behavior and key pain points.
Usability testing and iterations provided a humbling experience, fostering empathy and guiding design improvements based on user needs. This process heightened the importance of user research and testing, identified accessibility issues, and deepened understanding of user limitations with an empathetic perspective.
Tight Timelines: The target to provide the students with learning resources as soon as possible during the pandemic was a challenge.
Strategic Time Management: I learnt strategic feature prioritization and the need for flexibility in project planning.
User Research Limitation: Arranging the sample for interviews and surveys was a big issue.
Adaptability in Research: I learnt various tricks and tips of ethically reaching out to user for requirement gathering.
Integration Issues: Working with existing systems revealed unexpected integration challenges that required creative problem-solving.
Problem-Solving Agility: Addressing integration issues honed my problem-solving skills and underscored the significance of anticipating potential hurdles.
PROJECTS
RESPONSIVE WEBSITE-MOBILE DESIGN
Wayloader
Coming Soon
The marketing website redesign aimed to increase enrollment for our BIM product with intuitive navigation and location-based technology.
MOBILE DASHBOARD DESIGN | SERVICE DESIGN
Vendor Portal
A sleek interface empowers stakeholders in overseeing credentials, streamlining processes, and enhancing accountability in compliance and vendor management.
