Challenge Me Through Friendly Competitions

Mobile Design • Hackathon

The Brief

ChallengeMe was developed for the Lehigh Valley Collegiate Hackathon. The theme was "Code for College Success", with a focus on solving real problems faced by college students.

Early whiteboard brainstorming of problems faced by college students

We began by brainstorming common challenges faced by college students, focusing on our personal experiences and insights from peers. From this, we able to identify the main pain points and create a persona for our user story.

The User Story

Tyler, a 21-year-old computer science junior and part-time grader, is hardworking but struggles with maintaining motivation and accountability while juggling internship applications, finances, and academic responsibilities.

As shown in our slide deck presented to the judges, the main challenges Tyler faces are:

Designing The App

With the user story established, our next step was to focus on creating a user interface that would effectively support the app's core features and functionality. The design process began with interface sketching on a whiteboard, where we brainstormed and outlined the basic flow of the prototype.

In our design research, we found that existing habit and finance tracker apps, like Duolingo or a habit tracker from the app store lacked that key social motivation we intended to implement. They solely relied on the individual taking accountability for themselves, there was currently no app on the market that implemented peer motivation. We wanted to emphasize that friendly accountability in our app.

Example of Duolingo's and Mint's user interface

As the lead UX/UI Designer, I translated the whiteboard sketches into refined Figma prototypes, focusing on rapid prototyping, delivering each page incrementally, and enabling the development of the functional prototype without too much delay.

The following is an overview of how each page was planned out:

• The Home Page

  This needed to serve as the central hub for users to view their progress and challenges at a glance, yet still be minimalistic in its content. A weekly recap of the leaderboards was included for visually easier progress checking.

The Figma design of the home page, featuring the weekly leaderboard podium

• Challenges Page

  This was the core of the app, enabling users to create, manage, and interact with challenges. We focused on the user flow, prioritizing features that allowed users to manage their challenges and collaborate with friends. Visualizing progress was also important, so we refined the display of the challenge statistics over time, ultimately landing on a line graph that showcased performance trends.

The Figma design of the challenges page, from viewing to creating a challenge

• Profile Page

  The profile page was planned to provide users with a way to track their overall stats and manage settings. Profile statistics, such as longest challenges, streaks, and ranking placements were chosen to be displayed to encourage continued participation.

The Figma design of the profile page

Once all the designs were completed, I worked as a Co-Mobile Developer, implementing the UI using React Native and ensuring the design translated correctly into the final app.

Overview of the final figma designs of the app, from home screen to challenge statistics

Final Takeaway / End Results

ChallengeMe successfully addressed key pain points for college students, offering a gamified platform that boosts motivation and accountability. I learned the importance of rapid iteration in design and the workflow between designers and developers.

The user flow through screenshots of the functional mobile app

And winning Best Design at the Lehigh Valley Collegiate Hackathon highlighted the importance in our team's collaboration and communication under a tight 24-hour window.

The hackathon team — from left: Me, Tolga Daim, Sean Pandaleon. We got free projectors!

As we move forward, we look to expand ChallengeMe with personalized features and deeper integrations to further enhance the user experience, supporting greater interaction among students.

ChallengeMe's Devpost can be found here: ChallengeMe