Role

Team Lead, Concept Artist, Prototyper

Category

iOS App

Approach

Goal-Directed Design

Duration

4 months

Tools

FigJam, Figma, Adobe Illustrator​

For my Interaction Design class, I led a team of five to create Baker’s Quest-- the gamified baking app. As team leader, I guided us through the Goal-Directed Design (GDD) process by keeping my team organized, developing their schedules and deadlines, and making myself available to answer any questions they had along the way. 

At the beginning of 2023, everyone in our class pitched an idea for a mobile app. As an avid gamer with a culinary background, I decided to pitch an app that combines my interests in a unique way. My idea was to create an app that encourages people to learn how to bake with gamification elements such as character customization and level progression. After all the pitches, we all voted on whose project we would most want to work on. With several students excited about the potential of my project, the Baker’s Quest app was born.  

Research Report

Prototype File

DESIGN FILE

Meet Our Team

---

Sydney Bishop

Team Leader

Amina King

Team Member

Laura Muller

Team Member

Kaila Nesbitt

Team Member

Sarah Pearson

Team Member

Our Process

Our team utilized the Goal-Directed Design (GDD) process to develop our app. GDD is a methodology for design that focuses on user goals at every stage in the design process (Cooper et al, 11). We began the GDD process with a strong foundation of research to ensure our final product helps the user appropriately achieve their goals. Guided by our research, we created hypothetical representations of our users to define their behaviors and goals more accurately. Modeling our research this way gave us a better understanding of what to prioritize when defining the user, business, and technology requirements for the app. Once we had this framework, we were able to develop the app’s prototype and conduct user testing. Iterating on the design with feedback from our users, we refined and improved our prototype to conclude the GDD process.  ​

Goal Directed Design Framework

Research

Research is essential for GDD; the design team must obtain a thorough understanding of their users, the product’s constraints, and the stakeholder’s goals. Following GDD, we structured our research in the following way: 
​

1. Kickoff meeting— we completed a kickoff meeting worksheet to establish the basis of our app idea. 
2. Literature Review— we reviewed literature to gain insights into our app’s domain. 
3. Competitive Audit— we reviewed competitor apps to gain insights into our app’s domain. 
4. Stakeholder Interviews— we simulated stakeholder interviews to set guidelines for our app expectations. 
5. User Interviews-- we conducted user research interviews to identify primary user behavior patterns.  

---

1.) Kickoff Meeting

The purpose of a kickoff meeting is to develop an understanding of the product in addition to stakeholder perceptions of the product, its users, and any potential design problems. Insights gained during the kickoff meetings are essential for structuring the stakeholder and user interviews later in the design process. Our app was developed as a class project, so it is important to note that there were no real stakeholders or clients involved.  

​To simulate a kickoff meeting, our team was tasked to complete a kickoff meeting worksheet via FigJam, an online whiteboarding platform. Using this worksheet as a guide, we took on the role of stakeholders to develop our main problem statement. The following is the outcome of our simulated kickoff meeting: 

• The current state of recipe apps, specifically baking apps, focus primarily on instruction without providing any incentives or rewards for accomplishing goals. 
• What existing recipe apps fail to address is engaging their users with gamified challenges and guided learning practices. 
• Our mobile app will address this gap by incorporating player achievements and customization. ​

---

2.) Literature Review

To become more informed about our product domain, the design team researched literature pertaining to baking, gamification, and learning. Our research led us to some important takeaways. First, we found that people mainly bake for stress relief, creative expression, and connecting with others. Next, we discovered that gamified systems should emphasize player engagement, motivation, and rewards. Finally, our research into learning styles suggested we consider all styles (visual, auditory, kinesthetic) to develop effective learning materials.  ​

---

3.) Competitor Audits

The design team needed a sense of who our competitors were before we began a simulation of stakeholder interviews. Competitor audits are an essential step in the GDD research phase, as the process familiarizes the team with the strengths and limitations of what is currently available to users (Cooper at al, 28). Due to the unique concept of our app, we discovered that no direct competitors currently exist in the mobile app market. We instead put our focus on apps that successfully incorporate gamification to enhance user engagement, such as DuoLingo and Habitica. We also considered cooking apps such as Perfect Bake to understand how to effectively present recipe content to our users. Finally, we investigated a popular cooking-themed video game known as Cooking Mama to figure out how they successfully incorporated cooking with gaming.  ​

---

4.) Stakeholder Interviews

As mentioned in the Kickoff Meeting section, the design team completed a virtual kickoff meeting worksheet in lieu of stakeholder interviews. Typically, stakeholder interviews provide the design team with an opportunity to ask stakeholders questions about their initial ideas, visions for the product, budget, schedule, and other constraints. During our virtual meeting, the design team roleplayed as the stakeholders to imagine their hypothetical goals, desires, and concerns. As a result, the following assumptions were made: 

• Stakeholders believe our product will be used by people looking to educate themselves and/or enrich their lives 
• The primary userbase will be creative types interested in artistic expression 
• The primary userbase will be drawn toward a colorful and creative aesthetic 
• Stakeholders are concerned that users may feel frustrated with gamification elements and prefer immediate access to recipes 

---

5.) User Interviews

Following the principles of GDD, the design team completed a persona hypothesis to identify candidates for user research interviews. To develop this persona hypothesis, we considered our potential users' behaviors and goals to understand how our product could satisfy their potential needs. As a result, we identified a single primary persona- the intermediate baker who wants to improve their baking skills.
  
Our next step in GDD was to conduct user research interviews in order to verify or complicate the assumptions we made in the kickoff meeting worksheet. The scope for this project was relatively small, so our team was tasked with completing only five interviews. Despite our small sample size, we made a point to interview candidates with a wide range of baking experience levels. The interviews were conducted in-person and virtually and averaged 45 minutes in length. Questions asked during the interview were focused on the candidate's experiences with baking, gaming, and learning something new. We followed GDD guidelines by asking open-ended questions to encourage unbiased and personal responses.  ​

User Research Interview #1

User Research Interview #2

​After conducting interviews, we arranged the data we collected into affinity maps of baking habits, gaming habits, learning habits, and lifestyle habits. We used these affinity maps to identify patterns in behavior and goals among our participants. The patterns we identified during this phase of GDD helped us establish the basis of our primary persona, which is described in the next section. 

Affinity Map #1

Affinity Map #2

Modeling

To develop a descriptive model of our primary userbase, the design team utilized the key behavior patterns uncovered during the affinity mapping process. This user model is referred to as a persona. In GDD, personas are essential, because they provide designers with a focal point for considering how users might behave, think, what they want to achieve and why. Thus, developing a persona gave us a better understanding of our user’s behaviors and goals within specific contexts. 

In consideration of the persona hypothesis developed during our research, we established a single, primary persona as the main target of our design. Meet Rose Sharpe. Rose represents the most common and highest priority goals and needs of our userbase. 
​

Our Primary Persona, Rose

Rose's Persona Narrative

View our complete research report here

Requirements

Taking what we learned from our research, user interviews, and our primary persona’s expectations, the design team created a context scenario. Context scenarios are the ideal narrative description of a persona using the product to achieve their goals. In GDD, context scenarios are iteratively refined in order to establish the user, business, and technical requirements of the design. Our team collaborated in multiple sessions to understand how to meet user expectations and prioritize the information and features in the app. Basing our discussions off our affinity maps and primary persona helped us establish persona expectations and design requirements for our prototype. 
​​

Rose's Context Scenario

Design Requirements List

Framework

After establishing our primary persona, identifying their goals and developing their context scenario, the design team needed to ensure our product met user expectations.  This led us to create key path and validation scenarios for the app, which are common and uncommon paths that a user can take while navigating the app.  Understanding the flow of the app and its sequence of pages was an essential step to ensuring all goals and associated tasks could be completed by the user.  

To visualize our key path and validation scenarios, we began with low-fidelity wireframe prototyping on a whiteboard. As team leader, I sketched different ideas for the layout of each page in response to feedback from my team. We modeled the page layout following iOS conventions for bottom navigation bars and discussed the elements to be included in the navigation bar relative to our key path and validation scenarios. Our research indicated that our primary userbase prefers logical, sequential, and easy-to-follow instructions, so we broke our recipe pages up into simple steps to reflect those findings. We also discussed the reward system for completing a recipe to incorporate gamification into the app. Finally, I sketched original designs for our app content, including our mascot, customizable player character, and customization items. The following are examples of our low-fidelity wireframes and concept art: 
​

Low-Fi Wireframes #1

Low-Fi Wireframes #2

Low-Fi Wireframes #3

Concept Art

​Using our low-fidelity wireframes as a guide, we moved onto develop a medium-fidelity prototype in FigJam. We also transitioned the concept art sketches to Adobe Illustrator to develop the final designs. Both the medium-fidelity prototype and Illustrator designs can be seen below: 
​

Medium Fidelity Wireframes

Finalized Character Art

With our medium-fidelity prototype established, the design team transitioned to Figma to create the high-fidelity edition. Throughout this process, we regularly met together via voice conferences and in-person meetings to discuss design changes, ensuring the design was still cohesive and accurately meeting our primary user’s goals. The resulting prototype spanned roughly 70 frames, including 20+ unique overlays, all of which were fully designed and linked between one another. The following images show some example frames from this prototype as well as the organizational hierarchy of the Figma file: 
​

Character Creation

Step-by-Step Recipe

Main Menu

Character Progression

Onboarding

Baker's Guild Community Forum

Baker's Quest Full Prototype

Refinement

With our high-fidelity prototype completed, the design team moved on to user testing. However, due to the constraints of the class setting, we only performed two usability tests. We asked our participants to click through the prototype while completing a series of tasks, such as finding the profile page and customizing their avatar. Thorough testing of every feature within the app allowed us to gather quantitative and qualitative data. For example, we took note of situations when participants struggled with completing their tasks as well as any comments about their overall impression of the app.  
​
Ultimately, the feedback we received was mainly focused on cosmetics and organization of content. We refined our prototype in the following ways:

•  We increased the size of our navigation buttons  to make them more easily clickable.
• We altered the pagination on the recipe steps to omit the introduction and ingredients page to ensure that the pagination buttons correspond with the appropriate step in the recipe. To compensate for this change, we added an additional button on the recipe pages to access the ingredients from any step in the recipe.
• Finally, we added visual cues for progress made by the user, such as graying-out previously completed or locked content.

​We adjusted our prototype immediately to reflect this feedback and the results can be viewed in our final product.  ​

The Final Product

At the end of the semester, we demonstrated our prototype’s final design in front of the class. We received overwhelmingly positive feedback from our classmates, which gave us confidence that we managed to create a worthwhile product. I would like to thank Amina, Laura, Kaila and Sarah for giving it their all to make this project a reality.  
​
My experience leading this project has established an excellent foundation for me to pursue future projects. Moving forward, I hope to be more thorough in the documentation of my research materials. This project suffers from a lack of high-quality images to represent our design process and collaborative efforts in the early stages of our research. This project has taught me that detailed and well-organized documentation is critical to implementing an effective design.  ​

Click the image to view the full prototype!