Case Study: Magic-languages.com

Responsive website re-design

Magic Languages teaches French, Mandarin and Spanish to children up to the the age of 12. They came to RED Academy for a redesign of their website to help them grow their business.

Deliverables
user research, competitive analysis, persona development, user flow, user experience journey, wireframes, hi-fidelity user interface and clickable prototype

My Role
UX/UI Designer on a team of 4

Getting started

After meeting with Magic Languages our initial challenge was to research current and potential users and look into the competition. While only a small number of interview candidates were available, we were able to gain insights into the pain points with the existing website and a general ideal of who the users were. With that knowledge we took a deeper dive into current and potential users through social media channels.

What we found

Personas

Although a service for 0–12 year olds it was important to keep in mind that it is parents who are completing the registration process and trusting their child’s learning to Magic Languages. Research found that the primary user is someone like Sandra. Sandra is a stay-at-home mom who is looking to ensure her child has the best. She lives in an affluent area of Toronto and while her day typically revolves around her children she doesn’t hesitate to make time for personal activities like like yoga and social nights out. From travel to technology she likes to keep up with the trends.

Pain Points

Navigation
The original site had a vertical navigation bar with drop downs. The end result is that drop downs cover other menu items. Additionally, the login for parents to access resources is hidden under navigation items.

Navigation was difficult and login was obscured

Registration
Registration was a complicated process due to having a different form for each type of class and location. Just finding the right registration link was a challenge for users and a common comment in interviews was that it was easier to just call Magic Languages that it was to complete the online registration.

Trust
It was revealed through interviews that trust is a highly important consideration when registering children for a program and competitor analysis showed that Magic Languages lagged in providing this as testimonials were long and very text heavy. Users identified that testimonials without dates or photos were not reassuring.

Look and feel

The nursery driven feel of the Magic Languages site was focused on babies and no longer represented the full scope of programs for children up to the age of 12. Additionally, the nursery feel did not appeal to mothers choosing lessons for their children as it was in stark contrast to the upscale shopping sites they are familiar with.

Developing the Solution

Brainstorming and Planning

We began by developing an updated user flow with the goal of having users complete the registration process.

The whiteboard allowed for quick iteration as we worked toward a final user flow

We then took to the whiteboard to solve the pain points through features and wireframes.

With a mobile first approach multiple wireframe options were discussed before moving the Sketch

Wireframe and testing

From here we moved to digital wireframes in sketch and did a clickable prototype for testing. It was identified that registration needed additional attention to make it more streamlined and that the initial thought of an MVP offering of single child registration was invalid. Because Magic Languages offers semi-private classes any registration option had to be able to handle the details for at least two children.

Registration was a stumbling block during testing and was revisited to prioritize the student information and guide parent’s through choices.

Throughout this process we paid significant attention to content, pulling the important pieces together in a way that would stand out, instead of being buried under large blocks of text content.

The Solution

Navigation was moved to be across the top of the page. Using a card sort, key menu items were identified and a clear call to action was created in bot the top nav and the splash image.

Improved Navigation

Registration was reworked to be a single form that allows users to make decisions as they go; choosing class type, location and adding additional children. Options appears in sections to guide the registrant through.

Getting started with registration

Founder and teacher bios were added along with a page explaining the Magic Languages story to increase the trust factor and the blog, which was formerly only available through social media was added to the website to improve SEO. Overall content was broken into small digestible chunks and icons were used to highlight details without distracting the user from their primary goal.

The Magic Formula in icon format

The visual look was updated to pull in the original teal colour with a deep Malibu blue as a base. A dark coral colour was used to provide contrast and act as a registration call to action throughout the site. The font was updated to raleway to provide a clean look without being rigid.

The increased contrast and depth of colour, along with changing the font from the original comic sans, elevated the site to feel like a boutique shopping experience.

The wise owl was created to provide a visual link to education and learning while being child appropriate but not creating a nursery feel.

Summary

As a small business looking to grow, it is time for Magic Languages to update their website. The target user is an upscale mom and while they are shopping for their children the site needs to reflect their typical shopping experience. This means being easy to navigate and register with a checkout process that is familiar in experience.

By streamlining the content and calling attention to certain items, updating the font and colour pallet and organization of the content, addressing the navigation set-up and creating a single registration form the site now fits the expectations of the user while allowing Magic Languages to expand their business.

The site is currently being built by the RED Academy web development class. Clickable prototypes can be viewed here:
https://invis.io/EK8MB1BDC (desktop) 
https://invis.io/C88MEVCFD (mobile)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.