Rootalky

Rootalky is an online language education platform that specializes in one-on-one lessons via Skype. I was initially brought on to redesign their website but during that process, several core brand issues came to the surface which led to a full-on rebranding and web app product design project.

February 2019 - May 2019
Branding 
Illustration, Logo design, Copy Writing, Motion Graphics, Sonic Branding 

Product Design 
Web App Logic, UX/UI Design
Rebranding
Brand Renaming & Logo Redesign
Originally Rootalky was called French Talk and when I began to redesign the French Talk logo, I was forced to consider what the name 'French Talk' actually meant. Did it really communicate what the brand was offering? I mean, sure, French was one of the languages they offered but, they also offered Arabic. I brought this issue up with Elsie, the founder of Rootalky, and also asked her if she was planning on adding more languages in the future. She told me she was planning on adding new languages to the mix, so I suggested a brand renaming to better communicate a multi-language education platform. She agreed. 

While we were figuring out the new name of the brand, I was working on some designs for a brand mascot. I wanted it to be cute and inviting, so I came up with a rabbit-kangaroo hybrid. These initial designs actually ended up informing the renaming process.

Together we brainstormed over several Slack messages with the new name Rootalky. 'Root' came from 'Roo' as in 'kangaroo'. Roo has a cute ring to it. And since talking is the primary way students are educated, the word 'talk' was a critical element. 'Roo' + 'talky' formed 'root'. The root of learning a language is simply by talking. Call it serendipity. Call it synchronicity. It just came together seemingly magically.
Website Redesign
The website redesign was really the core part of the rebranding, and it was where I really developed the new look-and-feel for Rootalky. One of the main reasons why Elsie hired me was because of my ability to illustrate and combine that within the UX/UI designs.

Look & Feel
Elsie really gravitated towards a light grass green while I gravitated towards a minimal, simple look. I didn't want to overpower the potential customer with an onslaught of divs and illustrations saturated with color, so I designated the light grass green to only the buttons and font underlines. The green is used as a visual anchor that attracts the eye because this is quite effective for a call-to-action button.

The illustrative style I chose was rather basic, simple, with a childish nature. This was done for two reasons:
1. 
To make animating the illustrations easier and faster under a tight budget and time frame.

2. 
To create a happy and relaxed vibe for the potential customer. Taking back the viewer to their childhood days would bring some good memories back subconsciously and set a nice tone for their experience.
Interactive Animation
The homepage hero animation I decided to be a three-part experience to Rootalky's learning/teaching process. As the user scrolls down, the hero animation scrolls to the right, revealing each part of the process: the student's greeting, the data stream flowing across the Earth, and the teacher's response.

I chose two techniques to animate the illustrations:
1.
Frame-by-frame, tradigital animation to animate the hand-drawn charcoal line illustrations. To quicken page load speeds, only certain parts of the illustrations were animated. The student and teacher are primarily still while their eyes, arms, and mouths are animated. 

2.
CSS translate() to animate the vertical/horizontal positions of the SVG shapes and PNG textures when a user moves their cursor across the screen. These animations occur in the sun, mound, Earth, table, and hair. On mobile devices, these types of animations would be pre-programmed.
Combining these two animation techniques creates a new, fresh experience that I honestly have never seen done before. Time-consuming? Yes. But rather novel and a bit groundbreaking. It was worth the hours in After Effects and Photoshop. Check it out below ↓​​​​​​​
Motion Graphics & Sonic Branding
I love motion graphics and music because they are alive. They travel and transform through the corridor of time alongside our own experience. This is why it is very important for me to incorporate it into every new project I take on now. It allows me to further enhance the brand experience in a fun and exciting way. It is another stage for the brand identity to shine. For Rootalky's course pages I was able to put together a short video explaining their offering.

Note on the raw footage​​​​​​​
I would've liked to be on location for the direction and filming of the original video in order to control the setting a bit better. Ideally, I wanted the narrator, Sleem, to be against a minimal backdrop. Unfortunately, he was recorded against a complex bookshelf and plaid couch pattern and the raw footage was rather dark. Each clip also had a different level of darkness so I had to normalize them with different color correction settings on each clip. 
For the intro and outro, I took the original vector logo of the Rootalky rabbit-roo mascot into After Effects and animated it drawing in as if by a magic invisible pen. I then took the animation into Ableton and designed some sound sequences that perfectly synchronized with it. Synchronizing sound and visual events is critical to creating a harmonious and deep experience. It seduces the viewer much better than if this synchronization is not present. Additionally, the nature of the sounds designed should match the nature of the visual/animated element. 
Animated Illustrations
Below are a few examples of the animated illustrations across the home page from desktop to mobile. 
Web App Design
ABOVE: Old 'Onboarding' UX flow in Figma
BELOW: Updated 'Onboarding' UX flow sketch
Application Logic
To determine the application logic, I first needed to understand my client Elsie's current needs and pain points. I learned that there were several core processes that she and her team were still managing manually that needed to be automated for Rootalky to become an efficient, respected, full-fledged language learning platform. 

The processes that needed to be automated were:
•  Student onboarding
•  Teacher selection
•  Lesson booking
•  Payment process
•  Transactional emails
•  Customer support via FAQ
Onboarding
The onboarding process is very valuable for the future teacher of the student because it provides them with critical information that they need to craft a custom course for that particular student. To make this experience fun for the student I decided to create a progress bar with milestones. Slightly gamifying this UX in this way coupled with the fun illustrations is aimed at making this fun for the end-user and get them to become a paying customer.
Booking
Booking is actually the last phase of the Onboarding process but because of it's complexity I decided to dedicate a section to it. Actually, the booking process also has the teacher selection process baked into it as you can see below. 

Below you can see a weekly calendar that shows only the selected teacher's available times. A little zig-zag indicator line shows a break in the teacher's availability letting a student know that they can't book a back-to-back 50-minute session across that line. 

A user can change the teacher at any time if their current teacher's schedule if not ideal or for any other reason.
Animation Directions for "Lessons booked" UI
Student Dashboard v1
I designed version 1 of the student dashboard to ease the student into the process by including some tutorial elements like chat text bubbles emanating from the teacher's profile pic and the Rootalky mascot. 
Account Settings
Dashboard v2 
This is the call-to-action version of the dashboard the student will see after they've taken their free orientation lesson. I chose to incorporate the Rootalky mascot on this screen to add a layer of fun in order to decrease the friction a student might experience in the purchase process. Sometimes potential customers just need a little push. 
Thank You Page​​​​​​​
This is what the customer sees after making their purchase through Stripe.
Dashboard v4
Course Calendar
The course calendar is the main UI element the student will see on their dashboard. It shows the time & date of their next lesson in large page title font as well as the rest of their lessons highlighted in the calendar. Lessons that were taken in the past are highlighted with a green checkmark. Lessons that were not attended by either teacher or student are marked with a red checkmark.

I designed 3 versions of the course calendar to fit a variety of user preferences: a box cell design, a rectangular cell design, and a horizontal timeline design.
Responsive Course Calendar
Show directly below is the rectangular cell calendar design and how it degrades into the mobile list mode design.
Box Cell Calendar Design
The reason why I created the rectangular design was that the box cell design was fairly tall and required the user to scroll down to access all of it. I recognized some users might prefer a more compact version. Regardless, we decided to keep the box cell design because it's familiar and allows the design to breathe more. 
Timeline Calendar Design
The timeline design is originally what I started off with. I ran with the Booking weekly calendar design and made a swipeable, scrollable and/or draggable version.
Donating
Every time a student takes a lesson, they earn a star. A star equals a percentage of the total cost of the course. After they take a lesson, they can donate one or more stars to the NGO or charity of their choice. 

I wanted to extend the rebranding into this page by creating an animated hopping star with the Rootalky mascot face on it to increase the whimsical magic factor. This is meant to encourage the student to donate after each lesson. 
Transactional Emails
Important events within the user's journey necessitate the need for a transactional email to be sent out to them such as:
•  Welcome
•  Email verification
•  Password reset verification
•  Purchase receipt
•  Customer support
•  Policy changes
•  End-of-course call-to-action 
Conclusion
For a project of this scope, there was much more work I could have shown, but there is only so much time and space. I will say that this was one of the more interesting projects because it allowed me to dip into all my skillsets and create an application and rebranding with a unified vibe and vision. I would have loved to take this even further, but time and budget would not allow for it. 
Back to Top