Embedded Files
Project Overview
The Product:
CutieBoard ® is the first Charcuterie Board simulator game for iOS. It is designed to allow users to build their own charcuterie board designs & recipes by choosing images of different foods and placing them on a digital board.
CutieBoard ® targets users who are looking for a leisurely creative game, or looking to plan an actual charcuterie board for a party or event.
Project Duration: May 2021 to April 2021.
The Problem: Users want an easy way to visually plan a charcuterie board, and also like to relax and play low-pressure games that encourage creative expression.
The Goal: Design a mobile app that allows users to easily play with food images to create customized charcuterie boards.
My Role: UX designer designing a mobile & tablet app for CutieBoard ® from initial concept to delivery.
Responsibilities: Designing with empathy and without bias. Planning & conducting user research, interviews, & surveys. Synthesizing & diagramming interview & usability study data to form insights. Composing wireframes, building design systems, & creating prototypes via Figma & Adobe Xd. Iterating on designs & progressing user research.
Understanding the User
• User Research
• Pain Points
• Persona
• User Journey Map
User Research
Summary:
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was: working adults who want a leisurely low pressure game to play and unwind. This user group confirmed initial assumptions about CutieBoard ® customers, but research also revealed that playing a relaxing game was not the only factor driving users to look for a charcuterie simulator. Other user interests included using the simulator to plan for creating an actual charcuterie board for an event.
Pain Points
Time: Working adults seek leisure activities, and are often too busy to plan party food for events.
Accessibility: Platforms for leisure games are not equipped with many assistive technologies
IA: Text-heavy charcuterie planning blogs are often difficult to read and plan from
Persona
Persona: Mary
Persona: Mary
Problem Statement:
The user, Mary, is a married mother and sales manager that lives in a small suburb, who needs a way to simultaneously relax and feel creative, because she wants to share her creativity with her friends and family.
User Journey Map
Mary’s Journey:
Mapping Mary’s user journey revealed how she could potentially enjoy interacting with a charcuterie board simulator game and sharing it with her friends.
Starting the Design
• Sitemap
• Paper Wireframes
• Digital Wireframes
• Low-fi Prototype
• Usability Studies
Sitemap
Mapping the Design:
I made sure to consider the users journey when constructing the initial sitemap. My research suggested that most users would prefer to not have to flip around screens very much as they play the game and select foods, so I structured the site around that option.
Paper Wireframes
Planning the Design:
Taking the time to draft iterations of each screen of the site on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick action selection process to help users save time.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital Wireframes
Clarifying the Design:
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Most users wanted more board options.
Digital Wireframes
Enhancing the Design:
Adding toolbars to the screen lets the user explore lots of food options to use in their design, and also reload and save their design. Many users requested that the board be changed from the main screen, That change will be implemented in the next update.
Low-fi Prototype
Connecting the Design:
Using the completed set of
digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was moving between the login and main playboard, so the prototype could be utilized in a usability study.
View the CutieBoard ® low-fi prototype
Usability Study: Findings
Testing the Design:
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 Findings
Users want more food varieties
Users want to edit both the board and table
Users want to be able to save and reload the board
Round 2 Findings
The “clear board” option needs a confirmation
Users want to be able to save more than 1 board
Users want detailed instructions
Refining the Design
• Design System
• Mockups
• Hi-fi Prototype
• Accessibility
Design System
Creating the Design Assets:
The app’s design is inspired by café chalkboards, so I designed art assets and chose colors that leaned toward a “gourmet cafe” aesthetic.
A main sans-serif font was chosen for instructional text, I also included one script font for accents.
Mockups
Optimizing the Design:
Early designs only allowed users to move forward from the login screen. Useability studies revealed that users wanted more of a journey through the app, so I added options to explore more app details.
Mockups
Improving the Design:
The second usability studies revealed the users frustration with no ability to reload the entire board. To address this issue and streamline the designing flow, I added clear and load buttons to the static toolbar. I also added a prompt screen to confirm item deletion.
Hi-fi Prototype
Finalizing the Design:
The final high-fidelity prototype presented cleaner user flows for customizing a board and confirming saves. It also met user needs for editing their board type, as well as more customization options for choosing food items.
View the CutieBoard ®
Play Testing
Sharing the Design :
I created a YouTube channel for the app and uploaded a few videos to show examples of gameplay. I then posted those videos on Twitter & Reddit to collect more user feedback.
Accessibility Considerations
Ensured there was high contrast colors between screen elements to enhance screen readability for users with color vision issues
Used icons to help make navigation easier, and a chronological numbering system for step by step guidance through the instructions.
Used detailed imagery for food items to help all users
better understand the flow and allow them to better review custom designs.
Going Forward
• Takeaways
• Next Steps
Takeaways
Impact:
The App makes users feel like CutieBoard ® really thinks about how to meet their needs.
One quote from peer feedback:
“I spent far too much time getting my cheese board just right, but it was super relaxing.”
What I learned:
While designing the CutieBoard ® App, I learned that the first ideas for the app really are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs. I plan to continue testing the app and add features for users to save multiple versions of boards.
Next Steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine what features to add to the app, should the board styles expand to different cultural foods, like leaf platters and bento boxes?
Let's Connect!
I really appreciate your time reviewing my work on the CutieBoard ® app!
If you’d like to see more or get in touch, my contact information is below.
Thank You!
Page updated
Google Sites
Report abuse