Creative Mornings

On the Web CreativeMornings is a breakfast lecture series for the creative community. It started in New York in 2008 and is currently in 100+ cities all over the world. I had the privilege of helping start a chapter in Orlando in 2012 and served as host until early 2014.

Learning

In order to keep pace with chapter growth, CreativeMornings rebuilt its website in 2013. Building a "social network" like web application that allowed chapter hosts to connect with members and everyone to connect with CreativeMornings content better than ever before. Part of the overhaul was rebuilding the ticketing system that powers these free breakfast lectures. CreativeMornings stepped away from an Eventbrite managed system and into its own system built from scratch.

I had the honor of designing an iOS product to fit into this new ticketing process. Each CreativeMorning chapter host "check in" attendees as they grab an ice breaker name tag on their way to a coffee. Every event is ticketed, tickets are free, but space is always limited.

I designed this product drawing on lots of personal experience. I had been helping run checkin for the Orlando chapter since we started and used that experience to design the interaction.

Defining

The first interaction I started playing around with was sliding a table cell. Throughout iOS, this interaction is used for deleting, finding more content, revealing more actions. Its speed and gestural integrity made me excited to explore its potential for the "checkin" interaction.

I prototyped the slide with the .draggable object in Framer.js.

Checkin Slide

I knew stepping into designing this product it needed to be incredibly simple. I had a very small set of users to design for and a very well articulated need to design around. The login view was first. The application is only for CreativeMornings organizers so authentication is required. A simple message at the bottom of this view to inform any wanderers of the requirements for this app.

Prototyping

Login views are wonderful canvases for interaction design. There are so many small, tedious options it makes designing these views a lot of fun. We chose to implement a newly designed label pattern called "Float Label". We used the JVFloatLabeledTextField CocoaPod to create the interaction. Float label animates the transition of input placeholder text into input title or description.

Login Flow

I continued designing the checkin interaction around a couple really important decisions regarding ways to empower chapter organizers. Putting a name to a face is constantly a work of art among big gatherings. Organizers shouldn't have to work so hard. Making the avatar large and pairing in a cell directly with the name seemed like common sense, but is a pretty important decision. I also wanted to make the checkin process as frictionless as possible. In order to optimize connection to an individual, users actually swipe the cell of the attendee who is checking in. Once the cell reaches the right distance, the check mark locks and turns to the dark color with a navbar connected notification of the resulting checkin.

Checkin Flow

This is an interaction I prototyped with Framer.js. I used an undocumented objected called Draggable and shared a little snippet for the Framer editor in a Gist.

The two main questions I identified as being asked by checkin organizers - What time is it? How many people are here so far? Because Checkin only happens in a 30 minute window, organizers need to keep a tight track of time to keep the event moving along smoothly. By placing the Checkin notification under the status bar, we are reinforcing the opportunity for organizers to keep track of time. We also added a simple little line at the end of the notification giving context as to the whole of the event.

Search Flow

The search interaction is pretty straight forward. I anticipate this being the most commonly used method for sorting through the list of users. Upon tapping the "search" icon, the search bar slides down from the navigation bar and the keyboard slides up with the text cursor ready to accept input. Using a simple placeholder help message to remind users what search terms are accepted.

Results from search would live filter, in the example above, entering the letter E would filter out results that don't contain "E". Upon tapping into the results, the keyboard would slide down and the user could check in users based on the filtered results. The search bar would stay opened to remind the user they're looking at a modified view.

Here's a big picture look at how the views got organized in Sketch.

CM Views

The floating camera icon is for QR Checkin. We implemented a Cocoapod that worked really well. Users have QR code on their tickets for events and the Camera captures really well on paper and screen.

QR Reader View

Takeaways

Looking back on the process for designing this checkin app, I think some important things stick out. I’ve thought about this design process quite a bit since we stopped making the app and feel like I learned a couple important lessons.

Don’t get too attached to your first idea

I definitely did this looking back on the design. I got really into the minutiae of the cell swipe interaction and how it helped the organizer connect with the face of the attendee, I ended up missing something bigger. Instead of organizing and designing around the most fundamental and simple parts of how the interaction should be handled, I tried to optimize for something that isn’t really fundamental. I think ultimately I brought in some of my own bias to the design that didn’t need to be there.

Looking back, I would design this product around the camera view being the primary checkin interaction. I think it helps move the checkin interaction towards how it should be handled as opposed to how it had been handled.