• Home
  • UX/UI Case Study
  • Graphic Design
  • Contact Me
  • More
    • Home
    • UX/UI Case Study
    • Graphic Design
    • Contact Me
  • Home
  • UX/UI Case Study
  • Graphic Design
  • Contact Me
back to HMW question

Sketches & Wireframes

With my task flow in mind, I started sketching on my scrapbook to find possible solution. I looked at inspirations online where most of my target users are used to visiting. All my six participants mentioned they use Pinterest regularly and are comfortable with it.

My initial idea was to include onboarding screens to introduce the app to my target users. So I ended up focusing more on these screens and along with the navigation bar. I looked at online inspirations such as Dribbble and Pinterest to see different layouts and the placements of the icons.

When transforming my paper sketches to digital prototype I kept the onboarding process for my App. However, after a lot of thinking and discussions I’ve decided to opt out and go straight into users login as an existing user.

This is a Round 1 prototype using Figma, the design concept came from all of my sketches. I decided to incorporate different screens and ideas from my pen sketches to come up with the first digital prototype for my 1st round of usability testing. The mobile frame I chose is for iPhone11 Pro. Based on my findings, most of my participants were iPhone users.

Script for Usability testing

  I read this script to each participant before the usability testing. This gave them an understanding as to what's expected from them and to make them feel comfortable.

This is the test script that I prepared and

Tasks for the Usability testing

These are the tasks that were given to the six participants to follow. You'll see the results right below. This helped me to find out what could be iterated to make the task easy for the second round of testing. 

Usability Test Results

I took the feedback from the usability testing and made it into a prioritization chart. I'll take that and iterate for the second round of testing. 

Mood Check Page & Home Page

Activity Page & Live Video Page

Activity Page & Live Video Page

User Feedback on Mood Page: There are too many emoji’s that convey same message and also confused about the check-ins. User often associate check-ins as to booking an appointment.

Action taken: Took user’s advise and removed the check-ins. Also carefully selected only 6 emoji’s to express user’s mood.


User Feedback on Home Page: Over crowded with too many options. User felt overwhelmed with all the options and had hard time reading because the text was too small on the screen and on the Navigation bar.

Action taken: Took user’s advise and simplified the screen to make it less crowded and allowed lots of white space. I also removed the text from the navigation bar. Removed the search option from the top of the screen and integrated in the Nav bar. 

Activity Page & Live Video Page

Activity Page & Live Video Page

Activity Page & Live Video Page

User Feedback on Activity Page: User wanted to see more about the class rather than having the profile/filter/search option on the top. User also mentioned having camera/audio On/Off option to feel comfortable participating.

Action taken: Took user’s feedback and removed the information from the top of the screen and added text about the session instead. Made the screen bigger to allow the user to only concentrate on the activity. Also added the Video/Audio on and off option so user can feel encouraged to participate.


User Feedback on Live Video Page: Feedback from the users were to make the video screen bigger and only focus on that. They weren’t able to spot the heart on the screen. User wanted the option to make the video fullscreen.

Action taken: Made the screen bigger and removed the profile section. Increased the size of the heart and added the full screen feature to allow the user to video in full screen. 

This is a Round 2 prototype after first iteration. I'll be doing 2nd around of usability testing to create my final Mid-Fi wireframe before working on my Brand and injecting colours.

After going through the same usability testing process as the 1 round I've taken the feedback and iterated. This is what I've come up with for the final Mid-Fi wireframe. I'll then work on my brand and after I finalize my brand colours I'll start injecting colours and see what works and if I need to make any adjustment.

I wanted my Moodboard to give off the following vibes: modern, cheerful, exciting, comforting, encouraging and motivating. This app is inclusive to young and mostly first time moms. The purpose is to encourage them to stay happy and feel that they are not alone. That is why I included a lot of vibrant colours. Some users may be going through Baby blues or even possible postpartum depression. It’s very important that users stay motivated through fun and engaging colours. My two most favourite images are the one with bubbles and the ant community. I love how they come in different shapes and sizes and once they unite they become such strong community just like the users for my app.

From the extracted Moodboard colours I was able to finalize my brand colours based on the meaning behind each colours.

Click to view ui & branding

© 2021 Petit Cadeau

  • UX/UI Case Study
  • Graphic Design
  • Contact Me