UCLA Chinese Ensemble
Web Design
UI/UX | Product Design
Bridging cultures and traditions with inviting and modern web design
Role
• Product designer for the admin console
Tools
• Figma
Timeline
• July - September 2024
Team
Designers:
• Cory Poon
• Ivy Xiao
Full Stack Developer:
• Aland Liu
Overview
UCLA Chinese Ensemble is a place that welcomes students from all majors to join and share the joy of music. Before this project, there was only a simple webpage about the Chinese ensemble. People were often unaware of it since it lacked sufficient information and was not tailored to students’ needs. We often hear questions like “how do I join the class?”, “what are the instruments taught in this class?”, and students mainly know the existence of the class through the “word-of-mouth” effect.
Therefore, several other students and I taking classes at the UCLA Herb Alpert School of Music decided to create a comprehensive and interactive webpage for people to view all the essential information, and ultimately build a bigger community where everyone feels welcomed. We also want the future admin to easily maintain and edit the website so that the website remains up-to-date.
Problems
1. How to make sure that the information is up-to-date and accurate?
On the old website, users cannot easily find or access the necessary details they need in one convenient site. Instead, information is scattered, incomplete, or difficult to locate, leading to confusion and inefficiencies. A lot of the information is also outdated and inaccurate, making it difficult for users to access reliable data.
2. How to ensure that non-technical users can also manage the website?
There had been some student-owned websites in the past, but they stopped running after the original creators graduated because there was no one with the technical expertise to maintain the site. To address this, we need an admin console that simplifies website editing, making it intuitive and accessible for non-technical users to update and manage content effectively.
Research
User Survey
By giving out surveys and analyzing the results, we were able to identify the current problems with the existing website, including outdated content and difficulties in maintaining updates. These insights validated our decision to design an intuitive admin console, ensuring accessibility and easy updates for both students and administrators.
User Personas
Since future students will be in charge of updating and maintaining the site, user personas are built based on students with different majors and varying levels of technical expertise.
Affinity Diagrams
Our affinity diagram generated from user interviews revealed two major challenges: the outdated nature of the existing webpage and the difficulty in maintaining it due to its technical complexity. Students, often lacking advanced technical skills, found it challenging to update content, which led to misinformation and a disconnected community. These insights drove us to develop an intuitive admin console, empowering non-technical students to easily manage and refresh the site so that essential details remain current and accessible for everyone.
Goals
While other designers on the team focused on organizing the information architecture and re-designing the entire website, my job, other than editing the main site, was to ensure the website could be maintained efficiently in the future by designing the admin console.
Design an admin console that allows future administrators to easily manage and edit the website to keep it up-to-date.
Brainstorming
Mapping Out the Site's Structure
Mapping out the structure of the website was crucial for designing a comprehensive admin console as it allowed me to identify areas where future admins might face challenges or confusion. With this knowledge, I streamlined the interface to make managing and updating the site more intuitive, ensuring that all content and structural elements are easy to locate and modify when needed.
Information architecture based on the organization of the new website ↓
Design
Design Iterations and Process
The design process began with:
• Ensuring that all essential functions were included in the admin console
• Prioritizing user needs (i.e. easy to edit and update the content of the website)
• Making sure that tasks could be completed efficiently
Once the core functionality was established, I shifted my attention to refining the aesthetics, making the design visually appealing while maintaining usability. This iterative approach allowed me to test and make adjustments based on feedback, improving both the functionality and the overall user experience with each revision.
Different iterations of the same page ↑
Adding aesthetic to the page ↑
Design System
Designing for now and the future
For future sustainability and accessibility, I ensured that the interface was intuitive for users with varying levels of technical expertise, providing clear labels and simple workflows to guide users through common tasks. I also implemented features that allow for easy content updates and system modifications without requiring complex technical knowledge. To ensure long-term usability, I incorporated responsive design principles, ensuring the console is accessible across devices.
Reflections
What I've Learned
① Auto-layout
In this project, I had extensive practice with auto-layout. It not only makes the design responsive and ensures that the spacing and alignment are consistent, but also helps our developers easily visualize and implement interactive components.
② Site Maintenance
Site maintenance is that it’s not just about fixing broken links or patching bugs. It's about creating a sustainable, user-friendly system that allows future admins to manage, and update the website. This experience has shaped my understanding of how essential it is to design tools that are both functional and accessible for the long-term development of the website.
Future Steps
① Frequently Update the Site to Provide Reliable Information
By setting up a clear schedule for updating class schedules, event details, and other time-sensitive information, we can prevent outdated content from remaining on the site. This will help to build trust with users and make sure that students always have access to the latest details.
② Site Maintenance
Important for the long-term functionality and user satisfaction, regular maintenance will involve monitoring for broken links, fixing any technical issues, updating course and performance details, and addressing any user feedback or design inconsistencies.
.jpg)
.png)
.png)
.png)
.png)
