Johanna Hagenauer
UX/UI and Graphic Designer
Group 2.png

COOK'D

COOK'D - a lunch cooking app for colleagues

 

COOK'D - a lunch cooking app for colleagues

User Research, Information Architecture, Wireframing, Prototyping, Visual and Interaction Design

 
bigstock-colleagues-friends-lunch-dinne-133492502.jpg
 
 
 

COOK'D is a lunch planning app for colleagues, which I created as part of the Springboard UX Design Workshop. The idea arose from my own frustration of seeing our work kitchen being unused most days - despite the popularity of cooked team lunches.

 
 
 

The Challenge

At the time of the course I worked at a digital agency - old brick warehouse, basketball court AND a fully equipped kitchen. 

For me and a handful of other fellow foodies, the last feature was a gift from heaven. We would cook together and enjoy a freshly made team lunch along with uplifting chats and laughter.

However, as much as we loved the experience each time, we would only do so once in a while since the time-consuming back-and-forth involved in organizing these lunches seemed to outweigh the pleasure in the end. 

As a UX designer not willing to accept the rarity of cooked team lunches I asked myself:

 
 
 

“How can an app enable colleagues to cook lunch together, without loosing plenty of time and nerves over the organization?” 

 
 
 
Design Process.jpg
 
 

For this project I took on the role of User Researcher, UX and UI Designer. Here is a selection of the steps involved in the design process. A more detailed description as well as a the clickable prototype can be found here

 
 
 

Understand 

01. Competitor Analysis
02. Surveys & Interviews
03. User Personas & Empathy Mapping 

To get a better understanding of the essential features that would be required to meet basic user needs and to discover undeserved market opportunities I started the process with a Competitor Analysis, including an analysis along NN Group’s Heuristics as well as a study of the competition’s marketing strategy. 

I also conducted an Online Survey with 32 participants and User Interviews with five potential users to collect both quantitative and qualitative data.  Throughout this research it became very apparent that time would be the most critical factor for my colleagues. This meant that for the app to be valuable to users it would have to speed up both the organization of lunch (i.e. who, what and when) as well as the actual cooking & lunching process to guarantee that no valuable lunch time would be wasted. 

Based on the results of this research I was able to draft User Personas and Empathy Maps enabling me to better understand my target audience and guide my design decisions & priorities. 

 
Artboard 2.jpg
 

Define 

04. User Stories
+ MVP Definition 

Based on the data I collected in the User Research phase I defined and prioritized the essential features for the MVP of COOK'D and subsequently wrote user stories always keeping my personas in mind. 

 
user stories .png
 

Create 

05. Information Architecture
06. User Flows
07. Paper/Digital Wireframes & Prototypes

With the features of COOK'D defined it was time to bring a logical and intuitive order into what the app would eventually offer. To define this order I conducted a Card Sorting Exercise with three participants representing my defined personas. 

Based on the results of this exercise I drafted a Sitemap and a variety of different User Flows depicting the three most important use cases within the app. 

 
ia.jpg
 

Using pencil and paper and the created Information Architecture I sketched out every screen of each of the identified user flows and constructed a Paper Prototype, using a cut-out iPhone mock-up to simulate the use of an app.

I then conducted a usability session to ensure that the User Flows are intuitive, effective, error-tolerant, engaging and pleasant. I used the findings of the usability testing to design Digital Wireframes using a grid structure. 

 
sketches and paper prototype.jpg
wireframes.jpg
 

Test & Iterate

08. Visual Design
09. Final Usability Testing 

I created a Style Guide for COOK'D to inform every future visual design decision. With this at hand I created the screen designs for each of the user flows. 

I then went on to built an Interactive Prototype and conducted Usability Testing sessions with three user. After giving them the room to voice their observations about the app’s interface I asked them to complete certain tasks (each representing a user flow) while thinking out loud.

With this valuable feedback I was able to do my last round of iterations before delivering the final product. 

 
 
visual designs .jpg
 
 
COOK'D