Case Study: Magic-languages.com

Responsive website re-design

Kris Irish
Oct 9, 2016 · 5 min read

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

What we found

Personas

Pain Points

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

Developing the Solution

Brainstorming and Planning

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

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

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)

Kris Irish

Written by

UX Designer — Everyone has the power to make a difference. By giving people the right tools we empower them to take action.