Overview

Mograph Mentor offers online motion graphics courses, challenging the conventional higher education model in the arts. Our on-demand training and mentorship classes enable artists to sharpen their skills and launch successful careers.

When I joined Mograph Mentor in late 2018, the company’s vision was more extensive than its current trajectory. My business partner had passionately embarked on this endeavor as a side-project. While the initial steps were commendable, the potential was vast, and to truly tap into it, there was a need for a shift.

Our mutual goal became clear: transform this side-project into a full-fledged startup with a mission. We aimed not just to operate in the motion design world but to revolutionize the way to learn. Our mission was to equip artists with new skills, giving them a competitive edge and paving the way for abundant work opportunities.

Deliverables

While strategizing on the business and plotting out marketing blueprints, it became increasingly clear that the company’s face, its brand identity, and digital presence, needed a complete overhaul. This was more than just a design revamp; it was about setting the tone for what Mograph Mentor would represent in the industry.

Thus, my first significant project was twofold:

• Refreshing the brand identity: The objective was to encapsulate the essence, vision, and mission of Mograph Mentor into a recognizable and resonant brand identity. This involved curating a color palette, typography, and brand guidelines that would set us apart in a rapidly evolving industry.

• Revamping the company website: Our marketing website was the main entry point into our offering. It was crucial to design a user-friendly, engaging, and informative site that catered not just to our existing community but also to potential mentors. The challenge was to construct a site capable of supporting our envisaged business growth and the forthcoming expansion of our course catalog.

The Challenge

As I delved deeper into the heart of Mograph Mentor’s operations, two significant challenges came up:

Overcoming legacy limitations: The existing website, though functional, was a rudimentary tool that lacked the robustness and versatility required to accommodate our ambitious growth plans. The bare-bone capabilities it offered were quickly becoming bottlenecks. It became evident that this solution would be insufficient; a ground-up rebuild was needed.

Navigating a competitive landscape: The motion design industry is expansive and fiercely competitive. To truly distinguish Mograph Mentor amidst a sea of competitors, it was key to gain a holistic understanding of our target audience. Their aspirations, challenges, and motivations needed to be at the core of our redesigned brand identity and website. Additionally, immersing myself in the intricate world of motion design was crucial. It wasn’t just about aesthetics or functionality; it was about creating a platform that resonated with both seasoned professionals and budding artists. Addressing these challenges wasn’t just about design and development; it was a deep dive into strategy, understanding our stakeholders, and leveraging the very essence of what motion design represented.

Final Product

New Website for Mograph Mentor

I designed, tested, and launched a new brand identity and fully functional website to market Mograph Mentor’s business and increase brand awareness across the industry.

Brand Identity Guidelines

Mograph Mentor sought to differentiate itself from its competitors through a brand identity that was clean, artistic, and welcoming.

With these attributes in mind, I designed a new logo, color palette, and typography. I then created brand guidelines and a design system to facilitate future improvements and streamline communication with cross-functional team members.

Design Research

Audit revealed content organization and navigation issues

I began my design research by auditing the former website. The former website had an aging look, accessibility issues, and defective navigation making it difficult for users to find the course’s sales pages. From an SEO standpoint, the page semantic and keywords mapping was completely missing. The web performances were also negatively impacted by the lack of proper image optimizations.

In short, the website’s design and usability were far from where they needed to be to support the business needs.

Industry & Market research led to important discoveries about how the motion design industry operates and the current state of online education for motion design

Researching how the industry operates and who its main actors are was essential to successfully lead this project.

I noticed that this industry was segmented into three fields: Video Games, Movies, and Consumer Products.

The Motion Graphics market was projected to be worth 270 billion U.S Dollars by 2020. For the last 10 years, this industry has rapidly grown thanks to several technological breakthroughs and an increase in computing power.

Initially composed of a majority of freelancers, the need for motion design is becoming more and more recognized by companies. This results in a rapid increase in in-house opportunities.

Competitive research revealed differentiating factor and branding opportunity

To perform my competitive research, I reviewed 25 companies operating within the online motion design education market. Since our competitors had a significant lead in market share and company size, my goal was to identify our most differentiating factor and branding opportunity.

This research revealed that our 3 most direct competitors were: SchoolOfMotion, MotionDesignSchool, and GreyScaleGorilla.

I also listed indirect and potential competitors in a spreadsheet to be able to easily track them.

Understand our early adopters and research new audiences to design a better user experience

I interviewed 4 students and 2 mentors (course instructors) who were early adopters of the business.

These interviews revealed the first series of insights into the mindsets and behaviors of motion designers seeking education. Motion designers seeking an education often encounter these problems:

• “I need a portfolio of original work to distinguish myself from other artists”
• “Getting constructive and meaningful feedback on my project is difficult”
• “Improving my skills and creating compelling work is daunting and time-consuming”
• “I don’t know what I should learn and create to help drive my career in the direction I need”

To confirm my initial assumptions and get a better grasp of the target audience, I expanded my research.

I used Google search, public forums like Quora and Reddit, and Facebook Groups to study the different audiences that constitute the world of motion design.

I also implemented a survey in our most downloaded free course to probe our beginner audience.

Based on the collected qualitative and quantitative data from our target audiences, I established two personas:

Mograph Mentor’s underdog position in the market required us to move fast about our technical stack choice.

Since the main competitors of Mograph Mentor already had a significant lead in terms of technology, market share, and brand visibility, we needed a quick and reliable technical solution to be able to compete as soon as possible.

Furthermore, the competitor and user research revealed that the technical aspect of our solution was less important to our target audience than the actual quality of the educational content.

This new tech stack will serve as the foundation of our business. To avoid building any critical technical debt, I choose a combination of WordPress for the marketing site and Teachable for our learning management system.

Design Iterations

Design Goals

To help me drive the decision making and prioritize design decision, I established design goals:

Clarity: The old website was suffering from a cluttered and aging look. To better convey our mission to our customers, a clean design will be the first building block of our growth.

Performance First: With an e-commerce platform, loading performance was key to facilitate conversion. This goal also aligns with my design philosophy, Form follows Function.

Mobile Optimized: Design a seamless user experience optimized for both desktop and mobile platforms, ensuring accessibility, functionality, and engagement for all audience types.

Better Navigation: The old website was missing a critical navigation path to access the on-demand courses. These on-demand courses representing our revenue’s baseline, easy access was imperative to the business’s success.

Feature Our Mentors: Our values and mission aimed to promote human interactions above all else. In my competitor analysis and user research, we also learned that promoting our mentors was key for our market positioning.

Improved Tracking: Data-driven decisions are crucial to success. Since the previous website had no tracking, I was working in the dark. To avoid this in the future, I designed this new website with data collection features in mind.

Iterations: A design is never finished. Iterate on it with the help of data and usability tests was mandatory for this new website’s success. I designed this website in 3 sprints with tests at the end of each cycle.

Brand Development

To streamline future improvement of the new website, I developed a brand identity that will convey our message with clarity.

The initial color palette was heavily focusing on a combination of lime green and dark colors. Due to the lack of contrast of the lime green, I decided to add a complementary color that will serve as primary color.

User Flow

Based on the user research, I designed a user flow aiming at describing the flow when a user enters the website to when they purchase and access a course.

Wireframes

Multiple rounds of wireframes and ideation helped me pinpoint the best navigation and set of features for the new website.

When I work individually on a design project, I like to sketch my wireframe on a notebook to accelerate this ideation process.

If I work with a team, I prefer to use collaborative design software like Figma or Invision.

Usability test and A/B tests

For each design implementation, I made sure to perform regular tests such as in-person usability tests, heatmaps, user flow recordings, and A/B tests.

The goal was to ensure that each new design implementation fulfills its intended objective.

Learnings & Impact

I really enjoyed working on this project. It showed me how design isn’t just a visual expression. It’s also making sure that you understand the business needs, market conditions, and user behaviors to create the most usable and compelling solution.

This new website, combined with a marketing strategy and informed course development roadmap resulted in increased monthly revenue by +75%, website traffic by +171%, and active customer count by +147% in 12 months.

The following year, we were able to increase the size of the team to add a Creative Director, a Marketing Assistant and 2 Video Editors.

After three rigorous years of relentless dedication and perseverance, our journey took an unexpected turn. Our company, once a fledgling endeavor, caught the attention of one of our key competitors. Recognizing the mutual benefits and the potential for collaborative growth, we made the strategic decision to merge. This union marked the culmination of our efforts, but it also meant that the website I had meticulously built, a testament to our beginnings and aspirations, would be decommissioned. While it was bittersweet to witness its retirement, it underscored the larger narrative of progress and adaptation.

Final Results