Learn In motion

by | Apr 14, 2021 | 0 comments

The Local Marketer Learn In motion

Chris and Hope of LEARN IN MOTION were looking to update their existing website. The goal is to better communicate the value of their unique approach to child education.

Like many small business owners, they are busy running their business. Unable to find the time to work on their website and needed help getting the project completed.

You can see from the screenshot of old website below, that the site was not mobile friendly or responsive.

Screenshot of old website.

Web Design Process

Building a new website for Learn in Motion began with an interview of both Chris and Hope. This helped me to better who they were, what problem they were solving, and how they planned to solve it.

Our conversation helped identify three major audiences whom the website will speak to. Those audiences consisted of the groups below.

  • School Admins
  • Community Leaders
  • Parents

We have identified each unique audience, and collected information about the services they are offering. The next step was to transfer existing content, and create new content for the new site.

 

Content Creation

After learning about the business I create a website structure and copy for each page. This process included the visitor journey and what the expected outcome will be.

Many photos were on the old website. I needed to transfer, crop, and add an overlay that would be consistent across the site.

 

Call-to-action

contact form with conditional logic is the chosen call-to-action for their visitors to take.

The form takes the visitor through a series of questions. Each answer helps Learn In Motion know how to best help their customer. It will gives them insights into what type of programming they needed.

I recommended the online form service called Paperform. The form can present different questions based on the responses of the visitor. The conditional logic collections more information without presenting too many fields.

Paperform

 

The form (which you can find linked here), asks them where they are located, and what types of programming are interested in. It also includes an opt-in for their newsletter with a direct integration to Mailchimp.

 

Motion Through Animations

Throughout the site you’ll find different moving elements in the background to give the illusion of motion. This includes paint splatter that moves as you scroll through the website.

You’ll see in the GIF below a blue streak of paint wash across the page as you scroll down.

Learn In Motion website.

Just like the business is focused on motion-based education, the website subtly includes motion without compromising performance.

 

Multi-Language Support

Hope is fluent in Spanish and was looking to reach Spanish speaking organizations and parents find and use their website.

By adding a Spanish version of the website at https://www.learninmotionma.com/es, visitors whose first language is Spanish can engage with LEARN IN MOTION online.

Screenshot of Learn In Motion website in Spanish.

Once each page was created under the folder /es, and the content translated to Spanish, I made sure each page included the hreflang attribute, and that the sitemap included these Spanish pages.

Once complete, the last step was to submit them to Google Search Console in order to get crawled and indexed. After some time, you’ll see in the screenshot below that the pages are submitted and indexed in the Coverage report with subfolders that begin with /es.

Google search console hreflang

Complete Web Design Process

Not only does the project include content creation, site structure, subtle animation, and multi-language support. The new website design, in my opinion, has to include setup and configuration of Google Analytics, Google Search Console, and creation of 301 redirects discovered after crawling the old site. 

These additional steps ensure the website is crawl-able, and reduces 400, and 500 errors for visitors who may have linked to them in the past.

If you’d like to learn more about this project, please leave a comment or use the contact page.