CHIPOTLE'S RESPONSIVE ONLINE ORDERING (ROO)
WEB AND MOBILE LAYOUTS
Chipotle is an international brand that prides itself on its personality and purpose. Using humor and an irreverent voice, they are able to connect with customers in a lasting way that speaks to the commitment to fresh ingredients and sustainability, or what they call “Food with integrity.”
Working within Chipotle's messaging and branding strategy, I collaborated on and conceptualized web and mobile layouts. My primary project was designing ROO’s Bag experience, a platform that allowed a host to manage their entire parties orders in one elegant checkout user flow.
Mobile Order Flow: Checkout
The greatest challenge of this project was working within the parameters Chipotle set to offer a simple, but powerful multi-order structure. With that in mind, I worked to deliver a clear, well-designed, and easy-to-use platform allowing one customer to manage orders for upwards of 60 people.
Desktop Group Order: Checkout
PLANNING & APPROACH
Under the guidance of Design Director Andrew Afram and Lead Designer Jeff Tsang, I set out to understand the wants and needs of hosts and guests who will be the primary users of the ROO platform. By deploying the K.I.S.S System (Keep it simple stupid) and referring to Andrew’s comprehensive wireframes, an order flow began to take shape.
Mobile Group Order Guest: Bag
Desktop Group Order Guest: Bag
ROO’s Bag and Checkout experience hit a crossroads as we worked to design the order flows for a single guest while contending with the overwhelming order information of a host. The Group Guest Bag was a single column flow where one member of a party could order multiple meals. The meals summaries were organized into what we called “Zebra Stripe,” alternating sections of light and dark to visually show the different meals in a list. When designing the Group Host Bag experience or “Mega Bag” as I call it, we encountered issues of sensory overload when the host needed to manage their ownorders as well as the orders of a large group. We determined that a single column Zebra Striped flow was not going to cut it. I developed the idea of a bag that visually grew as the group got larger. As the groups order swelled to four or more confirmed orders, the bag would expand to two columns. The meal summaries were then shown in a tile system that could expand downwards to show additional order information and then collapse to save space and reduce visual clutter. We then implemented three tabs at the top of the bag, In Bag, Pending and Declined Guests, which gives the host an elegant way to keep track of who’s hungry and who’s dragging their feet.
Mobile Group Order Host: Launch, Bag, Checkout
Desktop Group Order Host: Launch, Bag, Checkout
This project was by far the most extensive process I have had in my design career. It took a lot of meticulous design planning and a lot of laughter to get it done. Thanks to a great team.
“I believe that great design takes time and wisdom, which is only possible if the entire team is in a position with an accompanying mindset to learn.” Product Designer, Simon Pan
Chipotle's Friend Or Faux
Designed and programmed complex interactive Flash and Rich Media advertising campaigns that helped to develop Chipotle’s interactive game “Friend or Faux.”