Chiachi-Liang-Product-Designer

Web Design

UI Design

Non-profit Cooperation

Taiwan Sunlight Seeding Association - CSR Innovation Matching Platform

Eduvista is a B2B educator dashboard that helps teachers and specialists monitor students’ emotional and behavioral well-being. I redesigned the Student View experience to help educators quickly identify at-risk students, understand what the data means, and take the next step through AI-generated teaching strategies, referral workflows, and printable student reports.

Taiwan Sunlight Seeding Association

Taiwan Sunlight Seeding Association

Taiwan Sunlight Seeding Association, known as TSSA, is a nonprofit organization established in 2020, aimed at creating an ecosystem of public welfare through a digital sharing platform. By matching schools, businesses, and nonprofit organizations, it allocates resources to the units that need them in the most effective way.

Project Information

My role: a solo designer, including communication with clients
Duration: 2 months, 2023/06 - 2023/07
Tools: Figma, Wordpress

My role: a solo designer, including communication with clients
Duration: 2 months, 2023/06 - 2023/07
Tools: Figma, Wordpress

Define the user, converting pain points into product usage needs.

Through the explanation from the TSSA colleagues, I learned that the primary users of their website are two groups: corporate units and nonprofit organizations. So, I conducted a brief interview with the TSSA colleagues and also had an interview with my company's public relations department to understand the user information from the corporate side. This, combined with the use of AI, helped me gain deeper insights into the users. The user pain points I organized and the corresponding product usage needs are as follows:

Users

The dashboard needed to support multiple educator roles with different levels of urgency and depth.

Teachers needed a fast way to identify students who required immediate attention.
Specialists needed deeper reports to evaluate student well-being and support intervention planning.
School administrators needed visibility into high-risk cases and follow-up actions.

This meant the redesign had to balance scanability, depth, and actionability within the same workflow.

The dashboard needed to support multiple educator roles with different levels of urgency and depth.

Teachers needed a fast way to identify students who required immediate attention.
Specialists needed deeper reports to evaluate student well-being and support intervention planning.
School administrators needed visibility into high-risk cases and follow-up actions.

This meant the redesign had to balance scanability, depth, and actionability within the same workflow.

Usability Audit

I audited the original Student View and identified four key issues.

The information architecture did not match the educator’s core workflow. The student list was placed under a tab structure that users found difficult to discover.

The filter interaction had a click-through rate below 10%, suggesting that users did not understand its purpose or value.

Important emotional and behavioral data was hidden behind secondary interactions, making it hard to scan student status at a glance.

The charts lacked contextual explanation, so teachers could see data patterns but struggled to interpret what those patterns meant in real student behavior.

I audited the original Student View and identified four key issues.

The information architecture did not match the educator’s core workflow. The student list was placed under a tab structure that users found difficult to discover.

The filter interaction had a click-through rate below 10%, suggesting that users did not understand its purpose or value.

Important emotional and behavioral data was hidden behind secondary interactions, making it hard to scan student status at a glance.

The charts lacked contextual explanation, so teachers could see data patterns but struggled to interpret what those patterns meant in real student behavior.

User Journey of Gold: Integrating the page into the original website of TSSA

Due to limitations in time and resources, this project needs to be integrated with the TSSA site itself on WordPress. Therefore, I planned the user journey by connecting the pages mentioned above into a path for users to navigate simply and naturally within the website.

This process indicates that when users enter the TSSA website, they browse partner information through the ideal website usage process to contact them. After arriving at the homepage, users can quickly enter the Partners page through the buttons on the navigation bar to browse all the nonprofit organizations and organizations that TSSA helps match; then, they can click to open a modal on the same page to view information about the organization they are interested in without needing to jump to another page; finally, through a button, users are guided to the page to fill out the matching form, allowing them to leave matching information.

UI interface and design decisions

The redesign shifted the dashboard from a data-heavy monitoring page into an action-oriented support workflow.

Before, educators could see student data, but important actions were unclear or disconnected.

After, teachers could identify at-risk students faster, understand the reason behind each student’s status, and choose a next step directly from the same interface.

#1: Restructuring The Dashboard

I redesigned the Student View around the teacher’s primary task: identifying students who need support.

The student list was moved into a clearer sidebar navigation structure, giving it stronger visual hierarchy and making it easier to access.

I also replaced the original low-performing filter with a more intuitive “Show at risk only” toggle. Instead of asking users to understand a vague filter button, the new interaction directly reflected the action teachers wanted to take.

Sorting options were also redesigned to help educators quickly surface students by well-being index or risk zone.

#1: Restructuring The Dashboard

I redesigned the Student View around the teacher’s primary task: identifying students who need support.

The student list was moved into a clearer sidebar navigation structure, giving it stronger visual hierarchy and making it easier to access.

Sorting options were also redesigned to help educators quickly surface students by well-being index or risk zone.

#2: Making Data Easier To Interpret

To reduce cognitive load, I redesigned the student table with a clearer information hierarchy.

Key indicators, such as at-risk status and well-being index, were placed at the first level so teachers could scan the list quickly.

More detailed behavioral patterns were moved into expandable rows, allowing teachers to explore deeper context only when needed.

This progressive disclosure approach helped the dashboard support both fast scanning and detailed interpretation without overwhelming the first view.

#2: Making Data Easier To Interpret

To reduce cognitive load, I redesigned the student table with a clearer information hierarchy.

Key indicators, such as at-risk status and well-being index, were placed at the first level so teachers could scan the list quickly.

More detailed behavioral patterns were moved into expandable rows, allowing teachers to explore deeper context only when needed.

This progressive disclosure approach helped the dashboard support both fast scanning and detailed interpretation without overwhelming the first view.

#3: AI-Generated Teaching Strategies

One of the most important new features was an AI-assisted strategy generator.

Instead of leaving teachers with raw data, the system translated student well-being patterns into structured teaching support.

The generated strategy included data interpretation, action plans, suggested behavioral goals, reinforcement ideas, and ready-to-use classroom activities.

I designed the output format to feel familiar to educators, similar to a lesson plan or teacher guide, so the AI response could be read, trusted, and used in the classroom.

#3: AI-Generated Teaching Strategies

One of the most important new features was an AI-assisted strategy generator.

Instead of leaving teachers with raw data, the system translated student well-being patterns into structured teaching support.

The generated strategy included data interpretation, action plans, suggested behavioral goals, reinforcement ideas, and ready-to-use classroom activities.

I designed the output format to feel familiar to educators, similar to a lesson plan or teacher guide, so the AI response could be read, trusted, and used in the classroom.

#4: Referral Workflow

For students who required additional support, I designed a referral workflow that allowed teachers to submit a case directly to the school’s specialist team.

The form carried key student context into the referral process, including student information, urgency level, reason for referral, and what the teacher had already tried.

This helped solve a critical gap in the original workflow: teachers could identify high-risk students, but there was no clear next step for professional intervention.

#4: Referral Workflow

For students who required additional support, I designed a referral workflow that allowed teachers to submit a case directly to the school’s specialist team.

The form carried key student context into the referral process, including student information, urgency level, reason for referral, and what the teacher had already tried.

This helped solve a critical gap in the original workflow: teachers could identify high-risk students, but there was no clear next step for professional intervention.

#5: Printable Student Report

I also designed a printable student well-being report for specialists, school teams, and parent communication.

The report transformed dashboard data into a structured document, including well-being overview, comparison scores, zone distribution, and recommended next steps.

The goal was to make complex student data easier to review, share, and act on across different stakeholders.

Learning and reflection

After reviewing the redesigned workflow, educators responded positively to the clearer filtering logic and action-oriented features.

“This is exactly what I need. I’ll definitely use the filters.”
— Debbie, Gen ED Teacher

“It’s much more intuitive. Now I know what the next steps are for my students.”
— Jessica, Consultant

Impact

The redesign improved the product in three key ways.

It made high-risk students easier to identify through clearer filtering, sorting, and hierarchy.

It turned complex well-being data into actionable workflows through AI-generated strategies, referrals, and reports.

It helped the team align product priorities around features that delivered the most immediate value to educators and specialists.

Reflections

This project taught me that designing for complex systems is not about showing more data. It is about helping users make better decisions with less friction.

By combining information architecture, feature prioritization, AI-assisted workflows, and close engineering collaboration, I helped transform a complex student dashboard into a clearer support system for educators.

For me, this project also reinforced what I value most as a product designer: working beyond the screen, understanding the logic behind the product, and designing experiences that help users move from insight to action.

Other projects

PWA

Claude Code

Letter Platform

Dear Stranger

Solo-Built, AI-Powered, Zero Budget — and Live

Designed and shipped an anonymous encouragement letter platform entirely independently, using AI tools for development. A side project that turns strangers' words into someone else's lifeline.

Click & View

I’m Lena, let’s work together

p4532.1995@gmail.com

I’m Lena, let’s work together

p4532.1995@gmail.com