Helen Doron English Germany – Website Redesign
UX writing, content design, copy
Project goals
- Restructure and modernize the website and make it easier for parents to find the right courses for their kids
- Satisfy the different requirements of the 75+ Learning Centres Germany-wide
- Rewrite copy
Duration
Spring 2022
Team
1 project manager, 1 UX writer/copywriter, 1 graphic designer, 1 illustrator, 1 programmer, 1 SEO specialist
My role and collaborations
I created the initial content design of the website with input from others on the team. A graphic designer worked with me to create the wireframes and layout. We held weekly meetings with the illustrator to incorporate our ideas into the final design. I wrote the English copy and handled the German translation from an outside service.
About Helen Doron English
Helen Doron English is a worldwide institution teaching English as a second language to children of all ages. Their concept is that children learn best through fun activities, positive and interactive engagement and repeated listening.
Focus
German and English copy: The majority of users were German-speaking parents, however based on research, there were also many parents who did not speak German, but who could speak at least some English.
Structure and redesign of the locations page and course offering page.
Consistent brand voice: Helen Doron English teaches children from 0 to 18. Therefore, the brand is playful and yet needed to not be too silly for older kids and teens. To gain parent trust, it also had to be serious enough to convey information without feeling stiff.
Clearer and more concise copy.
We were encouraged to also pay close attention to SEO.
Research
Competitor research and other Helen Doron English regions
Because Helen Doron English is a worldwide company, the first part of our research focused on how the the franchises in other countries conveyed similar information on their websites. The team and I found several instances of improvement possibilities and in some cases also learned what not to do. I also did direct competitor research, looking for how other ESL companies structured their course offerings.
Stakeholder interviews
The project manager and I held informal meetings with stakeholders, including several of the German franchisees. We asked them about what it was that they needed or thought they needed the most, what worked with the current website, and what needed improvement. This led to heated discussions between them about how to showcase the courses, as not all courses were offered by all Learning Centres. There was no way to make 100% of them happy, but we tried to accommodate as many people as possible.
Among other things, we asked them:
- What is the primary use of the website?
- What do parents ask them?
- What isn’t already clear to parents when they contact the Learning Centre?
- What was the current process for parents looking to find a course?
- What do the German master franchisors want most to promote (Helen Doron English offers many other services besides just onsite classes, such as apps and online learning games)?
Current site audit
I audited the current site for content to determine what was still relevant to the goals.
Examples
Course Catalog
BEFORE
On the original course catalog page, age categories were presented in tabs at the top. When you click on one, there was a listing of different courses for that age group, as in the example seen here.
Each age category was one long text-heavy page; it was difficult to find the right course. Under the main title there was a general blurb about the classes for kids in that age group. Below that, a listing of courses with their descriptions. Depending on the offerings, it could translate to a very long page and parents could not see classes at a glance.
The website was only in German. From the franchisees we learned that many interested parents did not speak German.
AFTER
The team and I developed a new navigational tool made up of illustrated islands representing different ages. This was visually more appealing and neater. It also provided a way of spacially separating the information.
Click on one island and you see what courses are offered in this group along with a general description. We struggled with the coloration. Initially it made more sense to have each island dulled until clicked, but then the individual offerings in that category would get lost in the illustration. We compromised by dulling the clicked category while increasing its size to let the offerings pop.
Click on an individual course and you get a succinct description with the option of reading a more detailed version. This allows the user to focus only on the information they are interested in without having to wade through other things.
Below our island graphic, we decided to present the information again in a more expected way. This option contained the age categories in boxes. At a glance, the user can read the general description and see which classes belong in each category.
Locations Page
BEFORE
The locations page originally consisted of a map that we liked (not shown) and a listing of all the locations in alphabetical order by city. The map allowed the user to pinpoint their location and then zoom out to find the nearest class. The listing below it was more problematic, because it forced the user to know what location is closest to them already and then search for it by name.
It also forced the user to hover or click on the chosen location to access the contact information.
AFTER
I kept the map and added a search-by-location-and-radius function.
I also presented the contact information on each card, no clicking needed. We also added freelance teachers to this list and made them in a different color. This was a politically strife decision because, originally, freelance teachers could only be found on the map. In the end, it was decided that usability should be at forefront. The compromise was that the freelance teachers would always be shown below the Learning Centre listings. As there weren’t too many offerings in one area, this served the user while maintaining the company hierarchy.
Results
This was the last of many Helen Doron English projects I handled over the years, so I already had a deep understanding of who they were and what they needed. The most interesting part for me was the playful mixing of imagery with copy. In this case, one could not exist without the other and I discovered that the intertwining can be a useful tool for highlighting their distinctive brand voice.
I sadly had to leave the company before the final rollout, but I’m still proud to see what we created. Helen Doron Germany has been thrilled with our changes and the fun, easy ways for parents to find the right courses.