Old Header
img
How public products were affected because of poor navigation
Newton School had developed five public products to cater to various needs, but they faced the issue of being largely undiscovered. The context revolves around the challenges users, both enrolled and not enrolled, encountered when arriving at Newton’s platform through Google search.
Lack of Visibility
The convoluted navigation system rendered the five public products largely undiscovered, impacting their visibility on the platform.Restricted Awareness
Users, upon arriving via Google search, were confined to the specific product they initially sought. This limitation hindered their awareness of the broader range of offerings designed to meet diverse needs.Missed Opportunities
The existing navigation structure restricted users from exploring additional products that could potentially address other educational requirements, thereby missing out on valuable opportunities.
Finding Partners within the Organisation
Up until now, all tasks were handled internally by the design team. It became crucial to garner support from stakeholders in the product and tech teams to bring this project to fruition.
When the design team presented them with data and user insights, they were convinced of the project’s value. However, a significant challenge surfaced — the project had yet to align with the organization’s business goals. At this point, I realized I had been solely focused on addressing user problems, overlooking the alignment with broader business objectives. Parv, the Project Manager at Newton School, brought this to my attention and assisted me in identifying the essential business goals that would pave the way for the successful implementation of this project.
Aligning the project with Business Goals
Newton School aims to capitalise on the untapped potential of its 30,000 monthly coding contest participants who are eager to upskill and seek mentorship. Despite their active participation, these users remain unaware of Newton’s comprehensive offerings, including AI Products, Paid Courses, and Free Courses.
Objectives
Enhanced Awareness
Increase awareness among the existing pool of 30,000 coding contest participants regarding Newton School’s extensive offerings, fostering a better understanding of available AI Products, Paid Courses, and Free Courses.Utilise Public Products as Acquisition Channels
Transform public products into effective acquisition channels to attract and engage users, encouraging them to explore additional offerings and services provided by Newton School.Revenue Growth
Anticipate a subsequent increase in revenue by leveraging the visibility and engagement generated through public products turned acquisition channels. This strategic approach aims to convert users into paying customers, thereby contributing to the overall financial success of Newton School.
Solution
With these insights into the problems, we started our research, analysing other competitors and continuously talking to the users.
Started the competitive benchmarking process to identify current gaps in Newton School’s user experience. Upon examining various competitors, I categorised them into the following segments:
Assessing the competitors
img
User Calling and Idea Testing
Over the course of a couple of months, I engaged with various users through calls to gain an understanding of their problems. Once I gathered concrete insights, I tested several ideas with the users and collected their feedback.
Research Insights
Three out of four platforms feature a two-level navigation system, comprising a primary top navigation and a secondary side navigation.
The top navigation includes globally relevant elements for switching between the courses, profile, gamification tokens, and Refer a Friend.
The left navigation primarily focuses on content within the courses.
The differentiation between L1 and L2 levels holds particular importance in Alma Better, Figma, and Jira, as it enhances content hierarchy recognition and intuitiveness.
Users encountered significant friction when attempting common tasks such as completing assignments or revising lectures.
Separating the Headers
Following the research, we determined to implement contextual headers. This involves distinct headers for different contexts, including:
Global navigation
Course-specific header
And a separate header for focused activities such as solving an assignment or watching a lecture.
Improvements in the Global Navigation
Introducing a UI element in the header, replacing the logo on the left. From which the users can switch between their enrolled courses and also find public products called “Switcher”
Putting the public products in the correct hierarchy in the header
Variants of Global Headers
img
Improvements in Course Header
On average, a paid user at Newton School typically enrols in three courses: one paid and two free courses. To facilitate seamless navigation and prevent unintentional exits from the course, I replaced the Newton School logo with the Switcher, allowing users to switch between courses at their discretion.
Course Header
img
The Switcher
This new element, inspired by Figma’s profile switcher, displays all the courses a user has registered for. It also provides an option to navigate to any public product from a course, enhancing user flexibility.
Course Switcher
img
Task Specific Headers
Vishwajeet led the design for task-specific headers, focusing on major user tasks such as solving assignments, contests, quizzes, and revising lectures.
During a user’s engagement in a task, the aim is to simplify their navigation within the solving flow and prevent any unintentional exits from the task.
Two variants were designed and implemented for these specific purposes.
IDE Header
img
Task Sidebar
img
Impact
The overall impact of this project is broadly divided into three parts:
Public Products
3x increase in visits on Today’s question
73% increase in visits to AI tryouts
Course Navigation
30% decrease in users exiting the course to the dashboard
Users solve twice as many questions in one session in EDGE as compared to other courses.
Growth & Revenue
By increasing the visibility of our public products, we successfully converted four non-paying users into enrolled users, generating a revenue of approximately 10 lakhs.
Learnings and Takeaways
While leading a design-centric project, gathering partners from the product and tech teams proved challenging. However, aligning more people toward the same goal significantly facilitated the task.
Redesigning the navigation for the entire product posed a unique challenge, considering a substantial user base already accustomed to the existing interface. Recognising the potential disruption, I learned to version my design changes (not covered in this case study) to ensure a seamless transition for users.
Given the project’s scale, comprehensive documentation was imperative, covering initial insights, research findings, feature scoping, and maintaining a release log. Although challenging, collaborating with peers enabled us to achieve this extensive documentation.
Our research and discussions revealed the clear and crucial need for these changes, as they had a significant impact on key metrics.
Closing Notes
Thank you for sticking around till the end. This project at Newton School ranks among the larger ones I’ve undertaken, and it has been a tremendous learning experience for me. I’ve grown in various aspects, from collaboration to execution.
It required approximately 9 months of effort to persuade stakeholders and successfully launch the project. Designing in a Series B startup, I discovered, requires a significant amount of alignment — about 30% was the actual design work, while the remaining 70% involved discussions with stakeholders, convincing the founders, and coordinating with other teams.
In the end, everyone, including myself, were happy to see a positive outcome, making a meaningful impact at Newton School, even if it’s just a small dent!
