Community School of the Arts Foundation
csoaf.org

UX\UI Case Study
How might we develop user-friendly SaaS dashboards that seamlessly  integrate online and in-person courses, fostering enhanced student  learning and engagement at CSOAF?
Project Overview
Timeline
The time span of the project: Feb 2024 - July 2024
Team
Jasmine Li, Sydneigh Vitlen, Rania Tirari, Liz Martinez
Deliverables
Conducted User Research
Conducted User Interviews
Constructed Personas
Designed Wireframes
Built SaaS Dashboards
Delivered  Design Brief

My Contributions
end-to-end product design
research + design + usability testing
Involved in all parts of the end-to-end design process, from secondary research, user interviews, interactive mid-fi prototyping, to usability testing.
hi-fi design + brand guidelines (individually)
After wrapping up the group project, I created the hi-fi mockups and the brand guidelines on my own.
Background
What is CSOAF?
Community School of the Arts Foundation aims to provide education in the arts by organising drama, visual arts, music, and dance classes for students. In addition, CSOAF offers in-person and online paid classes  to adults of any age.
Aim
To help  navigate the dashboards easily without experience high cognitive load and enhance accessibility,  flexibility, and overall learning experience for students and educators  alike
User Dashboard for Students (Hi-Fi Visual Design \ Desktop)
Admin Dashboard (Hi-Fi Visual Design)
Context
The Problem
CSOAF is struggling to track student progress due to the absence of a centralized platform to analyze performance and engagement, hindering effective learning. This has put student retention and satisfaction rates at risk of decline.
The Solution
The school should develop SaaS dashboards for its courses to provide real-time data on student progress, engagement, and performance, enabling instructors to identify struggling students and offer personalised support. This will enhance the learning experience, improve student retention, and overall course quality.
‍
The SaaS dashboard will be fully implemented within 6 months, with a phased rollout to minimize disruption to ongoing academic activities.
Why does it matter?
The absence of SaaS software in educational institutions can lead to inefficient and unengaging learning, as well as administrative errors. This can hinder progress and limit growth by missing opportunities for collaboration, data analysis, and personalised learning.
User Dashboard for Parents (Hi-Fi Visual Design)
Research
Research helped us understand CSOAF users' motivations, abilities, and goals, laying the groundwork for later design solutions. We conducted white paper research and industry analysis to identify the target market's needs and how CSOAF can gain a competitive edge.

We aimed to create educational content that caters to diverse learners, so we incorporated modern and animated visual aids, including Claymation. Our market analysis and competitor research formed the foundation of our secondary research, while in-person interviews and observations informed our primary research.
User Dashboard for Students (Hi-Fi Visual Design \ Mobile )
Some of our Research Questions
➤How can the school leverage the SaaS dashboard to foster collaboration  and communication among users, such as between teachers, administrators,  and parents?
➤What are the key features and functionalities that should be included in the SaaS dashboard for optimal user experience?
➤What data visualization techniques should be employed to ensure the  dashboard is intuitive and easy to understand for users with varying  levels of technical expertise?
‍
Heatmap analysis of the optimal path navigation, bounce and usability for each screen.
Industry Analysis
Industry Trends
➤ Virtual Learning - The COVID-19 pandemic has accelerated the adoption of virtual learning in the education sector. This has created opportunities for organizations like the Community School of the Arts Foundation to reach a wider audience and provide online classes.
➤ Focus on Inclusivity and Diversity - There is a growing emphasis on inclusivity and diversity in the arts education industry. The Community School of the Arts Foundation can differentiate itself by offering programs that cater to students from different cultural backgrounds and abilities.
SWOT Analysis
Why include Behavioural and Attitudinal KPIs?
Including Key Behavioural and Attitudinal KPIs in the design process helps to ensure that the product or service is not only meeting functional requirements, but also aligning with users' needs, motivations, and values, ultimately driving loyalty and retention.
‍
Behavioural KPIs
➤What devices do you use when logging in to an online course?
➤How many clicks does it take you to look for a course on the CSOAF dashboard?
➤How much time does it take to complete the task?
‍
Attitudinal KPIs
➤On a scale of 1-10, how easy is it to navigate the CSOAF dashboard?
➤How satisfied are you with the overall user experience of the dashboard?
➤Which of the following words would you use to describe  the CSOAF products? Select all that apply: High quality \ Modern \ Easy to apply
Competitor Analysis
The Community School of the Arts Foundation operates in a competitive market, where many similar organisations offer arts education and programs.

The Arts Council of Greater Lansing is a major competitor, with a strong reputation and network of supporters, but CSOAF can differentiate itself by focusing on specialised programs for children and adults, as well as outreach to underserved communities.
Admin Dashboard (Hi-Fi Visual Design\ IPad)
MVP
Based on our competitor analysis findings, we identified key features that were essential for our MVP (Minimum Viable Product).
‍
➤ Online registration portal for students to sign up for classes and workshops offered by the Community School of the Arts Foundation
➤ Student database to track enrolment information and class preferences
➤ Payment processing system for tuition fees
➤ Basic analytics dashboard to track student attendance and engagement

Competitor Analysis
Ideation
Formed strictly from our research and interview  quotes, We synthesised  user personas applying reference tools like Claritas Prizm, Myers-Briggs.
‍
Next, we  brainstormed and explored multiple ideas, ultimately leading to a  thought-out design solution.
User Flows & User Journey
We defined tasks and user flows that align with our user personas' needs, desires, and goals, and used these flows to map out the most practical user journey. We then created wireframes and Lo-Fi designs in Figma to visualize potential SaaS dashboards, and collaborated with developers through standup meetings to refine our design solutions.
User-persona - School Administrator
User-persona - Student
User-persona - Grandparent
Live Interviews \ Maze Surveys
We conducted interviews and surveys  with participants about their experience with the dashboards.  All participants were from Los Angeles and New York and  had experience with the SaaS dashboard.
"I like the overall design of the dashboard, particularly the visual elements such as the graphs and calendar. The layout is clean and intuitive, making it easy for users to navigate and understand. The tabs on the left provide a clear structure for accessing different sections of the dashboard. Furthermore, the color scheme is visually appealing and contributes to a pleasant user experience."
Participant 226581193
We synthesised data from multiple sources, including Maze surveys, interviews, and observational analysis, into an affinity diagram. This visual representation helped us understand the context of future users' interactions with the CSOAF dashboard.
User Flow \ User Dashboard for Students
User Flow \ Admin Dashboard
User Flow \ User Dashboard for Parents
User Journey
All Wireframes
User Dashboard for Students (Lo-Fi Visual Design)
Wireframes
Wireframes: Created Lo-Fi wireframes based on user flows, following the CSOAF style guide.
‍Evaluation: Assessed and evaluated each screen for technical feasibility and developer feedback.

Usability Testing
Preparation:Established test objectives, methodology, and rubrics before usability testing.
‍Test Plan:Created Maze surveys  to define test goals and prepare for the test.
‍Testing:Conducted remote usability testing with participants.
‍Results:Made design changes based on user interactions, analysing recorded sessions.

Tasks
Design Completion: Designed essential pages for task completion.
‍Prototyping: Linked pages using Maze and created a hi-fi prototype for usability testing.  

Tasks include:
➤Add a course to your favourite list
➤Enrol in the Sketching and Drawing course
➤Add a new teacher: Cody Fisher
➤Check upcoming events
Maze Report
Community School of the Arts Foundation Brand Guidelines
Iteration
Style Guide
Deliverables
Our deliverables included comprehensive design artifacts, such as user personas, journey maps, wireframes, prototypes, and visual designs. These materials ensured seamless communication, collaboration, and evaluation of the user experience and interface, driving project success.
Finished Deliverables    
➤Conducted User
➤ResearchConducted
➤User Interviews
➤Constructed Personas
➤Designed Wireframes
➤Built SaaS Dashboard Prototypes
➤Delivered Design Handoff
Unfinished Deliverables    
➤Add invoice forms to the Admin dashboard.
Products We've Released    
What’s next?
With the final prototypes created, we believe we have met the goals that were outlined in the beginning of the design process.

Moreover, our user satisfaction rate has risen to an impressive 70%, demonstrating a tangible improvement in our product's overall usability and performance. These achievements have far-reaching implications for our business, enabling us to deliver a more effective and efficient experience for our users, while driving revenue growth and competitiveness.
‍

I was honored to work alongside Sydneigh to create SaaS experiences for educators and students.Sydneigh fosters a positive and collaborative work environment from the moment we met. Her strong sense of direction inspires confidence and motivation for the team to achieve her full potential. Sydneigh is a genuinely kind and considerate person who takes the time to understand the needs of her team members and is always willing to offer support. This empathetic approach transcends into our user base. Leveraging her unique digital expertise, she unearthed subtle external factors significantly impacting our design decisions.Sydneigh will elevate any team she's on with her dedication and it would be a complete joy to collaborate with her in the future.
‍
Michelle Samson, UX\UI Designer @ CSOAF
User Dashboard for StudentsAdmin DashboardUser Dashboard for Parents
Powered by Webflow
LinkedinCodepenGithub