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.
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.
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?”
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.
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.
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.
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.
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.
After two weeks of hard work, this is our final product.
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.