Connecting ArtCenter Students during the pandemic

Category:

User Experience

Team:

Personal Project

Timeline:

6 Weeks, Aug - Dec, 2020

Tool:

Figma · Adobe Suits

My Role:

UX/UI Designer, User Researcher, Project Manager, Prototype

Category:

User Experience

Team:

Personal Project

Timeline:

6 Weeks, Aug - Dec, 2020

Tool:

Figma · Adobe Suits

My Role:

UX/UI Designer, User Researcher, Project Manager, Prototype

Results / Impact

Results / Impact

Results / Impact

After 3 rounds of design testing and iteration, I invited 15 new participants for task-based testing. Results: 87% task success and 28% reduction in average time on task.

3

Rounds of testing

3

Rounds of testing

3

Rounds of testing

51

Total participants

51

Total participants

51

Total participants

87%

Task completion rate

87%

Task completion rate

87%

Task completion rate

28%

Time savings

28%

Time savings

28%

Time savings

Project Background

Project Background

Project Background

ArtCenter provides Common Rooms for each program that provide:


  • Academics — course tips, equipment know-how, office hours, team-ups;

  • Support — mentorship from upper-term students, peer help, quick answers;

  • Opportunities — announcements, talks/exhibitions, internships & collaborations.

Problem

Problem

Problem

Since early 2020, classes all moved online and physical common rooms closed. The informal campus network broke down.


We face scattered and slow information, time-zone barriers for international students, an onboarding gap for new students, and the loss of cross-term and alumni ties.

Challenge

Challenge

Challenge

How might we create an online Common Room that delivers the same value as the physical one, linking students and alumni to timely info, mentorship, and opportunities so everyone feels connected and in the loop?

My Approach - Research

My Approach - Research

My Approach - Research

To tackle the design challenges, I took a multi-step approach:
01

I conducted Individual Interviews with ArtCenter students, alumni, and faculty to understand their pain points and needs. I then grouped and mapped the insights to find key functions.

Why this methodology?

Helped me clarify pain points, understand needs, and set priorities.

02

Competitive Benchmarking (Feature Matrix)


I evaluated 18 commonly used apps across academic support, peer support, and opportunity discovery, using Good / Fair / Poor ratings to surface gaps and inform the scope of a virtual common room.

Why this methodology?

Students get information from many tools. By comparing them, I quickly spot what’s covered and the gaps I can design for.

03

User journey map


I analyzed the full journey and identified pain points and key needs.

Why this methodology?

It shows where users get stuck and what to fix first, helps me align features to real moments, and reduces guesswork.

04

Persona Development


I developed two primary personas (lower-term students and higher-term students) and two secondary personas (faculty and alumni).

Why this methodology?

Primary personas cover the core flows; secondary personas ensure credible answers and opportunities without over-scoping.

After I synthesized the research insights, I identified three pain points:
💬
Spontaneous Interaction

No space for spontaneous interaction

🔗
Connection Barriers

Hard to build connections across terms and with alumni

⏱️
Delayed Help

Hard to get timely help when stuck; info is scattered across tools

Solution Overview

Solution Overview

Solution Overview

Solution

AskAway is a digital space where ArtCenter students, alumni, and faculty connect, learn, and help each other. It brings updates, events, and Q&A together in one place and supports remote study across time zones.

AskAway is a digital space where ArtCenter students, alumni, and faculty connect, learn, and help each other. It brings updates, events, and Q&A together in one place and supports remote study across time zones.

Solution Overview

Solution Overview

Solution Overview

Problem: Connection Barriers

✅ Solution

I designed a map function that makes it easy for students and alumni to find and connect. Clear filters let users narrow by major, term, location or time zone, and skills. From each profile, users can send a message, ask for help, or book time, so connection feels seamless.

Problem: Spontaneous Interaction

✅ Solution

I designed a Community feature that gives ArtCenter a clear digital space to ask, answer, and hang out. The Q&A area lets students post questions and get peer answers quickly. The Topics area is organized by major for real-time chat about classes, projects, and campus life; it is intentionally more casual to spark spontaneous interaction and help students blend into the space naturally. This helps bridge gaps during remote semesters and across time zones.

Problem: Delayed Help

✅ Solution

I designed a chat feature that lets students chat privately at any time. It removes email delays, supports different time zones, and offers a comfortable space for questions users prefer not to post publicly. Students can DM peers, higher-term students, alumni, or faculty, share files, and start a quick call. This reduces delayed help and keeps help in one place.

# 1 Simplifying the Filter

Testing Feedback

Design Decision #1

Usability testing showed that design major section had 14 look-alike boxes. Participants often misclicked and could not quickly find the option they wanted. Similar labels, a long list, and high visual density increased recognition load and time on task.

Reorganize and simplify the filter, enlarge clickable areas, and reduce misclicks to shorten the time to the first valid filter.

# 2 Improving Chat Function Usability

Testing Feedback

Design Decision #2

Usability tests showed a mental-model mismatch. Chat function is under Notifications, and many participants expected the bell icon to be alerts, not a place to start conversations.

The entry also exposed only a few recent contacts, so older threads were hard to find and some users missed replies.

I split Chat from Notifications. Chat became Messages with its own menu item and unread badge, opening a full inbox with all threads.


Notifications now handles alerts and event reminders only, with “open” and “mark as read.” Using common labels and placement reduces confusion and makes messages easy to find.

# 3 Improving Readability

Testing Feedback

Design Decision #3

Testing showed the Topics section had low readability. The text was too small, line spacing was tight, and replies ran together. Users lost their place and couldn’t tell where one reply ended and the next began.

I switched to a card layout, placing each topic and reply in its own gray card. I slightly increased the type size and line height, and added more spacing between cards. Actions and counts are aligned with each card. These changes improve contrast and scannability, reduce misreads and misclicks, and make the feed easier to read.

Results / Impact

Results / Impact

Results / Impact

After 3 rounds of design testing and iteration, I invited 15 new participants for task-based testing. Results: 87% task success and 28% reduction in average time on task.

3

Rounds of testing

3

Rounds of testing

3

Rounds of testing

51

Total participants

51

Total participants

51

Total participants

87%

Task completion rate

87%

Task completion rate

87%

Task completion rate

28%

Time savings

28%

Time savings

28%

Time savings

Learning & Insights

Learning & Insights

Learning & Insights

This was my very first UX project. Looking back, I can clearly see many areas where I could have done better, yet I am still proud of it: because it marks the beginning of my journey as a UX designer. From here, I have set foot on the path of user experience design, and I will continue to grow, explore, and discover new avenues for interaction.

Awards & Recognitions

ArtCenter College of Design Exhibition Show

2020

I’m open to new challenges—get in touch.

I’m open to new challenges—get in touch.

I’m open to new challenges—get in touch.