Nothing says San Francisco like brunch.
In early 2016 I participated in General Assembly's first official one-day hacakthon, where teams chose from provided themes that included Health & Fitness and San Francisco. My team and I wanted to create an application that connected people around fitness and enjoying great food in San Francisco. At the end of the day, submissions were judged on functionality, creativity, usefulness, code quality, and theme fit.
My Role: UX Designer
Tools: Pencil, paper, Adobe Illustrator, Sketch, InVision, and the MEAN stack (MongoDB, Express.js, Angular.js, and Node.js)
Deliverables: Responsive web application and Adobe XD prototype
Timeline: Four hours! 😱
I partnered with two developers, a designer, and a product manager to design and build a responsive web application we called Run & Brunch. We presented our solution to the judges and the group and walked away with second place! 🎉
After the hackathon, I was eager to explore Adobe’s new Experience Design CC, so I further developed the Run & Brunch prototype as a native mobile iOS app. It was a great way to analyze the new software and further investigate the onboarding and interaction of our application.
View the Adobe XD prototype here.
Full-stack developer Jeremy Shefer was inspired to create this web application the day before the hackathon while riding the train. He was drawn to the challenge of building something that integrated both Google Maps and Yelp’s APIs. The team and I were excited to run with this challenge and fed off of his enthusiasm.
While Jeremy and data scientist Matt Bohan dove into researching API integration, the rest of us surveyed the competitive landscape for similar applications and websites that facilitated running, dining, or navigation in general.
UX researcher Cuchulain (Huli) Curry and I only had time to interview one participant about her running habits and experience coordinating weekend brunches. Using insights from this interview, we developed a rough persona to act as the guiding light in our design.
Our user research highlighted the fact that people either plan first around (A) the running route or (B) the destination restaurant. These two alternative paths formed the foundation of our task analysis.
With rough task flows illustrated, product manager Angela Hue, Huli Curry, and I conducted a quick design studio to investigate different ways to design the UI of the app's mobile interface. Jeremy and Matt worked on the main screen of the app while the rest of us focused on designing the onboarding and route creation experience. We decided to incorporate the organization and hierarchy of the sketches I created.
With a brand style guide developed, I built high-fidelity branded wireframes from my initial sketches in Sketch. I then passed the web UI to Jeremy to integrate into his coding and linked the mobile resolution screens in a prototype with InVision to include in our demo.
Sometime after we received second place with our web application Run & Brunch, I revisited the project to help me investigate Adobe Experience Design CC. To test the functionality of the new app, I designed and prototyped onboarding, run creation, and basic navigation in a native iOS interface. I produced a high-fidelity prototype that linked together 18 screens. Take a look!
View the Adobe XD prototype here.
PLEASE NOTE: This prototype was created strictly for the purposes of exploring Adobe Experience Design CC. It has not been tested for usability or functionality issues in any lower fidelity prior to visual design application and prototyping. Take design decisions with a grain of salt. Thank you!
This hackathon was a blast. As a natural introvert, it was fun to engage with other designers, developers, and product managers to solve difficult problems within time constraints. When the same empathy that UX designers have for their users is applied to their teammates, everyone benefits. Active listening, a “yes-and” attitude, and a sense of humor are keys to success.