CPM: Website Redevelopment

A website revamp designed to improve user engagement and to promote CPM’s curriculum and professional learning services.

Company

CPM Educational Program - a 501(c)(3) educational nonprofit corporation. CPM originally stood for “College Preparatory Mathematics “ but now simply goes by"CPM".

Sector: Education, Technology

Project Type: Website Redevelopment

Duration

February 2022 - August 2022

(5 months)

Tools

Figma

Adobe Illustrator

Wordpress

WPEngine

My Role

UX/UI Designer

Education Technology Digital Content Specialist (my role in CPM)

The Team

Myself (Designer)

1 Project Manager

3 Education Technology team members (contributed to Wordpress page and content creation)

Contributions

Competitive Analysis

User Research

Information Architecture

UX/UI Design

WordPress Content Creation, Development, & Maintenance

Copywriting & Editing

Project Overview & Process

As part of CPM’s ongoing goals, creating a new and engaging digital presence designed to market its best strengths is crucial. This evolved into a front-to-end customer facing website project designed to promote CPM’s mission and educational offerings.

In 6 months, the Education Technology team and I analyzed the old website’s traffic and user engagement patterns, platform capabilities, and redefined the site hierarchy to develop a new and improved user-facing website. We redeveloped, designed, and switched the website and hosting platforms from SquareSpace (old) to Wordpress and WPEngine (new) to create a more visually engaging and informative website for current and new users.

The Challenge

As a member of the edtech department, our specific strategic planning goals have been to improve our user facing website. After completing a competitive analysis, we determined that the website is outdated, inaccessible, not mobile responsive, and lacks the proper interactive components to richly engage our users. Thus, many front and back end changes needed to be made in order to showcase CPM’s strengths.

Business Constraints

1. Research & Understand

Understanding CPM's Business Goals

Clearly communicate CPM's values and strengths

Attract and engage more users to diversify CPM's outreach

Ensure financial stability in a competitive edtech industry

Empathizing with our users

Educators, Parents, and Students

My 3 user personas highlight their goals and pain points to use as reference points for the website areas in question. These insights helped me focus on improving the user experience of the web pages.

Competitive Analysis & User Feedback Insights

71% User Bounce Rate

1.7 Pages During Session

20% Returning Users

80% New Users

00:00:59 Avg Session Duration

Lack of CTAs, taglines, and SEO strategies to successfully market CPM

Lacks engaging and intuitive website structure and interactions

Professional Learning Team

Difficult to understand how CPM is different from other math companies

Inaccessible and scarce support resources (parent, student, teacher)

Difficult to register for Professional Learning events due to overload of information

No convenient one-stop shop to access all CPM related sites -- important links are randomly dispersed throughout the site or in the footer where many users do not look

Unclear documentation and steps to pilot/adopt CPM curriculum

Lack of visual interest, personality, or storytelling elements

Inaccessible and hard to navigate across other platforms

2. Define

The data points and user personas helped me define what website pages, elements, and site structure to improve CPM's new website's user experience.

Areas to improve:

Professional Learning
Why Choose CPM
Curriculum
Parent Support

Storytelling and engagement
Visual interest

Centralized Information and Site Hierarchy
Navigation Menus and Footer

Cross Platform Responsiveness
Web Design Accessibility (WCAG 2.1)

Information Architecture

Understanding CPM's Content to Define Menus and Enable Clear Navigation

Cardsorting Insights:

I completed 20 random virtual card sorting activities with CPM employees and unaffiliated users to understand their mental associations and mind maps.

Unaffiliated CPM users were often confused by page names -- especially Professional Learning pages

News and Events should be in its own category

Remote Teaching, Homework Help, and Parent Support seem out of place - no way to categorize them

Often simplified and created 4 basic categories: such as Parents, Educators, About, and Curriculum

Created subcategories for Professional Learning topics

Site Mapping:

Challenges

I frequently mediated between my project manager and department stakeholder's sitemap ideas by striking a balance. I became the voice of the users by reminding the stakeholders of their pain points and goals. We went through several iterations of the sitemap before reaching a consensus.

The users we tested with would often explain that the old Squarespace's sitemap was difficult to navigate and frustrating. This explains the high bounce rates and less than optimal user sessions with the old site. The Google Analytics and card sorting user test feedback helped us define clearer page names and develop more comprehensive categories. Some of the card sorting results are reflected in our later site map iterations, such as more subcategories for Professional Learning and renaming resources tailored to the specific user group (ex: for Parents, for Educators)

Old Squarespace Site Map

Wordpress Sitemap (Iteration 1)

Wordpress Final Sitemap

CPM Wordpress Updated Sitemap (Iteration 2).png

*For better resolution experience, please click to expand images

3. Ideating & Prototyping

From Moodboards...

My team and I looked at our competitors' web pages and found inspiration to apply to our new website.

Large hero banners

Good use of images, videos, and white space

Clear and condensed text

Mega Menus/interactive menus

Clear categories and targeted user groups

Testimonials, numbers, and percentages

To Sketching...

...To Translating Ideas Digitally

After wire framing, I prototyped the web interactions to demonstrate to my team.

My prototype provided guidance for my team members who weren't familiar with conceptualizing the new website's structure.

...To Developing in Wordpress

After visualizing our page layouts, the next step was to transfer our ideas into Wordpress.

4. Development & Testing

From May to August, I worked with my team on the platform switch from Squarespace to Wordpress. We worked with many of the business constraints set for us during this stage.

Understanding Wordpress' Many Functionalities ...

Challenges

I had no prior experience using Wordpress so learning how to navigate through the site's components was difficult. Due to our budget, the team and I self learned everything by researching the web and watching tutorials.

I learned how to choose compatible plugins, install themes, optimize our media, update theme settings, create templates, pages, navigation menus, and etc...

To Creating Our Very First Pages...

I focused on creating the Homepage, About CPM, and for Educators pages.

...To Iterating Based on Stakeholder Feedback

Key Feedback:

I included the department stakeholders in the prototyping and development process and listened to their critiques.

Replace stock images with our own marketing materials

Reformat the Virtual eBook Tour video to look more clean

Use consistent graphics and colors

Some text and headers are hard to read

Can we make the Professional Learning Progression outline more interesting?

We need to create more subcategories and individual pages for Professional Learning events and resources

Can we create a mega menu?

...To Fixing Accessibility Issues Along the Way...

A Mega Menu Request:

Many of the stakeholders requested a mega menu to maximize visual interest and make our categories more interesting. However, as we began to design and test the idea, we determined this request was not feasible.

I inspected many competitor websites that utilized mega menus and saw they were not optimized for the mobile platform. The information and nested tabs got lost and would not appear in the mobile menu. I determined this was an accessibility issue since we wanted our users to navigate to pages they wanted.

Website Menu

Screen Shot 2022-12-14 at 6.21.41 AM.png

Mobile Menu

Subcategories do not show up on mobile mega menus

We ultimately decided to revert back to a simpler navigation menu to ensure our users could get to pages quicker.

...Using Branding and Style Standards to Reinforce User Accessibility and Establish A Cohesive Identity

This would ensure consistent style standards and a uniform user experience across all pages of our site. This also made it easier for my other team members to create their assigned pages.

The style standards and page templates I created allowed my team members to be more confident going into the page creation process.

5. Launch! 🎉

In August we revised the website design and perfected the copywrite for 70+ pages. During this time I took charge in helping implement the domain switch from SquareSpace to Wordpress through WPEngine.

...From Connecting WPEngine with WordPress

...Creating Staging and Production Environments...

Screen Shot 2023-03-26 at 9.26.39 PM.png

...To Sending Our Staging Website Link For Final Review

The department stakeholders completed a final review before we could push the site to production. Often times the visual design, information hierarchy, content management, and extra features the stakeholders wanted clashed with the users’ needs. I had to balance the stakeholders' needs with the users’ needs to create a cohesive and intuitive web page experience. I often referred back to the user personas and their journey maps to remind everyone of the users’ pain and gain points.