MÜV

Branding/Responsive Web Design

WHO

  • Jason Cairati
    Lead Designer, Researcher

WHAT

  • A responsive website for MÜV Creative Productions

WHEN

  • February 2023 - Ongoing

WHY

  • Business wanted to develop a new brand and offer an easy way for clients to register for classes
A hero image of the GalleryScan being used on an iphone
THE GOAL

Designing a dynamic website for both desktop and mobile to efficiently register for group music/dance classes. Improving customer retention and sign up rates were the main goals in development.
Laptop and phone screen shows MÜV Creative Productions homepage, that says "Join the MÜVment". A picture of kids dancing is shown behind text
THE PROCESS
‍
Initial research included a competitive audit, analyzing customer reviews of competitors, and interviews with the user base. Research was limited due to client's budget constraints but it was important to understand the business's position compared to their competitors so a deep analyses of the competition's websites became the main source of research. Persona and user journeys maps were created to help better understand and empathize with the users potential pain points and define the problem after referencing census data and publicly available records.

One section of competitive audit document shown here

PROBLEM STATEMENT
‍Claire is a busy professional and mother who needs an efficient and easy way to sign up her kids for classes.

PERSONA - CLAIRE


Age: 37
Education: Masters
Hometown: Everett, WA
Family: Married, 2 kids
Occupation: Radiologist
‍

"I want my kids to take creative arts classes that fit within our schedule and are fun/educational." 
GOALS
Wants to easily sign her kids up for creative music/dance classes
‍
Wants to know details without needing to ask too many questions
‍
FRUSTRATIONS
Frustrated when she's unable to find the information she's looking for, such as class cost or age range
‍
Is frustrated when she can't see all options up front without a lot of backtracking on site
‍
pain points


TOO MANY STEPS
‍

Users felt frustrated if they had to go through too many steps to sign up for classes


UNNECCESARY CLICKS
‍

Users felt like they were often wasting time to learn the information they needed to make an informed decision
‍
Research revealed that often times users felt frustrated when they were required to get to registration without knowing class cost or scheduling details for their children. Finding a solution to this was a top priority.
STARTING THE DESIGN
After determining the main problem users would be facing, it was time to move into creating a site map, wireframes, and prototypes. My main focus was finding an easy way to view class information that helped cut down on unnecessary clicks for the user.
SITE MAP
DIGITAL WIREFRAMES

Based on testing, users desired a way to know class schedule, age group, and pricing. Developing a way to see all of this information at once was made a priority.
LOW-FIDELITY PROTOTYPES
This low-fidelity prototype followed the class sign-up navigation for the website. A primary goal was minimizing the number of screens and time spent scrolling to find necessary information.
‍
USABALITY STUDIES
A series of usability studies were conducted at both the low and high-fidelity level. After reviewing the data, a number of insights were discovered through this process.
Users were happy to be able to view classes available but wanted a way to view all class information before going to a separate page to register.


INFORMATION CARDS

Users felt seeing class information helped them avoid unnecessary clicks and let them avoid having to backtrack when navigating


LESS CLICKING/SCROLLING

Users wanted more detailed options to view class information before comitting to sign up page
REFINING THE DESIGN

After reviewing the data from the case study, new information was added to the homepage, such as location information and a way to present class information with less scrolling. It was important that users felt they had all information needed and never felt lost or confused.
MOCKUPS
A new card layout was developed to avoid scrolling to view all available class information
BEFORE USABILITY STUDY
‍
AFTER USABILITY STUDY
‍

Location information with included map image and link to address was included on homepage to save time
BEFORE USABILITY STUDY
‍
AFTER USABILITY STUDY
‍
FINAL DESIGN
The high-fidelity prototype followed the same user flow as the low-fidelity prototype with visual changes and a clear color relationship between buttons and actions for the user
‍
DESIGNING FOR ACCESSIBILITY
‍

Branding colors meet accessibility standards

Different size headings were used to help illustrate hierarchy and be compatible with screen readers
‍

Alt text for images and icons have been added 
FINAL THOUGHTS

IMPACT

Our target users shared that they found the navigation straight-forward and easy to use.
‍
Dropped number of clicks by 48% and decreased time spent by 30% to complete main user flow. Improved business leads by 23%

“The website looks great. It was easy to find out class schedule and all the details I was looking for"

‍

WHAT I LEARNED

I learned about cutting out the features that weren’t necessary and how to leave only what was necessary for the user to complete the desired task.

Staying within budget meant finding creative solutions to both the research and development of the website. This gave me a good chance to practice resource management and designing within a budget and strict time constraints.

MORE WORK

InvestEd
Mobile App (UX/UI)
Improved navigation and time on task by 27%
Predictabull®
Landing Page Web Design (UX/UI)
Increased traffic and client leads by over 30%.
LINKEDINEMAIL
a link to my email address