CYMG Website Redesign & Branding

Respobsibility

Website Design Audit, Visual System, Website Development, Logo Redesign

Timeline

March - August 2023

Project Overview

Background

CYMG is a non profit music academy in Los Angeles California. They needed a revamp for their malfunctioning website and outdated logo to attract new students and grow the organization.

  • Website malfunction due to difficulty in internal website maintenance in Wordpress.org

  • Low readability on desktop and mobile 

  • Confusing user flow for application and class enrollment

  • Difficulty forming classes due to lack of class enrollment deadline

  • Outdated branding and visual design

Current Challenges

My Role

I not only enhanced the user experience and aesthetics of the website but also reconstructed the site from the ground up using a new web builder, allowing for internal management.

Solutions & Impacts

  • Website builder transfer to WIX > Enabled CYMG team to manage website internally

  • New visual system & Logo > Enhanced readability and modern aesthetics captivate new website visitors

  • Mobile friendly website > Helping busy parents to enroll classes and pay tuition through mobile anytime, anywhere

  • Streamlined enrollment process and set enrollment deadline > Resolved the issue of timely class formation, preventing delays in practice dates

Internalizing website management and enhancing readability and usability

Landing Page in Desktop

Enroll Page in Desktop

Landing Page

Enroll Page

Class Page

New Student Application

Class Enrollment

CYMG Brand Style Guide

What Client Said

“The new enrollment process and deadline resolved the issue of securing commitment in time from students.”

“The new website really helped us see the whole picture in one place and track attendance, tuitions and more. “

Defining Problems

After I analyzed the existing website and user flows, I found 6 major problems that need to be adressed

The dropdown menus was left broken prevented users from accessing most pages. This happened because of the steep learning curve of the "Wordpress.org" website builder.

#2 Landing page: Unclear message about services and target user

  • No written description was provided to explain their purpose or objectives.

  • The cover image, featuring younger students, misleads website visitors about the main audience, which is high school students.

#3 Low readability on desktop and mobile

  • Large blocks of small texts and poor visual hierarchy made it challenging for users to locate and read information.

  • The lack of a mobile-optimized version made it difficult for busy parents to use the website on their phones.

#4 Confusing multi-function registration form

The current "Registration Form" served a dual purpose; an "Application" and a "Class Enrollment". However, this dual functionality caused confusion or redundancy to users, as some questions were irrelevant for new users, while many were redundant for existing users.

Registration deadline was non existence, leading last-minute registrations, creating challenges in organizing ensemble groups before the semester starts, consequently delaying the practice date.

#6 Lack of feedback

#5 Practice delay due to lack of registration deadline

The form submission process failed to offer feedback or guidance on next steps, leaving users uncertain about the success of their actions or what they should do next.

#1 Malfunctioning site

Setting Goals

Internalize Maintenance

Transfer the website builder to a platform that makes it simple for the CYMG team to update content and fix technical issues.

Clear Enrollment Steps

Seperate user flow for application and class enrollment. Display step by step guide to the users for clarification and setting expectation.

Responsive Design

Create a website responsive to both desktop and mobile for optimal user experience.

Readable Contents

Build a strong visual system. Use legible fonts and appropriate spacing to enhance readability.

Instant Feedbacks Upon Submissions

Implement automated pop-up screens and emails upon submission to set expectations for users and reduce workload for CYMG team.

Modern Aesthetic on Logo & Website

Redesign logo and the website with the modern yet classic look.

92 screens (46 desktop+46 mobile) were redesigned and rebuilt from scratch in WIX website builder. 

92 Screen Designs Built in WIX

Solution Highlights

Website Transfer to WIX

  • WIX's intuitive website managing tools and good customer service enabled Internal website management

  • WIX Owner App expedited communication with users

  • WIX forms providing valuable insights to the organization

Landing Page with all the Essentials

  • Services and offerings communicated clearly and quickly

  • Call-to-action (CTA) prominently displayed to motivate users to take actions

  • Social proofs (introduction videos and testimonials) effectively displayed to build trust and credibility

Easy to Navigate & Scan with New Visual System

  • Class list displayed on top, setting expectation and improving navigation

  • Grouping and prioritizing class informations with new visual system, improving scannability

Clear Enrollment Steps

  • Setting separate paths for “Application" and "Class Enrollment", eliminating ambiguous process of "Registration"

  • Enrollment process displayed in simple steps for clarification and setting expectation

Setting Class Enrollment Deadline

  • Enrollment deadline is set to ensure timely class formation and prevent delays in practice dates

Reinforcing the Enrollment Deadline

Enrollment deadline prominently displayed across the website, including the calendar, to reinforce the newly implemented policy

Class Enrollment Form Simplified

  • Now featuring only 10 sections instead of the previous 22, making it easier to complete the form after separating it from new student application

Automated Feedback after Form Submission

  • Setting up automated email with users next steps reduced workload of CYMG team

  • Confirmation responses right after form submissions improved user experience

Reflection

Main Challenges and Lesson Learnt

The primary challenge during the process was gathering accurate information necessary to move the project forward. This was because the person holding the key information, the organization's president, wasn't easily reachable, and I attempted to navigate around this without directly contacting her. I realized that it’s important to be proactive and reaching out directly, even if someone appears busy, rather than delaying progress.

Next Steps

One aspect I overlooked during the website redesign process was SEO, as I lacked sufficient knowledge about it. However, I'm eager to offer to enhance their SEO, which would enable me to learn more about it as well as they can really get the benefit of having much better website.