HangTime Web App Case Study
Skills Utilized: User Research, UX Design, Front-End Web Development, User Testing
(Let the images finish loading before reading. It might take a while.)
This is the story of how we won P10,000 prototyping HangTime in a hackathon, spent the next 10 months trying (but failing) to finish coding HangTime, then finally releasing our first feature (Designer) 11 months later, which amassed 2400+ users within a week.
Some Context
HangTime is a web platform built to help students compare schedules with friends and schedule meetings easily. I came up with the idea with my co-founder, Mike, during the Ateneo BlueHacks Hackathon we joined last February 2016.
The hackathon’s theme was to create a web or mobile app specifically for students. So Mike and I, together with our teammate Raymart, thought of a bunch of pain points we experienced as students.
The Problem
One thing we all hated was how hard it was to know our friends’ schedules and how to compare schedules with them. The only website that could do this well was When2Meet, which everyone in our college was using at that time. But it was horrible to use. You had to fill up your schedule every time you wanted to compare with a new group of friends, and the website’s design was dated too.
The Solution
We then thought of a platform that allows you to log in and input your class schedule once, find and add your friends, and check and compare their schedules anytime through a matrix. These features would make our platform easier to use and more functional than When2Meet. I suggested the name HangTime, and it stuck.
I sketched out the basic pages we’d need to make a demo for the hackathon — a landing page, a page to input your schedule, a page to find your friends, and a page to compare schedules. Mike, who’s a full-stack developer, used these and went on to code our prototype using HTML, CSS, Javascript, and Firebase.
Validating Our Idea
While he was coding, I researched to find other ways students would share schedules. The ones I found were an app called ClassUp, Google Calendar, Google Sheets, and sharing the schedules manually (by each person sending screenshots).
Aside from this research, I wanted to find out what students were really using to remember their friends’ schedules. I also wanted to validate if they’d use an app like HangTime. So I sent out a survey to other students to validate our problem and our idea while Mike was coding.
I put together 10+ questions in a Google Form, and we posted the link on a bunch of student groups to get respondents. Within that day, we were able to get 66 respondents.
Research Results
The results validated our assumptions:
- 76% of respondents said they had a hard time remembering their friends’ schedules.
- 55% of respondents said that they just remember their friends’ schedules mentally, while 52% used screenshots on their phone to remember.
- The respondents had an average of 1.71 orgs that needed to meet regularly.
- 94% of respondents said they’d use our app based on the features we told them it would have.
Mike insisted on coding the entire web app himself, so I was left to oversee the UX design of the web app and make the slide deck for the hackathon. I created a persona as our main target user, and it’s been the same persona we’ve used ever since.
Pitching Time
The next day, after 24 hours of working, it was finally time to pitch and present our demo. Mike had finished the entire prototype by himself, and I led in pitching and presenting the demo. We ended up winning second place! We were euphoric about winning and getting 10k in cash.
The Aftermath
After the hackathon, Mike and I were still keen on actually building out and launching HangTime. We resumed work on HangTime come June, right before summer classes. But we both became busy again.
Finally, come October, we decided to dedicate more time to HangTime. We recruited Myles, a 4th year student and web developer, to join us in coding the web app.
The Plan: HangTime’s First Version
Our plan was to release the first version of HangTime by the first week of January. Releasing then would let people use HangTime in time for enlistment in Ateneo and in other universities, and students would want to compare schedules with friends and their orgmates right after.
My Role: Designing the UI and UX
I mapped out all the pages we’d need for HangTime’s first version using Photoshop CC. I designed mockups for 9 out of 12 pages, while Myles did the other 3. Myles and Mike then used these to code HangTime, and we reached about 60% completion right before Christmas break.
We resumed work on the first week of January. Myles was still abroad, so it was just Mike and I. Knowing we only had days left before the start of enlistment in my school on Jan. 9, I suggested to Mike a new plan. I wanted us to launch a special version of HangTime that we could release in time for enlistment.
The New Plan: Designer by HangTime
I pitched this idea to Mike about creating an automatic-schedule-creator called Designer. Students could use Designer to input their schedule, quickly pick a template and design it, and post it online right after.
This would appeal to the hundreds of students who were used to making and designing their class schedule right after enlistment. They did this so that they could find breakmates and classmates, but Designer would let them make a schedule in just minutes. Moreover, releasing this feature would let us store the users’ schedules, so once we release the full version of HangTime, they wouldn’t need to enter their schedules anymore.
Mike agreed with my plan, and we spent the next few days going to my condo unit to work on Designer.
My Role
Aside from mapping out the user flow, I also coded the landing page and led the beta testing of the app. Mike was able to handle coding the web app on his own, from front-end to back-end. He did an amazing job at it.
Testing The App
Come Jan. 11, Mike and I finally finished the whole web app, from the landing page to the 10+ sliders Mike put to let the user customize his/her design. To find bugs on our platform and check for usability issues, I set up a Facebook group to let selected friends beta test the platform and give us feedback on it. We also guerrilla tested the website on 2 of my roommates in-person. Through this, we found and fixed a lot of bugs and UX issues before our launch.
Our Viral Launch
Finally, at 11:00 am on Jan. 12, we launched HangTime using our Facebook page. I posted the link to the website on a number of student groups, and the response was incredible. In the Facebook group Ateneo Trade, my post racked up 1,000+ likes in less than a day.
We also started to see people posting their schedules made using Designer on Facebook and Twitter. People even started tweeting how awesome Designer was — random people we didn’t know.
Within a week, we decided to look at some of the analytics we gathered, and we were blown away. We got 2,400+ users, had 13,000+ classes entered through Designer, and had viewers from 33 countries.
In Conclusion
Designer by HangTime was definitely a success in our book, and we continued it by launching the full version of HangTime, including the features to compare class schedules. We gained a lot of popularity locally, and HangTime now has over 9,000 users.
However, due to our personal commitments, and the lack of a revenue stream, we’ve decided to stop working on HangTime for now. Users currently can’t use the site since we also stopped maintaining the website around late 2019. We learned a lot from this experience though, and we’re still very proud of what we’ve made.
