UCLA DESMA 160: Special Topics in Design: Professional Practice

Team

Angela Romero - UI/UX Designer

Demi Saleeb - Graphic Designer

Brief

I was tasked to design a content distribution channel and develop a UI multiplayer music game for students.

Intro

About Silverlake Conservatory of Music (SCM)

Music lessons via private lessons or group classes

Ages 5 and up

88+ cities in the Greater Los Angeles area

1,100+ students

79+ instructors and staff

Problem

Our user research revealed issues with the user interface. We discovered difficulties navigating the site due to a inefficient and confusing flow. Additionally, the SCM website doesn't have a centralized platform for users to manage their learning.

Goals

1. Create a simple and intuitive interface flow for efficiently posting and sharing educational and creative content.

2. Design an educationally engaging music game that resonates with young audiences.

3. Develop user friendly features including discussion boards to facilitate learning and collaboration.

Home Before

Dashboard Before

Community Board Before

Classes Before

Calendar Before

Research

I emailed 3 rounds of surveys to faculty, students, and parents to learn what matters to them. I received 54 responses and completed five user interviews.

Home After

Dashboard After

Community Board After

Classes After

Calendar After

Competitive Analysis

In my research of competitors' dashboards for inspiration, I noted a few key takeaways:

1. Employing modular blocks on the homepage is an effective way to optimize space utilization.

2. Integrating a left-hand menu aids in smoothly navigating through various types of information.

3. Consolidating quick-access links in a single area and employing icons enhances their visibility and prioritization.

Ideation:

The research revealed that only a few teachers and students use the website because they don't think it's helpful. To improve it, I thought of ways to improve the information and features on the website. I began sorting things in the instructors' part into clear groups, like lectures, feedback, certifications, resources, calendars, schedules, and private lesson requests.


I put in considerable effort to enhance the layout of information on the dashboard, the initial screen users see at login. Collaborating with my team and utilizing insights from user research, we determined the critical information that needed to be featured on this page.

Sitemap

The sitemap outlines the layout of the updated dashboard. It's organized into four subsections: Overview, My Sessions, My Certifications, and My Tutoring (exclusive to tutors). I've rearranged much of the existing content and introduced new features marked in yellow boxes.

Prototype

User Testing

I made a prototype that users could click through to test how they interact with the new interface. I ran 20 tests with UCLA volunteer faculty and students in two weeks. They completed specific tasks in the prototype while I watched via Zoom and collected their feedback. 

The tests showed a worked well and what needed improvement. Using this feedback, I improved the final design. It was gratifying to talk with users, show them the new design, and see how they reacted. It encouraged me to make designs that help our users.

Next Steps

1. Improve responsiveness on mobile and tablet

2. Design empty states to be more intriguing

3. Implement further customizations

Game Design

Children’s music game for SCM Amplified.

Reflection

I'm proud to have been part of a critical UX project from the start, even though it never launched. I gained experience working alongside project managers, designers, and engineers to prepare everything for launch. I challenged myself by brainstorming design ideas, sharing them with my team, and testing them with potential users. I also received valuable feedback from our volunteer community.

Although the project didn't go live, it gave me a valuable learning opportunity. Given more time, I will continue to gather user feedback and make improvements in case there's a chance for a future launch.

Tools

Photoshop, Illustrator, Figma

Timeline

Four weeks, Summer 2023