SOOR MALHAR APP
About the app
Soor Malhar app aims to provide quality music lessons. There are a variety of instruments and courses that are taught here namely Guitar, Keyboard, Staff Notation and Vocal.
Problem Statement
The music learning app struggled with user engagement, particularly among older adults, due to complex sign-up and login processes. To improve retention and satisfaction, the app needed better usability and accessibility, especially for older users.
Research
GUIDING RESOURCES
USER SURVEYS
I conducted qualitative surveys with open-ended questions, gathering insights from 8-9 users. This research revealed key user frustrations and hurdles that were impacting the app’s ability to attract and retain customers effectively.
AFFINITY DIAGRAM
The feedback can be divided into two parts:
Featured Wireframes
Screen Redesigns
SIGN UP PAGE
Version 1:
The logo is kept small to give more space to the form, making it easier to see without much scrolling. A toggle icon for the password helps users avoid mistakes, and adding a “Confirm Password” field makes sure they didn’t accidentally type something wrong while setting their password.
Final Version:
The logo size was reverted to its original to avoid users stretching their thumbs to the upper screen. Adding a "Confirm Password" field was skipped, as typing passwords on mobile is time-consuming and leads to weaker passwords. Instead, hints near the password field clarify requirements, preventing errors without adding effort. Field focus is improved with highlighted outlines for better visibility. Modal dialog boxes for errors were replaced with inline error messages directly below the affected fields, eliminating the need to remember errors or tap "OK." Labels and hints remain outside text fields to stay visible during typing, reducing cognitive load and enhancing usability.
Login Page
Version 1:
The small logo design mirrors the Sign-Up page. Additional sign-in options via Google or Facebook are provided for quicker access without remembering passwords. A password visibility toggle icon is also included.
Final Version:
In this version, the logo retains its original size as in the Sign-Up screen. The password visibility feature is enabled by default, allowing users to avoid typing errors while maintaining privacy. The original text size and spacing for "Forgot Password?" and the Login button have been restored to prevent Fat Finger issues. Google/Facebook sign-in options have been removed and will be proposed as part of an Extra Feature Suggestion List.
Challenge 1
Challenge:
During the project, I had a difference of opinion with my mentor about including Google/Facebook login options in the app. My mentor believed multiple login options might confuse older users and complicate their experience.
Solution:
To address this, I conducted user research with a diverse group of 8-9 participants aged 47 and above. Through interviews and usability tests, I gathered insights on their preferences and challenges with login options. The findings revealed that most participants preferred the Google login option, as it eliminated the need to remember passwords and streamlined their experience. This data-driven approach resolved the conflict and highlighted the importance of incorporating user feedback to create intuitive and user-friendly designs.
Bottom Navigation Bar
As per Material Design standards, if there are 5 destinations in a Bottom App Bar, only the active one should display a text label. A new destination, ‘My Classes,’ has been added to show enrolled courses, and the notification screen is now accessed via the Top App Bar instead of the Bottom Navigation Bar.
No Internet Page
Version 1:
The text “Please check your internet connection” overlapped with the “Try Again” button, so spacing was added. The original circle with an exclamation mark symbol was unclear, so it was replaced with a more intuitive icon. Similarly, the “Try Again” button was redesigned with a recognizable refresh symbol, and spacing was adjusted for thumb reachability.
Final Version:
The Wi-Fi symbol and text saturation were reduced to avoid confusion about clickability. The “Try Again” button was elevated and bordered to clearly indicate its function as a refresh button.
Home Page
Version 1:
Color was added to the Top App bar for better heading visibility. An intro line welcomes users to the home page. Carousel dots indicate the horizontal swipe feature, and the featured section was made vertically swipeable with fewer cards. Category names like "Guitar courses" were replaced with broader categories to simplify navigation and reduce visual clutter.
Version 2:
The Top App bar title ‘Home’ is replaced with the brand logo and name. Notifications are now accessible from the Top App bar, and a new destination, ‘My Classes,’ has replaced ‘My Enrollments.’ The introductory line is removed to save space. A new ‘Categories’ section on the Home page helps users access root course categories, while subcategories remain to display more content for sales.
Final Version:
A new ‘Trial Courses’ row has been added, featuring free courses for new users to try, increasing engagement and app sales.
Explore Page
Version 1:
This screen features a persistent search bar with a microphone for voice search. Instead of a text list, an image list is used to simplify navigation, increase tap area, and help users identify items quickly.
Final Version:
The voice feature is removed and added to the Extra Feature Suggestion List. The placeholder text "Search" is also removed to improve field visibility.
'My Classes' Page
Version 1:
The frame, accessed from the Bottom Navigation Bar, allows users to view enrolled courses. The "Recent" section shows the last four accessed courses, while "My Courses" displays the user’s enrolled courses for easy access.
Version 2:
The list view in "My Courses" has been removed in version 1 to ensure the image in the container is clearly visible.
Final Version:
The "Recent" section is now horizontally scrollable to provide more space for the "My Courses" section, which is vertically scrollable for easier navigation and better memory retention.
Challenge 2
Challenge:
While working on the project, I faced a challenge as I found myself moving from UX design into product design by suggesting a "My Classes" page. This shift required thinking beyond user flows and focusing on the app's overall structure and functionality, which was new territory for me.
Solution:
To address this, I conducted user research and studied similar apps to understand user needs. Based on these insights, I designed the "My Classes" page to make it easier for users to find their enrolled courses. This experience helped me navigate the balance between UX and product design, improving the app’s usability while expanding my design skills.
Course Class Page
Version 1:
The blue line, initially mistaken for a loading bar, is now clearly separated from the Top App bar as a course completion indicator. Both navigation buttons are labeled for symmetry, and the comment icon was reverted to the original standard Android Studio vector asset for consistency.
Version 2:
The comment number text is lightened and its font changed to regular to reduce emphasis. The profile icon is now outlined to draw less attention, and its size is consistent for both comments and replies. Navigation buttons are symmetrical and positioned for optimal thumb reach with meaningful labels. A vertical threaded comment system and a keyboard-attached comment box are suggested for better comment management. The font family has been updated to Neue Helvetica for improved readability.
Final Version:
The course completion indicator has been removed to eliminate confusion with the progress bar.
Course Overview Page
Version 1:
The share icon has been removed from the Top App bar to provide more space for course titles. Language and category information are now included in the ‘Summary’ section. The gray background in the ‘Reviews’ section is replaced with white for symmetry, and text orientation is adjusted for better space utilization. The ‘Start’ button color is changed to highlight its significance.
Final Version:
The tab bar text is changed to sentence case for better legibility, with the selected tab receiving focus and others having reduced saturation. In the ‘Overview’ section, the card design is removed, and the background is made white to avoid confusion about clickable elements. The name ‘Summary’ is now ‘This course includes,’ and ‘Details’ is renamed to ‘Description,’ with ‘What you’ll learn’ added to highlight course benefits. The ‘Category’ and ‘Language’ sections are included in ‘Description.’ User reviews are aligned symmetrically, and the ‘Start’ button color remains unchanged to maintain consistency.
Impact
A/B Testing
We asked a few users of diverse age and background to first use the app again and then try the prototypes that we made ready. And this was their response:
The redesigns made the app more user-friendly, particularly for older users, and resulted in a 15% increase in user engagement, as seen in metrics like session duration and task completion rates. This project demonstrated the impact of addressing usability and accessibility challenges to create an inclusive and engaging user experience.
Learnings
Sometimes, we have to go an extra mile to solve user problems. Back your points with strong evidences.
