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.
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.
.png/:/cr=t:0%25,l:0%25,w:100%25,h:100%25/rs=w:1240,h:620,cg:true)
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.
.png/:/cr=t:5.36%25,l:0%25,w:100%25,h:89.29%25/rs=w:1240,h:620,cg:true)
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.