Chomp
The Challenge
To design a mobile app for workers whose job is inherently mobile (dog walkers, gardeners, etc.)—my team chose caterers.
Goals
The app must withstand considerable scrutiny with regards to financial viability, usability, and desirability.
Impact
This grad school project was a great learning experience.
My role
User research, interaction design, business strategy
Timeline
Six weeks
Chomp is a mobile service and interface created for Basic Interaction Design, a course in Carnegie Mellon's School of Design. The assignment was to create a financially viable, desirable, usable service for mobile workers such as dog-walkers or gardeners. My two partners and I chose to design for caterers, and ended up reinventing the idea of catering as a totally new service.
Normally I like to use After Effects for animations like this; this one was made using Keynote.
Developing this app from initial concept down to the screen animations really helped me understand what I like most about mobile interaction design. My two partners and I worked closely on the initial concept, user research, strategy, visual design, interactions, and presentation. The areas I was most passionate about were strategy and the fundamental interactions: that is to say, translating the research into a concrete design, and working on making the texture and motion of the interactions semantic to the user's action. (See below for a fuller description.)
We chose to focus on caterers, but after doing research interviews with professionals, we decided to reinvent the idea of catering completely. Chomp became a marketplace and social network service that allows casual home cooks and talented amateur chefs to sell their creations to hungry people.
Understanding what information to show and when were our main visual challenges. Because our concept is rather unusual, we sought to give users a familiar display with hard facts they can trust, such as the price and location of the food events. I focused on designing for interactions that made sense in the context of the app, with actions that semantically represented the content being displayed. For instance, the event detail page is navigated using cards that are reminiscent of menu cards or recipe cards. Instead of creating a long, text-heavy page with lots of vertical scrolling, we divided up the information into these cards.
Some early wireframes
The three of us discussed the minutiae of the information display and interaction patterns.
An early wireframe at left, and the final visuals at right.
At first, we tried several glamorous, swooshy animated transitions to take the user from the map to the event detail screen, but they didn't express the meaning of what was happening any better than just a simple straight cut. I argued that the motions of the interactions must match the meaning of what is happening.
It seemed like the cards should be stacked with the first card on top (see below). However, that created an awkward experience where the below cards' titles were obscured:
So, the cards appear as a stack near the bottom of the screen, and the user can pull one up and down, the way one would pull a recipe card out of a box. I drew inspiration from a demonstration I saw of mobile interactions by Microsoft which showed the navigation of basic apps like contacts and calendar, with animations that reflect the information architecture. I feel that a formal connection between user action and the software’s display of information is important for helping to reinforce the information architecture, even for frequent users who are already familiar with the app.
