Case Study: Learn In Motion

case study web design Apr 14, 2021
Graphic that shows Learn in Motion's logo

Chris and Hope of LEARN IN MOTION came to me looking to update their existing website in order to communicate the value of their unique approach to education.

Like many small business owners, they were both extremely busy running their business to find the time to work on their website and just 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.

 

New Web Design Process

Building the new website began with interviewing both Chris and Hope in order to better understand who they were, what problem they were solving, and how they planned to solve it.

This conversation led to identifying the three major audiences whom the website will speak to:

  • School Admins
  • Community Leaders
  • Parents

 After identifying the unique audience, and key 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 began laying out a website structure and creating copy for each page. This process also included what the visitor journey would look like and what the expected outcome will be.

Many of the photos were already on the old website and just needed to be transferred, cropped, and given an overlay that would be consistent across the site.

 

Call-to-action

After reviewing different options, it was decided that a contact form with conditional logic built in would be the best call-to-action for a visitor to take.

The form would take the visitor through a series of questions, that would help Learn In Motion know how to best help their visitor by giving them insights into what type of programming they needed.

I recommended using a form online form creation tool called Paperform that can present different questions based on the responses of the visitor. The forms conditional logic allows for more information to be collected without presenting too many fields to the visitor.

 

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.

 

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.

 

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.

 

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.

 

Find more case studies below:

Kozyra Construction

Kringle Candle

House Matters Renovations

Stay connected with news and updates!

Join the mailing list to receive the latest news and updates from our team.
Don't worry, your information will not be shared.