Projects

About

Coco cosmetics is a 2D simulation Make-up game that incorporates colour theory.

Players would take on the role of Coco, a young girl who dreams of becoming the most well-known makeup artist in the world. As they move up the rungs of the makeup society's fame ladder, they will be able to access new makeup products and match styles and colors to customer requests.

This project offers a gaming-based approach to tackle a common issue faced in the beauty industry.

•

•

•

•

Since this assignment is to design a completely original digital solution. We decided to do it in the form of a game, once we had that set, we initiated brainstorming sessions and conducted research, guided by the following goals:

Research Goals

1. Identify the problem.
   
2. Identify the target user group.
   
3. Research existing games with similar concepts.
   

In an evolving world of beauty, users rarely find the opportunity to play around with makeup and learn the basics without avoiding the physical mess and wastage of costly beauty products. Young, blooming individuals who seek a journey in the beauty world may not have access to makeup products or a proper guide that tells them what products and colour combinations make a makeup look seem coherent.

Hence, we intend to design an engaging makeup game for children that effectively incorporates color theory principles, fostering both fun and educational experiences while catering to the unique preferences and learning needs of young users.

Using the insights gained from research, we created provisional personas to quickly identify Coco Cosmetics potential users. These personas helped set the criteria for our interview participants.

Student (Age 10-13)

Young Adult (Age 13-17)

Wants:

• Clear guidance on basic makeup techniques.
  
• A guided gaming experience illustrating correct and incorrect makeup choices.
  

Pains:

• Unrealistic makeup game with haphazard choices.
  

Wants:

• Understanding of basic color theory.
  
• An opportunity to experiment with makeup looks without acquiring additional products.
  

Pains:

• Inability to afford all the drugstore products used by favorite beauty influencers.
  

Upon understanding the target user group's needs and pain points, we conducted research on similar games to gather inspiration and insights on what works well in the gaming space. This ensures that our design decisions are user-centered and aligned with the needs of our target audience.

Monster High™ Beauty Salon

Sally's Salon - Beauty Secrets

Strengths:

• Offers diverse options to style and makeover characters.
• Includes various salon activities like hair styling, makeup, and fashion designing for immersive experiences

Weaknesses:

• May be perceived as too childish or simplistic for older teenagers (15-17).
  
• Lacks structured guidance on correct makeup application and choices.
  

Strengths:

• Character development through a storyline following Sally
  
• Intuitive user interface for makeup application.
  

Weaknesses:

• Potential for frustration or boredom for players who prefer more challenging or strategic gameplay experiences.
  

After analyzing the needs and challenges of our target user group and researching similar games for inspiration and insights, we developed our game concept.

Coco cosmetics is a 2D simulation Make-up game that incorporates colour theory. Players would take on the role of Coco, a young girl who dreams of becoming the most well-known makeup artist in the world. As they move up the rungs of the makeup society's fame ladder, they will be able to access new makeup products and match styles and colors to customer requests.

The three main feature of Coco Cosmestics is Colour Theory, Style Matching and Fame Progression.

Colour Theory

Players can choose from three colors for most makeup products, while for eyeshadow, they can mix primary colors to create desired shades that best suit the

customer's request.

Style Matching

To educate players on different makeup styles, the game incorporates style matching, allowing players to choose from three different eyebrow and eyeliner styles to complete the look.

Fame Progression

Upon completing levels, players earn stars, which in turn grant them access to more makeup materials and increase their fame.

Having our goals sorted out, we proceed to craft user task and user journey to explore how the user’s would be interacting with these features within the game. Such as accessing the colour theory page in the user guide while playing.

No

Yes

To further understand the overall journey the players would be taking throughout the game, we crafted a flowchart from start to finish.

After understanding the user interactions, we began designing screens for the main features of Coco Cosmetics by creating low-fidelity prototypes on Figma.

After completing the prototype, we initiated usability testing with 6 participants to observe how users interact with our design and pinpoint areas for improvement.

Method: In-Person

Participants: 6

Age: 10 -17 years old

Test Objectives:

• Evaluate if users can easily complete tasks.
  
• Observe the various paths users take to accomplish tasks.
  
• Identify areas for improvement to enhance the design's usability.
  

Tasks:

1. Go to the setting page.
   
2. Apply a red eyeshadow colour.
3. Go to a different page in the user guide.
   

Through usability testing, we collected feedback from participants through observations and post-test feedback. This helped us identify what worked well, what didn't, and improvements to incorporate into our next prototype.

What Worked:

• Gameplay was straight-forward and could be easily accessed through the main menu.
  
• Button placements for each function was intuitive and straightforward.
  
• Popup UI menus made sense and were positioned well.
  

What Didnt:

• No feedback was given after interacting with the makeup products.
  
• Absence of makeup remover for eyeshadow, resulting in permanent application for the customer, creating a disadvantage for the user if they accidentally select the wrong color.

Changes to be made/Recommendations:

• Introduce actual customer requests to motivate users to follow specific makeup looks.
• Expand the user guide or revamp the content page to clearly indicate different sections.
• Provide a skip option for cutscenes.
• Allow players to save their progress at any time or consider implementing an autosave feature to avoid starting from scratch.
  

Taking the feedback into account, we integrated the suggested changes into our low-fidelity prototype and introduced new screens to develop a mid-fidelity prototype on Figma.

After completing the prototype, we initiated usability testing with another 6 participants to observe how users interact with our design and pinpoint areas for improvement.

Method: In-Person

Participants: 6

Age: 10 -17 years old

Test Objectives:

• Evaluate if users can easily complete tasks.
  
• Observe the various paths users take to accomplish tasks.
  
• Identify areas for improvement to enhance the design's usability.
  

Tasks:

1. Create a new saved file.
   
2. Apply 2 makeup products on the customer.
3. Mix 2 eyeshadow colours.
   

Through usability testing, we collected feedback from participants through observations and post-test feedback. This helped us identify what worked well, what didn't, and improvements to incorporate into our next prototype.

What Worked:

• Customer request is clear and players are able to identify it at first glance when they start the game.
  
• It was clear to the players that there are different styles and colours for them to choose from.
• User guide is clear.
• Having the option to skip cutscenes.

What Didnt:

• There is no visual reference for the players when they select a style/colour.
  
• Having arrow buttons instead of scrollbar to scroll through the outfits in the customisation page.
• No guided tutorial.

Changes to be made/Recommendations:

• Allow players to purchase additional makeup products with different colors or styles to create more diverse looks for their customers.
  
• Implement a lock icon for inaccessible levels and differentiate them with a distinct color scheme.
  
• Make the settings page an overlay pop-up accessible during gameplay.
  
• Include an exit prompt to confirm if players want to leave the level.
  
• Replace arrow buttons with a scrollbar, enabling players to navigate left and right by dragging or swiping across the screen in the customisation page.
  
• Include visuals for selecting styles and mixing colors, providing a more intuitive and engaging experience for players when testing the prototypes.
  

Based on the feedback we received, we integrated the suggested changes into the prototype and incorporated our design and color scheme.

After making several changes to the design, we conducted our final usability testing by having testers complete all 6 tasks in the previous testings.

Method: In-Person

Participants: 6

Age: 10 -17 years old

Test Objectives:

• Evaluate if users can easily complete tasks.
  
• Observe the various paths users take to accomplish tasks.
  
• Identify areas for improvement to enhance the design's usability.
  

Tasks:

1. Create a new saved file.
   
2. Apply 2 makeup products on the customer.
3. Mix 2 eyeshadow colours.
4. Go to the setting page.
5. Apply a red eyeshadow colour.
6. Go to a different page in the user guide.
   

This final testing had a lot of positive feedbacks and only minor changes have to be made.

Changes to be made/Recommendations:

• Instead of showing how long the game has been played, change it to show when the file has been saved.
  
• Rename button to “create new game file.”
  
• Having the option for players to go back to level selection page or to the main menu page during gameplay.
  

After incoporating the revisions, here is a video of our final prototype.