The Problem

The MCCLA website is outdated and lacks relevant information and resources for their users. As a result, they aren't getting enough enrollment in classes or donations due to the difficult and confusing navigation.

BEFORE:

Before

AFTER:

After

Research

Stakeholder Interview

We first started our research reaching out to our stakeholder for an interview. We were hoping to gain insights into their unique problems and pain points before making any assumptions. We asked them questions like “What are your goals for the website currently?”, “What would you change about the website if you could?” and “Are there specific metrics or KPIs that are not currently being met?”. Parallel to that, we were performing a heuristic evaluation on their website main page to get some more insights into possible problems to address.

STAKEHOLDER INTERVIEW INSIGHTS:
  • Their main goals for their website are to be easier to navigate, simplify class enrollment, facilitate the donation process and have an appealing visual that reflects the vibrance of the center
  • Target users are Spanish speaking families with limited resources and access to computers. Many people they serve have challenges navigating technology
  • Audience ranges from local community members, cultural workers, artists, donors and corporate sponsors they want to attract

User Interview

To understand how users navigate in their current website, we conducted a usability testing with 6 of their potential users. They were requested to complete a few tasks and asked a few questions like “Tell me about your experience using the MCCLA website”, “If MCCLA could streamline any information to you, what would that information be?” and “What needs would you have as a potential user that MCCLA in not fulfilling?”

USER INTERVIEW INSIGHTS:
  • Users got confused on how to make a donation, since they have two different buttons for it
  • Users struggled to register for a piano class and could not complete the payment
  • Users thought the whole process of class enrollment would be easier if there was a login option
  • Users wished they were able to change the website language to Spanish
User Interview Table

Definition & Ideation

User Persona Development

With all insights we collected from both interviews, we created a user persona to work with. Meet Timmy Vazquez, a local artistic who needs affordable access to cultural related arts classes for him and his family. Timmy wants to expand his arts skills and make sure his son gets raised with his cultural values while getting exposed to the arts. 

User persona

Pain Points

From all the data we collected so far, we could point out and labeled in red some users paint point and UI issues in their current website homepage.

Pain points

Concept & Design

Wireframes

In order to save some time, we skipped the paper sketching and jumped straight into our low-fi wireframes. Although there was several issues on MCCLA current website, two weeks was our deadline to fix all of them, so we narrowed the scope of our project focusing on the user's thoughts and stakeholder's needs.

Wireframes

Usability Test

To gather early feedback we conducted another usability test on our clickable low-fi prototype with 6 different potential users. We wanted to learn how they would complete tasks using the new design and they were also asked questions to validate our assumptions about how they understand the website’s purpose or what they expected to see on a page.

Usability Test Table

High- fidelity Prototype

After getting the results we were expecting from our previous test we kept iterating to our high-fi prototype. One of the stakeholder desires was to have a appealing visual that reflects the vibrance of the center. Therefore, we kept the original website color palette, added some other elements of latino art and reinforced the presence of the MCCLA’s logo on the website.

Final Concept

After two weeks of hard work, this is our final product.

Final Concept

Responsive Web Design

We also learned from other research we did that 38% of adult latino do not use computers and 85% of them own a smartphone. 13% were smartphone-dependent, compared to 4% of whites, so most of their users rely more on their smartphone than a desktop computer. To better meet their needs we designed a mobile version of MCCLA website.

Final Concept