How my team went from zero to code in 24 hours
Background
Hackathons can be tough — especially going from zero product definition to a functioning prototype. Here is the process my team took.
Team
- 1 Developer
- 1 Designer
- 1 design intern
Design materials
- Lucidchart for brainstorming
- Google map API
- Ant design system for react components (chosen because of its fairly extensive documentation and its relatively non-branded look)
- Sketch for designing
- Plant app for syncing between designers
- Zeplin and Codesandbox for communicating between design/dev
We started off running with a streamlined design and dev process focused on creating a functioning MVP.
1. Understand boundaries and constraints
Things we knew:
- We had 24 hours of design and dev time
- We wanted to use Google Map API
- We wanted to experiment with React
2. Decide on goal
Our developer had the idea of an app to share interesting road trips with others. We decided on the goal of helping car enthusiasts enjoy the ride by sharing road trips and destinations.
3. Ideation — 1 hr
Identify ideas and constraints
We started with a quick brainstorm and:
- decided on the problem we wanted to solve
- came up with blue-sky ideas for addressing it
- identified what features we had access to in Google Map API
- identified what is doable in 24 hours
- identified a proto-persona to focus our efforts
4. User scenarios — 1 hr
Based on the features and constraints from our previous brainstorm, we created several user journeys. Based on the timeline we had to develop the product, we chose the user journey that was most feasible, even if meant we let go of features.
5. Wireframes and hi-fidelity UI — 6 hrs
The designers created paper wireframes and drew out the user journey we had selected. We then created hi-fidelity UI using the Ant design system sketch components.
6. Code — 16ish hrs
Because we had created designs based on UI components, design/dev handoff was fast and seamless. Designers could also jump in and code up screens with the help of Ant’s codesandbox.
Final Solution
Onboarding screens
Users get introduced to the app and identify their interests before seeing a feed of interesting road trips tailored to their interests.
Create a story
Users document their road trip step-by-step, documenting the destinations, the stops they made, the fun activities they did, and their mode of transport (which is especially interesting to our user base of classic car enthusiasts). For future iterations when we could build a native app, we wanted users to also have the ability to easily take pictures and document during a trip.
See and share your road trip!
Users can see their past road trips, as well as share them with friends. They can also share the road trips in a public feed if they want to help other users on the platform learn about interesting road trips.
See demo video
Takeaways
React component-driven development is FAST and FUN
Coming from sprint-driven, heavy documentation world, I really enjoyed the the near friction-less syncing between design and dev due to a robust UI library and designers being able to communicate with code snippets.
Identifying features and constraints early speeded up process
Because we had identified what was capable within 24 hours and created a minimum viable experience within that constraint, we were able to move extremely quickly to create a product with design and dev in sync throughout.
Senior + Junior designer collaboration rocks
Our design intern provided interesting and fresh ideas, researched design libraries, and provided art direction, while I as the more senior designer could coach her through component-based design, working with devs, and other nitty-gritty parts of the design process.
Summary
Overall, the hackathon was a very interesting and educational experience. Our team won Overall Best-in-show out of 16 teams, and amazing classic car Hawaiian T-shirts!
