Problem Definition

“What do students on the MSU campus need in terms of mental health support?"

Emotional support and community

Accessible resources

Real stories / peer voices

Knowing where to go when seeking help.

Decomposition

“Who Are We?” (About page)

"Who is this organization, and can I trust them?"

Downloadable guides (PDF, DOCX)

Audio mindfulness exercises

Campus support, hotlines

Face-to-face/online events and a sense of community

Real student experiences

I have broken down the major "mental health" problem into modules such as information, community, resources, stories, and participation, and given each of them a clear place in the interface.

Patter Recognition

"Card pattern"

On the Resources page, I use a title + short description + "Download" button for each guide/tool.

Events also have a similar structure: image + title + date/time/location + description.

"Consistent typography and color scheme"

Bold, large, warm colors (orange/purple) in the headings, and legible black text in the body.

All of this is the pattern recognition aspect of computational thinking:

"I solved something once, and I'm using the pattern of that solution in other places as well."

Abstraction

Modeling the student not as an individual but as a "user type"

Categorizing resources

Instead of highly technical terms, use simple concepts that everyone can understand, such as "self-care," "study break audio," "mindfulness exercise," and "peer-check menu."

I abstracted different user types as ‘MSU student seeking support’ and simplified the complex information by categorizing the resources into categories such as Downloadable guides, Audio, Campus support, and Hotlines.