Responsive web app


How can we make it fun and easy for people to plan multi-location events?

I participated in a hackathon hosted by Facebook in November 2015. This was an open concept, 18 hour (6pm - noon) event for female students in the Seattle area. There were over 80 individuals competing in more than 20 teams. My team won 2nd place overall, with a special prize for best technical implementation!

I assembled a team of 3 back-end developers, and I handled all of the UX Design. This project allowed me to gain valuable experience working closely with developers to create a technical product. The developers were able to transform my design ideas into a working demo. Each of us approached the relationship with open communication and curiosity to learn, and we were able to mesh really well as a team.


We decided to build a multiple-location event tracking app - a mobile tool to facilitate chaotic real-time social events. Imagine you're planning a party with several different stops, but certain friends can only join in midway through the evening. This app would allow them to subscribe to the event and know exactly where the party is, without the need for a flurry of text messages. Our working title is Clowder, which is an obscure term for a "group or cluster of cats".


•   Role: UX Designer
•   Tools: Sketch, InVision, Photoshop, OmniGraffle, GitHub
•   Timeline: November 20-21, 2015 (less than 24 hours)



•   Alison: UX Designer
•   Ara: Developer
•   Julie: Developer
•   Morgan: Developer


Our team decided to work within the Kanban framework, a Lean project management and inventory control system, in order to keep us focused on our Minimum Viable Product. This allowed us to keep the number of potential features under control, and kept us on track even through sleep deprivation.


This was a challenging UX Design environment, since we were working through the night. Even so, I was able to gather enough data from potential users to gain insight into their goals and motivations, and use that to develop a Persona that would focus my design. Based on this User Research, I determined that the goal of our app would be to facilitate in-person social connections. It would let Anna spend less time on her device, and more time with her friends.



My research showed that users like Anna can easily get overwhelmed with text messages from every member of the group as they coordinate locations. Clowder makes it easy for Anna to share the status of an event and her group’s current location without wading through a river of SMS updates. Users subscribed to an event will instantly know where the group is, as well as what stops are coming up next in the group's outing, without the need for rigid start and end times for each location.

User Flow

I came up with a number of Scenarios and Use Cases for our app, from the point of view of event organizers or event guests. I turned one of these into a User Flow Diagram that served as a framework for what the devs on my team would be able to build within our short timeframe.



Given the abbreviated timeline of this hackathon, I chose a relatively simple User Flow for my Prototype, and chose to design only the mobile version of the app. The Prototype task flow shows Anna trying catch up with her friends as they change loctions during Christina's birthday celebration.


I grabbed a big pile of paper and sketched out variations of screen layouts, navigational systems, and UI elements. After looking at several options, my teammates and I decided that we liked the idea of using design elements that referenced subway maps. The sketched wireframes shown below are the early versions of what I ended up designing for the prototype.


While the devs on my team worked on the back-end (coding in Rails and PostgreSQL), I designed our web app Home screen. It went through some significant variations before I settled on a visual design that I was happy with. The bottom screen shows the responsive version that our team coded for the demo.



Using Sketch and InVision allowed me to rapidly move from paper and pencil sketches into an Interactive Prototype. After conducting Usability Tests with others at the hackathon, I was able to validate key parts of the design, and use use what I learned to add refinements to the design and interactive elements.



By the end of 18 hours, we had built an Interactive Prototype and a real working app that used Facebook APIs, OAuth2 authentication, and persistent database storage for event information. We built an early version of a product which impressed the hackathon organizers enough that we won 2nd place. It was a great experience to work side by side with developers in such a concentrated and intense setting, where iterations of the research / design / build cycle could be done so quickly.

This project gave me direct experience of working closely with developers to move beyond an Interactive Prototype into an actual working app. Our team communicated well, got along beautifully, and everyone contributed significantly to the final product. We worked all through the night, and by the end of the hackathon, we had created a working online version of the app. Users can log in to the app using their Facebook account credentials, then create an event that spans multiple locations. Events and event updates are stored in a database and can be viewed from any browser. We built a responsive design to enable use across any device.


Our next steps would be to continue to refine this product, build out more of the features, and conduct more Usability Testing in order to improve the design. Being part of a Facebook Women Student Hackathon was an empowering experience, and I'm grateful that I had the opportunity to take part in this.