[vc_row][vc_column][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


Creating an educational mobile app that is digestible and fun for the user. Lessons should be locked to make sure user will consume lessons at their own pace at the correct order.[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]



Used for projecting project timeline with Design Team


Used for remote communication and file sharing with Design Team


Used for creating and editing Client files.


Used for creating and editing scalable vector graphic files for logo.


Used for file sharing with Client and hand off folder for Web Developers.


Used for turning mid fidelity wireframes to high fidelity mock ups.


Used for high fidelity prototypes with hotspots.

[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


A educational mobile app that helps busy parents/anyone taking the role of parent to raise resilient kids at a young age based on science.

It shows a lesson plan that is to be followed in order to apply the effective activities. As each lessons are completed a progress bar will be shown. Additional features can be added, like a search bar that will help the parents navigate to a specific topic faster depending on the issue of the child at hand.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

Target audience are parents, late 20 – early 40 y/o, expecting or taking care of a child, both educated professionals working outside home, fluent in English, middle class or affluent, and phone savvy.

Keywords: resilient, kid-related, easy, fun, confidence and digestible lessons

[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


Our instructors gave us time to meet our groups and I was paired with 3 UX students (Luc, Tiffany, and Christine). The information about WhenThen Kids were given to us prior to meeting our clients.

[/vc_column_text][vc_single_image image=”96″ img_size=”large” add_caption=”yes” onclick=”custom_link” img_link_target=”_blank” css_animation=”fadeInUp” link=”http://whenthenkids.com” css=”.vc_custom_1495668786272{padding: 50px !important;}”][vc_column_text css_animation=”fadeInUp”]

We into the research mode and onto the web page/landing page. We found that they already had a logo set, colour scheme among others. And yes, we had our preconceived notions, we all wanted to know what the rational is with the UI and UX design.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”50″][ult_buttons btn_title=”Let’s Talk” btn_link=”url:http%3A%2F%2Fembernavarro.com%2Fcontact_me%2F|||” btn_title_color=”#ff3a3a” btn_bg_color=”” btn_bg_color_hover=”#ff3a3a” icon_size=”32″ btn_icon_pos=”ubtn-sep-icon-at-left” btn_border_style=”solid” btn_color_border=”#ff3a3a” btn_color_border_hover=”#ff3a3a” btn_border_size=”1″ btn_radius=”0″ btn_font_family=”font_family:Roboto|font_call:Roboto” btn_font_size=”desktop:15px;” btn_line_height=”desktop:15px;”][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


Finally, the day was here to meet the client. I was nervous but I busied myself in getting a room ready and getting my 20 second gut test ready.

Andrea Lemire, owner of WhenThen Kids, was introduced to us and we showed her to the Unicorn Room. After Andrea willingly and graciously gave the information we needed to move forward, the team discussed that WhenThen Kids is really a life changer. So we decided to do the best we can for the client to progress to the next stage of her mobile app.

[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


The lesson plan was massive and must be digested in a way that it’s fun and inviting as well for a parent. Andrea likened the mobile app to be Duolingo style, so that it could address that problem.

Another problem was time constraint. 3 weeks is not a lot of time to make a powerful education app ready for the busy life of a parent. Andrea assured us that she understood. I would love to have given everything but speed is not always synonymous to quality.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


My team dove in to creating the questions for the intended users of WhenThen Kids. We also included Andrea’s subscribers as well as other parents we knew who were tech savvy. In the end we ended up with 20–30 interviews that had to be sifted through.

[/vc_column_text][/vc_column][/vc_row][vc_row content_placement=”middle”][vc_column width=”1/2″][vc_single_image image=”112″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495668010237{padding-top: 30px !important;padding-right: 30px !important;padding-bottom: 30px !important;padding-left: 30px !important;}”][/vc_column][vc_column width=”1/2″][vc_single_image image=”113″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1499287745595{padding-top: 30px !important;padding-right: 30px !important;padding-bottom: 30px !important;padding-left: 30px !important;}”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css_animation=”fadeInUp”]We into the research mode and onto the web page/landing page. We found that they already had a logo set, color scheme among others. And yes, we had our preconceived notions, we all wanted to know what the rational is with the UI and UX design.[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


Most of the interview had a common issue, which was having confidence in reading what most parents write out there. Some are too scientific which results in long arduous research which no parent has time for. Some were too opinionated to the point where it was not applicable to each child the parents are rearing.[/vc_column_text][vc_empty_space height=”30″][/vc_column][vc_column][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/3″][vc_single_image image=”114″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495668701252{padding: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”118″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495668708379{padding: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”116″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495668714769{padding: 20px !important;}”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css_animation=”fadeInUp”]


We gathered that the colour the users leaned towards on was mainly on some shade of blue, green, yellow, red and pink. Andrea suggested to stick with the colour palette she had for now.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


Our users were mostly iphone users and would tend to buy a mobile app if it was worth it. Andrea agreed that iOS platform is an ideal starting point for her mobile app since lessons will be locked and will need to be purchased for further in depth lessons.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


The lessons that our users wanted to teach their children were also in a way massive. These lessons ranges from values, characteristics, behaviour, motor skills, health, to social skills. Our interviewees even wanted a part where they can learn about what their child is going through. This complements the lessons that WhenThen Kids would tackle, so therefore there is a market for the app.[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


Parents wanted it apps to be quick, easy, accessible, sensible, optimistic, short content, simple, interesting, meaningful, and above all else helpful/useful. These aligned to the problems stated above, which validated our initial choice to go for a rewards program and make it fun to entice them to learn more.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”60″][vc_column_text css_animation=”fadeInUp”]


After making sure that all the interviews are done, I created the Design Inception Sheet for WhenThen Kids. This is where I figure out the “WHY” of the mobile app of WhenThen Kids.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


From Andrea, the main “WHY” is CONFIDENCE. To have the parents teach their kids how to be resilient at an early age. Because in the hectic life of a techie parent there’s a lot of pressure in raising up a child who can stand up for themselves. With this pressure, they also have to balance their lives with work. I called this art direction “Step By Step” in order for the parent to be learn how to notice key moments where a child needs the special attention.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/3″][vc_column_text css_animation=”fadeInUp”]


1. Simplistic

The mood that it should connect back to the why is being simplistic. Because the lessons are massive, it helps the parents to just focus if there are not a lot of bells and whistles. Just think of the time you had to juggle listening to an audio book as well as watching news.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

2. Intriguing

There are lots of things that would take the modern parent’s time. In mobile apps now, Facebook is one of the most addictive things. So the mood must be personal so that the parents are willing to give their time and effort. Hence, the step by step lessons about early child resiliency will help them out.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”120″ img_size=”large” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496177669187{padding: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

 3. Calm

With any mood, raising up a child is anything but calm. So the app must help the parent be calm whenever they need to resolve an issue. Calm but not sleepy. There’s a fine line and in helping not to cross that fine line, being quick balances it out.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

 4. Feel-good Fun

Because intrigue and calm are together, I wanted the Feel-good Fun to be there as well. This will help the parent be more relaxed and focus. The more relaxed and focus the parent is then they are more confident to take on decisions that would other wise stress out other people.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

5. Kid-related

For parents to understand that this app helps them to raise their confidence to raise resilient kids, the app needs to feel kid-related. This means also to look kid-friendly.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]

6. Straight Forward

Because this is a parenting app, there will be times that parents need answers and no time to skim through all the lessons just to recall the topics. Being in a straight forward mood will help parents be more willing to engage with the app. Also, remembering there should not be a lot of bells and whistles because of their hectic lifestyle.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]



The colours should be more of the softer side, clean and colourful. Much like what a child is attracted to. This will give the kid-related, fun, and intriguing mood.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]


Like the colour, movement should also be clean. This will enhance the straight forward feeling of the what the app should be. Movement should also be playful to address the fun part.

[/vc_column_text][vc_column_text css_animation=”fadeInUp”]


Since the app lessons will be massive, it will let the parents relax if the shapes are repetitive. Where everything looks the same as how it would look like in another lesson. Simple geometric shapes should be used.[/vc_column_text][vc_column_text css_animation=”fadeInUp”]


Just like any room, the set up and placing of things should be smart. It should be logical and at the same time not cluttered. The feeling should be more informational and never forget to add a little fun.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

We also noticed that there’s a limitation of how fun the app should be, or how informative it should be. We didn’t want it to be too informative that it will bore away the parent from having a very wordy lesson.

[/vc_column_text][vc_empty_space height=”30″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] [/vc_column_text][vc_column_text css_animation=”fadeInUp”]


There were 2 different styles that I presented to Andrea to show confidence. This is based on the user and client interview to find a common ground that parents can relate with.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


The 1st moodboard exudes more of clean and calm. This expresses the moments that are slowed down in our memories. The colours are light and soft. These colours would entice to calm you down, like petals of cherry blossoms and the ocean.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”2/3″][vc_single_image image=”122″ img_size=”large” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495669890561{padding: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/3″][vc_column_text css_animation=”fadeInUp”]

Also, the colors are similar to what a baby’s skin would feel like. The idea is when a parent is calm and relaxed then they are more likely to be willing to be confident in raising their kids in a calm fashion.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


The 2nd moodboard has a similar goal, which is to give confidence to a parent. Having the popping colours would create excitement.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/3″][vc_column_text css_animation=”fadeInUp”]

The colours also are similar to products for kids. Bright colours and having it kid-related would convey that both parents and the mobile app will have the same goal — raising a kid right.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”123″ img_size=”large” alignment=”right” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495669998081{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

There’s also a learning element in the moodboard so that the colors will complement the feeling of excitement. Also added pictures of kids who are willing to learn in different ways, either by book, by example, or by play. This will then translate to parents having to do the same thing with the app.

Andrea went with the fun, playful, and engaging moodboard just not a fan with the muddy effect.

[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


The first imagining of her mobile app I created a style tile to see what the possibilities could be. Andrea also gave permission for me to tweak and play with the logo she already had.

[/vc_column_text][vc_single_image image=”124″ img_size=”large” alignment=”right” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495671937106{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;background-color: rgba(155,155,155,0.01) !important;*background-color: rgb(155,155,155) !important;}”][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


As for the colour palette, she advised me that if possible stick with the colours and if I needed more colour range I could just go brighter or darker within constraints of the colour palette.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


Client labeled as Yellow Inner Resilience. This colour could be the main colour for objects, like progress bars and such.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


Client labeled as Pink Relationships. This colour could be used to accent small icons to make it pop.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


Client labeled as Blue Habits. This colour could be used for letters instead of the harsh colour black.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


Client labeled as Turquoise life. This colour could be used for the accents, like water.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


The possible icons should not have anything sharp, because if it is kid-related then everything should be kid-safe. The colours of the icons I found also was a possible style of how the buttons and icons would be.

[/vc_column_text][vc_empty_space height=”30″][vc_single_image image=”223″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496191582301{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;background-color: rgba(155,155,155,0.01) !important;*background-color: rgb(155,155,155) !important;}”][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

For the textures, I looked for something of the water-like effect to reimagine calm. And since the logo is a whale it would also mix in nicely.

The possible icons should not have anything sharp, because if it is kid-related then everything should be kid-safe. The colors of the icons I found also was a possible style of how the buttons and icons would be.

The main font that I was going for is Arial Rounded MT because it’s faster to load web fonts than fancy decorative fonts.

[/vc_column_text][vc_empty_space height=”70″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text] [/vc_column_text][vc_column_text css_animation=”fadeInUp”]


I started to research deeper and started to play around with the original logo and word mark.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_single_image image=”222″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496181711591{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”125″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1496191650918{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;background-color: #ffffff !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

There are lots of modern takes of what the whale could be designed as. Some variety the whale could be square-ish, likened to sperm whale. Others are like the famous great humpback whale. Either a realistic feel or an iconic feel.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_single_image image=”127″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495672279019{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”128″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495672292619{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

Using the negative space, I tried to put the cafe right inside the adult whale. Played with the mouth of the whales, where the calf’s smile is also the adults smile. Meaning that when the kid is happy, the parent is happy and visa versa.

[/vc_column_text][vc_single_image image=”126″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495671701163{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_column_text css_animation=”fadeInUp”]

There’s also a sketch where the calf is on top of the adult where the splash is. Considering the splash and the eyes being the same thin, I created the calf’s small splash becomes the adults smiley eyes. And the same splash would be on the same spot on top as where the calf’s splash would be. This is get the repetitive feel but also could look clean and desirable for a logo.

[/vc_column_text][vc_empty_space height=”30″][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

Tweaking The Logo

Based on Andrea, the logo was created with a friend. They have both tried several reiterations of the whale.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”129″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495751816441{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/4″][vc_single_image image=”131″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495672804363{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_single_image image=”130″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495672810180{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text css_animation=”fadeInUp”]For the first try, I tried to put down the glasses and made it more like the reading glasses that adults usually have. But this made the whale look more grandpa/ma-ish where that was not our target market. Also, it defined too much of the “bald spot”. So the big frames stayed on.

The rational to put lashes on was a bit of a struggle since there were parents who are male. But with the combination of a kid and an adult male, this society does not really accept that, not unless the whale has hands to give more context of the gesture or motive it has for the calf. So the lashes had to stay on to give it a more feminine and acceptable look.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]Andrea also told me that they had tried lots of times to move the calf around. It was logical to put the calf there because it would be lost in the body of the adult whale. That’s why I tried the calf on top of the adult in my earlier sketches.[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Finally, the tail had to go up. Considering that our mobile app will be in iOS, I had to remember that the icons are small. So to make the logo bigger I made the tail go up.

[/vc_column_text][vc_empty_space height=”30″][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”134″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495674185477{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

Redesigning The Wordmark

WhenThen is a word play from the world of Dr. Suss and it stuck with Andrea.

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”125″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495672104810{margin: 20px !important;padding: 10px !important;background-color: #ffffff !important;}”][vc_single_image image=”135″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495673782176{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_single_image image=”136″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495673876284{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

I tried to explore the different color palette on the word and making the letters bigger since on mobile, everything will look smaller. People also had a hard time remembering the name of the brand.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

To address the confusion of which came first “when” or “then”, I added the underline to make sure that the 2 words are different.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

I also played with the splash and where it would come out. So with the logo it would actually merge.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


My instructors challenged me in finding a display font that would say fun because having just having 1 type of font is not strong enough.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Main font is GoodDog Plain, Regular. This font is created by Fonthead Design, 2008, free for commercial use, hand drawn, and contemporary.

The font is created to be bouncy, curly and rounded for the Heading 1. This particular reasoning follows on the characteristics of a baby.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”137″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495674479721{margin-top: 20px !important;margin-right: 20px !important;margin-bottom: 20px !important;margin-left: 20px !important;padding-top: 10px !important;padding-right: 10px !important;padding-bottom: 10px !important;padding-left: 10px !important;background-color: #ffffff !important;}”][vc_single_image image=”138″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495674527876{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”140″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495674600710{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_single_image image=”139″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495674609789{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Secondary font is Arial Rounded MT Bold, Regular for Heading 2. This font is created by Robin Nicholas, 1993, free for commercial use, straight forward but not intrusive.

This font is created to be rounded, welcoming, and familiar for the Heading 2. Just like a kid, they are very inviting and very interested in everything.

Notice that the round edges of the Arial looks just like the kid’s fingers.

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Last font is Arial Rounded MT Regular, just the same as above but not heavy.

This font is for the sentences and paragraphs, because it is still welcoming , familiar, and not intrusive. This font is just a grown up version of Heading 2, meaning it will be easier to read as well.

This is used to remind people that the app is kid-related which makes it friendly and enticing for parents who wants to learn heavy lessons.

[/vc_column_text][vc_empty_space height=”30″][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”142″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495683945683{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_single_image image=”141″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495683955468{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

Also, web fonts are easier to load and developers will not have a heavy file for fonts. This means that the mobile app WhenThen Kids will have a faster loading time as compared to custom non-web fonts which takes up the loading time. This must be considered since the mobile app will have videos and audios added to the lessons in the future content.

More info on Web Fonts: https://www.psd2html.com/blog/non-web-fonts.html

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]


In searching for the right icons, I had to remember not to have sharp edges. The idea behind this is because just like the fonts, the icons have to be kid related as well.

[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”2/3″][vc_single_image image=”147″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495747870591{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”148″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495747179450{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css_animation=”fadeInUp”]So as a parent you want your kids to be safe when touching things, so when you want to click on an icon it should not be sharp.[/vc_column_text][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/3″][vc_single_image image=”149″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495748003142{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”151″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495748025828{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/6″][vc_single_image image=”150″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495748042991{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_column_text css_animation=”fadeInUp”]

Found lots of icons that were rounded and not sharp and conveyed the right affordance (possibility of an action of the icon presented to user).

As shown on the sample buttons above, the edges are just like the roundedness of the fonts used except for the medals (as shown below). The medals progressively change from a simple shape to a much complex drawing as you unlock more lessons. This creates an intriguing incentive for the user.

[/vc_column_text][vc_row_inner][vc_column_inner width=”2/3″][vc_single_image image=”154″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495748744431{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”153″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495748580701{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner content_placement=”middle”][vc_column_inner width=”1/2″][vc_single_image image=”156″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495752208108{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text css_animation=”fadeInUp”]

For the WhenThen Kids mobile icon, I used shadows but only 1px/1px because iOS design dictates that all buttons should only have minimal shadowing or non at all.

Also, I decided to limit the size of the icons 40px/40px because the final visual size of this icon is usually 48 x 48 pixels.

Note that iPhone OS trims 1 pixel from each side of your artwork and adds a drop shadow. So, I have leave extra room around the icon.

More info on iOS Human Interface Guidelines: https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Program Structure

After creating the final icons and typography, I decided to create a visual representation of how the lessons are broken down into. This is for future developers to understand how massive and deep the lessons are in.

[/vc_column_text][vc_single_image image=”157″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495748915614{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_column_text css_animation=”fadeInUp”]

The color coding also was labelled by previous Red Academy cohorts and we wanted to follow that structure as well.

[/vc_column_text][/vc_column][/vc_row][vc_row content_placement=”middle” css_animation=”fadeInUp”][vc_column width=”1/4″][vc_single_image image=”158″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495749089933{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column][vc_column width=”3/4″][vc_column_text css_animation=”fadeInUp”]

Also noted, that some of the colors from the palette were hard to work with because black over dark blue was hard to read. So some of the colors will be used as font colors to answer this particular problem.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Progress Bars

Where there was structure, there was also chaotic structure. This is when we had to decide as a group how to show the users progress when they finished a lesson.[/vc_column_text][/vc_column][/vc_row][vc_row content_placement=”middle” css_animation=”fadeInUp”][vc_column width=”1/4″][vc_single_image image=”159″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495749260495{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column][vc_column width=”3/4″][vc_column_text css_animation=”fadeInUp”]

As you can see below, there were lots of ways we showed the progress. We all decided that a simple and concise approach was good for the user so they do not get confused of how the progress really works.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text css_animation=”fadeInUp”]

Also, if we make it too tedious and long the user might get frustrated and not use the app altogether. This also prompted us to consider the quick search or a menu area where the categories are listed down as well as the lessons that fall under them.

[/vc_column_text][vc_empty_space height=”30″][/vc_column][/vc_row][vc_row content_placement=”middle” css_animation=”fadeInUp”][vc_column width=”1/3″][vc_single_image image=”162″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495749751309{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column][vc_column width=”1/3″][vc_single_image image=”161″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495749760393{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column][vc_column width=”1/3″][vc_single_image image=”160″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495749770221{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

Daily goals were also considered for the user. They could set a reminder and a goal for them to do if they are really busy. I interpreted them as waves that would fill up the screen (as seen below).

[/vc_column_text][vc_empty_space height=”30″][/vc_column][/vc_row][vc_row content_placement=”middle” css_animation=”fadeInUp”][vc_column width=”1/3″][vc_single_image image=”165″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495749906135{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column][vc_column width=”1/3″][vc_single_image image=”163″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495749918135{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column][vc_column width=”1/3″][vc_single_image image=”164″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495749926615{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

This wave style background can also be used on the loading pages.

[/vc_column_text][vc_empty_space height=”30″][/vc_column][/vc_row][vc_row content_placement=”middle” css_animation=”fadeInUp”][vc_column width=”1/3″][vc_single_image image=”167″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495750045631{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column][vc_column width=”1/3″][vc_single_image image=”168″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495750059959{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column][vc_column width=”1/3″][vc_single_image image=”166″ img_size=”medium” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495750073647{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

The onboarding screen would also had the little facts while the user waits for the program to load. The idea is to already introduce to them what the WhenThen Kids mobile app is really all about — to help parents to be confident in raising resilient kids.

[/vc_column_text][vc_empty_space height=”50″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][/vc_column][vc_column_text] [/vc_column_text][vc_column_text css_animation=”fadeInUp”]


Finally the moment I had been waiting for, the big reveal of how everything would work along with my design.

Me and my team went back and forth to test and redo some of the minor features.

There was “the great progress bar craze” where we had lots of styles progress bars and didn’t know how to narrow it down. But with guidance from the instructors and democratic way of dealing with problems we finally had the final product.

Prototype Link: https://invis.io/4UAJDM4AF

[/vc_column_text][vc_single_image image=”173″ img_size=”large” alignment=”center” onclick=”link_image” css_animation=”fadeInUp” css=”.vc_custom_1495751122877{padding-top: 20px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;}”][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


There were actually lots of features we wanted to add but we remembered the goal to make an MVP (minimum viable product). In the end, Andrea was pleased that we had lots of features that she might add in the future.

As for me and my team, we were proud to produce a mobile app so short of a time. This mobile app, for me, is and will be a life changer whether i am a user or a designer for it.

To Andrea, I hope that you will get to develop the mobile soon so lots of parents or people taking the role of the parent will be confident in raising resilient kids under their care. I do believe in your vision and i pray the news of your lessons going mobile will create more awareness in people.

[/vc_column_text][vc_empty_space height=”70″][vc_column_text css_animation=”fadeInUp”]


For the next project make sure to save version of my files, always label accordingly based on the teams style, remember the why and the art direction of the mobile app, do not cling to ideas because it will always change, always have a backup plan, and most of all always be creatively meaningful no matter what direction any decision making goes.

[/vc_column_text][vc_empty_space height=”50″][vc_column_text css_animation=”fadeInUp”]


Thank you to my peers and instructors for helping me in this journey of self-discovery and how to challenge myself to design a mobile app with a solid rational behind it. Thank you also to Andrea for letting me play with her baby, may your mobile app change more lives at it grows steadily.

[/vc_column_text][vc_empty_space height=”30″][vc_column_text css_animation=”fadeInUp”]

[/vc_column_text][vc_empty_space height=”100″][vc_row][/vc_row][/vc_row][vc_row][vc_column][/vc_column][vc_column_text]

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.


I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.


I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.