Peet’s Coffee & Tea wanted to expand its business by creating a website that would allow offices near its locations to place group orders for delivery or pickup.
Existing catering services that offer coffee don’t accommodate individual needs or preferences, and group office orders of food or drinks organized by individuals often lead to mix-ups due to poor communication.
Offices can use Peet’s Group Orders to organize group orders of coffee and tea that allow employees to personalize their own drinks.
Competitive analysis, information architecture, sketching, prototyping, usability testing
Pen, Marker, Paper, Post-Its, OmniGraffle, Axure RP
Discovery & Research
I analyzed the online ordering options provided by several coffee shops, restaurants, and food delivery services including Starbucks, FetchCoffee, Dunkin Donuts, Caribou Coffee, Panera, Jimmy John’s, Seamless, and Restaurants on the Run. Other than Starbucks, which was only testing small deliveries exclusively inside the Empire State Building, no coffee shop or restaurant provided a service for group ordering of individual drinks. This meant that there was an opportunity for Peet’s to capitalize on this untapped market.
Functionally, the Jimmy John’s group ordering system was the closest to matching the needs of Peet’s. However, analyzing the site’s user flows, site map, and features revealed an overly complex system that could be greatly simplified for Peet’s.
I used card sorting to organize Peet’s food and drink offerings into understandable categories for their menu. During the first round, I made the mistake of including nearly every option from the menu and also including drinks with special branded names like Javiva. In addition to taking a lot of time to set up, this led to a lot of confusion among participants as to how to best sort items.
In subsequent rounds, I significantly reduced the number of options and provided more general and easy to understand names, which allowed me to more easily determine a consensus for organization.
I was provided with three user personas that represented the target user types for whom I was designing. Charlotte was the primary persona and was used to design the group organizer flow. Justin and Ariana were used to design different aspects of the invitee user flow.
I created a storyboard to illustrate how Charlotte and her coworkers would use the Peet’s group ordering site. This allowed me to get a clearer understanding of what users needed from the site.
Narrowing Scope & Structure
I used my story maps to produce two simple user flows in OmniGraffle, one for the group organizer and one for invitees.
I created rough thumbnail sketches of a variety of possible layouts for all the pages in the user flows and then iterated on the best of these rough sketches, making larger sketches to work out all the details.
Combining the user flows and the results from card sorting, I created site maps for the group organizer and invitees.
Prototyping and Testing
With the main user flows mapped and sketched out, I created a clickable prototype of the site using Axure RP. I then conducted usability tests on the prototype with several users for both the organizer and invitee roles, which revealed a few key issues that I was able to resolve in later iterations of the prototype.
Originally, I included featured products on the organizer’s home page. However, this confused a few testers as to the purpose of the page, so I removed the products, which streamlined the flow.
Some testers were also confused and frustrated by the group ordering process itself because they could not tell how long it was going to take or where they were in the process. To resolve this, I added numbered steps to the top of each page, which indicated the user’s progress.
The group order status was initially designed to only show the status of invitees placing their individual orders, but testers pointed out that there were several pieces of information that they would need while waiting for the invitees to complete their order. These included contact info for the store preparing the order, the delivery address, the delivery date and time, and the time that orders must be submitted by in order to have the order delivered on time. I added this information in an order details section above the invitee orders.
One of the biggest lessons I learned during this was project was to keep card sorting simple. I gave too many options to participants in my first rounds of card sorting, which wasted time and led to a lot of confusion among participants. When I removed similar items and branded names, I obtained much better results.
Final Interactive Prototype
Click the image to open the prototype in a new tab.
Ready to make something great together?