Case Study

La Petite Ecole Française

La Petite Ecole Française is a French school in Pasadena, and the client was looking to update the design and migrate the platform from Joomla! to WordPress.

 The Problems

After reviewing the client’s original site, I noticed a few things the site was significantly lacking:

• It was very difficult to tell what the site was about at first glance.

• The navigation and page structure were disorganized and inconsistent among pages.

• There was no page that listed all of her classes, so it was nearly impossible to comprehend what classes the client offered.

• The classes had no category, and the naming conventions appeared to be random.

• It was unclear to new students which level to choose and what the requirements are to join advanced classes.

• Mobile view was not supported.

Users & Audience

The primary users are the client’s students and the secondary users are new or prospective students. A third user type would be her former students who had only been attending the social events that the client hosts monthly.

All types of people consult the website, including the parents of young students and older professionals. What they have in common is that all use mobile devices, so being able to view the site on a mobile is important.

Team & Role

Having had previous experience designing responsive websites from the ground up, I led this project with my graphic designer from conceptualizing to launching.

My contribution includes information architecture, user task flows, and prototyping. I also conducted user research using the methods, such as interviews and a micro-usability test to improve usability and conversion.

Design Process

I started from our competitive research to study what their approaches are to the problems we had and conducted some interviews to study their pain points. (It was very difficult to navigate and users couldn’t figure out what classes to take.)

Next, we spent a great amount of time organizing every class by giving them coherent naming conventions. Then, we categorized each of them into a few big groups, and we finally made a single page class list. We also made sure that the single page class list included private lessons.

I explained to the client that grouping them in a single page gives users (her students in this case) a much better overview of what she offers and makes it easier for students to choose what they may like. We also suggested the client follow the same naming convention for each class in the website, which leaves no confusion for the users.

Design

Because almost all users use mobile devices, the site had to be optimized in mobile view as well as desktop view, so we went with responsive design.

Outcome

Among all the developments, the most successful ones were the creation of a single page class list, which originally was completely missing, and improving IA for her classes. This was very effective because some classes, particularly private lessons, were never found by students at the original site, but now they get purchased every week.

The site was also well received by her students, and they like the new site much better than the original one.