Problem Statement

The problem statement involves the development of a platform for Nothing Technologies, India that enables them to conduct student outreach programs for selected schools across the country.

To achieve this, the following features were expected to be included in the platform:

• A detailed landing page that explains the program
• A registration section where students from selected schools can sign up their teams
• A login and signup screen for the teams to access their account
• A team overview screen to display a list of completed and pending tasks, along with the team's total points so far
• A leaderboard screen to showcase the top-scoring teams.

The challenge was to create a visually appealing and user-friendly frontend while adhering to Nothing's brand guidelines. Additionally, the platform needed to capture user data efficiently and accurately through a multi-step form. The success of the project depended on the ability to deliver these features within a tight deadline.

What I did

• As the sole developer responsible for the frontend of the web application, I managed the entire process from ideation to execution. Throughout the development process, I collaborated with the backend team to ensure seamless integration between the frontend and backend. Additionally, I worked closely with stakeholders to gather feedback and ensure their satisfaction with the final product.

Challenges Faced

• Nothing uses an unconventional brand alignment and has strict guidelines for website development elements. I overcame these challenges by mostly using vanilla CSS and JavaScript, which ensured page performance and snappiness.
• The product required a multi-step form to capture data from the user incrementally. To accomplish this, I had to ideate an ideal data structure, handle form context, and manage UI interactions and states, all within a very short deadline. (Spoiler alert: I figured it out 😉)

Showcase

Landing Screen

Registration Screen w/ Multi-step Form

Team Overview Screen