Scope Of Work

2020
  • Rebrand
  • UX/UI Design
  • Custom Illustrations
Header image of Akily's homepage and welcome screen from their app

The Context

Akily is an early childhood development app designed to provide customized learning plans for children aged 11 and under. Akily’s learning tracks also create a healthy environment for parents to bond with their children.

Defining Problem Space

Akily has a robust and comprehensive mobile app that had seen an upward spike in downloads due to increased homeschooling, but the quality of the app’s visual design didn’t match the quality or appeal that their target users look for in a digital experience.

The Goals

This posed a problem for the founders who needed to rectify the disconnect between the visual design and the effectiveness of customized learning. It was time to elevate the user experience of the website and app to match the expectations of millennial parents and grow the brand's loyalty amongst children.
5 of Akily's app screens.

The Results

I am very proud of the new website and all of the illustrations I developed for the brand. Since its relaunch, Aliky has seen a steady increase in the average monthly site visitors. In July of 2020 there were 20 average monthly visitors. In May of 2022 the average monthly visitors is 600.

The app has a 4-star rating, up from 3.5, with users reporting clearer navigation and an almost immediate emotional connection to the content. Since the summer of 2020, user retention has gone up 68%.

Deliverables

  • New Visual Brand
  • Website UX
  • App UI
inspiration images that i used to guide the visual brand's direction. character-based, bold shapes, and primary colors.

Moodboards

Basic shapes and primary colors are a simple way to create a childlike environment with shapes like circles, squares, and triangles. Colors like red, blue, and yellow. My goal was to marry these basic shapes with modern sensibilities through texture, patterns, and welcoming characters.

Our collaborative process began with a few conversations which centered around goals, visual and emotional tone, and lots of research. I put together a series of presentation slides for the team and I was able to distill the common themes that the team gravitated towards. This included big’n’bold shapes, rough edges, and a character driven narrative.
  • Fun
  • Bright
  • Simple
  • Friendly
  • Modern
  • Professional
Akily's old website nest to the new website's wireframes.

Old Website & New Wireframes

As you can see, the old website was cluttered and wasn't engaging to visitors. All of the content was contained to this single landing page which confused and overwhelmed the user. The visuals were a mix of inconsistent stock photos and illustrations that somehow managed to also underwhelm the site's visitors.
screen shot of Akily's website as seen from the backend of squarespace.

New Website

I began with the redesign of the website because it is much more saturated with bold brand elements as opposed to the restraint I would need in the app’s design.

This meant by the time I moved into the app design, I had a lot of visual standards and asset choices. This also optimized the amount of time that potential new users would interact with the updated brand before, as the app would take much longer to update.

Navigating the website is now a clearer experience. The information is easily digested compared to it's previous single-page layout where the amount of information was overwhelming the site's visitors.
Most of the illustrations that were created and utilized for the website and app.

Illustration

Akily's illustrations are the cornerstone of the new visual brand. They appear in nearly every part of the website and heavily throughout the app.

All of the characters are made from a geometric shape that touches on basic shapes children commonly encounter when learning. This gave me a diverse set of "body" types to draw from and allowed me to avoid any potential problematic representations when directly representing real people.

My main objective was to make characters that were relatable but most importantly they needed to be joyous. Like, so much joy. To do this, I designed the characters to have a default wide smile and even wider eyes, which emote tons of excitement.
a row of stock icons with their redesigned versions below.

New Icons

These illustrations pushed the limits of the parameters I had made for characters. These icons needed to convey certain sensory metaphors but the characters up until now, hadn't had extremities, so the new challenge was to include these extra parts in a seamless way that didn't feel shoehorned or inconsistent.

Through all of the challenges, developing these icons was my favorite part of the re-brand and all in all, they went through 2-3 iterations before I had a clear set of standards to build off of.
Akily's old app

Akily's Old App

Like the website, the app lacked hierarchy which made the user experience dense and overwhelming. Much of the UI did not have enough contrast to pass accessibility standards and all of the icons were random stock images lacking consistency. Overall, the app was an MVP and felt like it.
a zoomed out image of all of the Akily App art boards

Cross Team Collaboration

During my time on this project I worked with the founder who is in another state and their engineer who is based in Bogotà, together we were able to ensure optimal functionality and a seamless delivery of assets.

Despite the time difference and a language barrier we all had an easy time exchanging information, asking each other great questions, and we were able to provide each other with effective guidance that was respective to our individual roles.
3 rows of app screens. first row are the welcome flow screens. second row are the forgot password screens. third row are the onboarding screens.

New App Look

Feedback concerning my design was primarily contained to the button and CTA styles. Tania preferred buttons and containers without a wavy line and wanted to see more depth in certain parts of the design. Together, Tania and I referenced the principles compiled in material design’s resources until we found the best and most accessible options.

I created an emotional connection through the characters that provided a much needed brightness to some the otherwise mundane screens.
different versions of an illustration and an app screen showing that i reverted to their simplified states.

Iterations

At every step of the process, I found that “less is more” and a simple approach would result in a positive reaction. For instance, in my second iteration of characters I added too much detail and they no longer resonated with the team. So I went back and refined my V1 of the illustrations which are the final versions we all know and love.

Lessons

I learned that everything doesn’t have to be wacky for the fun and playful to be effective. When I implemented the wavy line texture throughout the app, it was too much of a distraction and toning it down allowed the content and illustrations to take center stage. Ultimately, the content is the most important feature of this app.