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".

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.

Persona

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.

Sketches

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.

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.