Overview
Math & Movement is a small company that simultaneously improves children's health and education through kinesthetic learning products. The eCommerce business enables educators, administrators, and the like to help children of all backgrounds learn efficiently and gain confidence in their education.

As an intern for Math & Movement, I assisted Korie Fox, the Director of Communications, and often communicated with many other company members. Our focus was to increase user engagement and customer experience through different campaigns on social media and the website. I exercised adaptability in position, learning new skills and completing various tasks where the team needed me.

Role: Front End Design Intern
‍
‍Duration: 1.5 Years

Skills: Web Trend Research, Prototype Design, WordPress Development, Mobile & Responsive Design/Development, and Graphic Design
Tools: Figma, WordPress & Elementor, HTML, CSS, Procreate, and Canva

Website Redesign

eCommerce Trend Research

Math & Movement already had a functional website when I joined the team. Still, the company decided it was probably time to update its organization and design to better display its constantly growing and evolving content and stay fresh on modern web design. To begin the large-scale project of this website redesign, I undertook the task of completing an in-depth study of a handful of other popular eCommerce websites. I followed the suggestions from my supervisor regarding her inspiration for website designs. I took note of their systems of grouping and organization of content and products, navigation, filter options, and other general design patterns. After completing this web trend review on around a dozen eCommerce company websites, it was time to identify critical common design choices among them. Some of these observations included the grouping and alignment choices of navigation menus and the decisions for how companies often grouped products, and the filters contained on shopping pages. I discussed these observations with other Math & Movement team members and brought them with me through the remaining redesign process.

Site Architecture

The team then discussed what content elements of the original website needed to remain, which would need to change, and which we should add. I completed a card sorting process on Figma from the full list of unorganized content. All the desired pieces of content fit into one of six related categories, which would become the five high-level pages and one section: Home, Products, Events, Resources, About, and the Footer.

Final Site Architecture Map

Prototype Process

After I completed the site architecture map, the next logical step was to design the navigation menu and its dropdown menus. I took special care to include magnetic elements, such as the brand's colors and fun graphics/icons, while also following best design practices of alignment, grouping, etc.

A draft of two different navigation menu styles that I created in Figma

A draft of the four different dropdown menu designs that I created in Figma

On Figma, I began to make space for each page that would eventually reside on the final website, neatly grouping related pages and writing notes for the content and design practices to include on each page. On the far left end of the Figma file, I created and maintained a set of repeating website section frames, which belonged on several pages and which I would connect through interaction features wherever they belonged within the prototype.

This video walkthrough highlights the interactivity of a few pages on the Figma prototype, including the All Products page, the Floor Mats page, and the Webinars page.

Here is the embedded mid-fidelity, but unfinished, prototype for Math & Movement. Feel free to make full screen or to click on the bottom banner to view in Figma.

Once I had completed these sections of the mid-fidelity prototype for the website, the team and I decided that we felt comfortable, based on the time and scope of the project, moving on to redeveloping the actual website.

WordPress Redevelopment

To begin redeveloping the Math & Movement WordPress website, we made a copy of the website and implemented the prototype's designs into WordPress pages. We used Elementor and some other WordPress-compatible plugins to develop these pages, and I utilized custom HTML and CSS whenever possible. We ran into issues using WordPress for this project, especially when in combination with custom code. More than anything, we learned how to balance the desired outcome with the effort required to achieve it and how to brainstorm alternatives to the design or methods to achieve it. When we had successfully implemented a sizeable portion of the site's pages, we began to pay closer attention to the design and development of the mobile version. While I helped to implement several pages based on the plans in the prototype, I found my leading role in this part of the project in the navigation menu and in implementing custom code when WordPress or one of its plugins caused problems in delivering the desired outcome.

A walkthrough of a few pages on the Math & Movement website.

To view the Math & Movement website as it currently exists, click here.

Graphic Design

As a Front End Design Intern at Math & Movement, I also helped in efforts to improve user engagement by creating several graphics for the website, social media, and printables. Using Canva and Procreate as my tools, I could hone in on my design principles, such as alignment, grouping, scanning patterns, and use of color, with these projects.

A banner that I made on Procreate to act as a banner for a page on the Math & Movement website.

A selection of Pinterest cover pages I made for some of the Math & Movement blog posts, using a mixture of Procreate and Canva.

Three worksheets I made using Procreate and Canva, which we posted to the Math & Movement website as printables.

A printable worksheet that I created for Math & Movement: front page, back page, and completed worksheet, respectively.