Lunchroom: Making of an App
When I began my Coursera specialization on Interaction Design, I didn’t think I’d be designing an app — let alone bringing it almost to the point of launch.
My concept revolves around something I find difficult in my own life: trying to connect with friends and co-workers for lunch. Typically, you just reach out to friends via email or turn to people sitting near you. But scheduling time for lunch is a huge hassle. It involves looking balancing calendars and lots of back and forth. I knew there had to be a better way!
Lunch 2.0: Initial Concepts
I began by focusing on people: the interaction between people would be the core of my app. I knew I wanted a clear list of users and to be able to tell, at a glance, whether they’re available.
What was missing from the initial concept was a clear call to action. What do you do from this point? It’s hard to tell.
When I created the first interactive paper prototype and tested it with Kim (my wife) it was clear right away where I’d gone wrong.
That initial phase of testing was helpful, and it provided insight into the best method of navigating my app.
Going Digital
Transitioning to a digital wireframing platform (Sketch) helped me visualize my app in a new way. Now that my paper prototypes validated the idea of the app, I could flush it out.
Creating the app in Sketch provided new challenges, mainly around how best to lay out the content and present the flow of inviting a friend to lunch.
I decided to embrace Google’s Material Design early in the process because it allowed me to focus more on the experience and less on the design. It also helped that the Material Design language was something already widely used and understood.
And in fact, a lot of the people that tested my app said they liked the simple, clean layout. It looks a lot like a contacts app, which is immediately understood by most people.
Following conventions helps
The next revision saw even more simplification — gone are the star and letter icons that proved to be unclear in earlier studies.
I also simplified the main screen and added a hover state to show when friends had been added to an invite … but the changes didn’t end there.
More user studies helped to refine the app further.
In the next round of revisions, thanks to feedback from other users in a remote study, I added:
- Visual cues that somebody has been invited (button and icon changes in the list)
- An overlay to the top of the screen to send the invite (it had previously been on the bottom)
- I also cleaned up the shadows of the buttons to help the visual balance of the screen
Putting it all together
I’m not sure if I’m going to launch this app (maybe!) … but if I was hesitant before, the launch video I made with the help of my coworkers Karly and Zac definitely didn’t dissuade me. While the app itself goes through more revisions, check out the sizzle reel:
