Supporting student well-being
Designing to foster student connection
Background
The team was tasked with building a new website for APC from scratch — one that was both visually appealing and capable of clearly conveying the organization's mission and resources to students.
Role
Product Designer
Prototyping Lead
Team
4 Leads
1 Design Team
1 Developer Team
PROJECT SUMMARY
Aggie Peer Counseling (APC) is a student-led organization at UC Davis dedicated to promoting mental well-being, fostering connection, and creating a welcoming space for open conversations. Through peer support and advocacy, APC works to reduce feelings of isolation and anxiety while strengthening a sense of belonging across the campus community.
Key Insights and Objectives
Prompt. Design a new website for Aggie Peer Counseling that clearly communicates the organization's mission, program details, and resources to UC Davis students interested in joining.
The website needed to do more than inform — it needed to feel like the organization itself. Every visual and structural decision carried emotional weight, making tone just as important as content.
The client came with a strong visual direction from the start — soft palettes and nature-inspired imagery — which gave the team a foundation to build from but also required careful balance between the client's vision and what actually tested well with users.Clarity and hierarchy were critical — particularly for high-stakes content like emergency SOS resources and mental health information, where users needed to find what they needed quickly and without friction.
SYNTHESIS
Research
The research for this project was largely shaped by a direct client brief rather than broad user surveys. In their first meeting with APC, the team gathered that the website needed to cover five key areas: program details, mentor-mentee information, contact options, mental health resources, and wellness-focused activities. The client also came with a clear visual direction in mind — soft color palettes and nature-inspired imagery — which gave the team a strong foundation to build from. The early research phase made clear that the primary audience was prospective student members who needed to quickly understand what APC was, how to join, and where to find support, making clarity and emotional tone the two most critical design priorities.
DEFINE
Research Insights
Through the client's brief and early research, the team identified that the website needed to balance informational clarity with emotional warmth. Students visiting the site would likely be in vulnerable moments — seeking support, looking for community, or exploring mental health resources — meaning the design had to feel immediately safe and approachable. The client's emphasis on soft, nature-inspired visuals aligned directly with this need, reinforcing the importance of a cohesive tone across every page. The team also recognized that critical content like emergency resources needed to be surfaced prominently and intuitively, ensuring students could find help without friction.
"How might we create a website for Aggie Peer Counseling that clearly communicates the organization's mission and resources while making students feel safe, welcomed, and supported?"
Through their work with the client, the team narrowed the focus to three core needs: providing clear program information, establishing a soft and approachable visual identity, and ensuring students could easily find mental health resources and ways to get involved.
IDEATE
Feature Breakdown
During ideation, the team evaluated which content sections and features were essential to include across the site. Weighing each element against its importance to the user and feasibility within the project scope, the team prioritized content that directly served prospective student members — program details, mentor-mentee information, mental health resources, wellness activities, and clear contact options. This process helped the team stay focused and avoid overloading the site with content that would detract from its calm and accessible tone.
Sketching
INSERT IMAGE
The low-fidelity stage focused on sketching out the pages and determining what content and elements belonged where. After landing on the morning-day-night illustration concept, the team returned to the sketchpad to brainstorm three distinct hero images — one for each landing page — that would anchor the visual identity of the site. This stage was about establishing structure and content hierarchy before committing to any visual details, ensuring that the most important information for prospective members surfaced clearly and logically across the site.
PROTOTYPE
User Flow
INSERT IMAGE
The team mapped out a user flow to define how a prospective student would navigate through the site from entry to action. The flow guided users from the homepage — where they would be introduced to APC's mission and visual identity — through pages covering program details, mentor-mentee information, mental health resources, wellness activities, and contact options. The user flow ensured that each page had a clear purpose and that the path to critical information, particularly emergency resources, was direct and intuitive.
Mid-Fi
INSERT IMAGE
Moving into mid-fidelity, the team's primary focus was on balancing space and information density to create a layout that felt calm rather than overwhelming. This stage involved refining the navigation menu, determining what content to include, and using soft, rounded components to establish the gentle, welcoming tone the client had envisioned. The team then conducted usability testing with both the client and non-member users, asking participants to navigate the site and share feedback on clarity, layout, and ease of use. The results were mixed in helpful ways — users found the basic information structure easy to navigate and appreciated the modularity of the layout, but flagged issues with call-to-action clarity, content density in some modules, and confusion around certain homepage illustrations that were mistaken for navigational flow elements.
Branding
INSERT IMAGE
The design system for APC was built to reflect the organization's core tone: soft, playful, warm, and guiding. The color palette leaned heavily into nature-inspired, low-contrast hues that supported a sense of calm and relaxation while remaining readable across all UI elements. Typography paired a serif typeface for headings with a sans-serif for body text, creating clear hierarchy and accessibility without sacrificing consistency. Custom character illustrations — including cow imagery tied to UC Davis's brand identity — added a personalized and friendly touch that made the site feel approachable rather than clinical. Every element of the design system was intentional in service of one goal: making students feel safe the moment they landed on the page
TEST
User Testing
INSERT IMAGE
The team scheduled a meeting with the client and a handful of non-member users to test the mid-fidelity interface, evaluating the flow and the information included across the site. Participants were asked to navigate the site, complete specific tasks, and share their thoughts on clarity, layout, and ease of use. The team observed each session and took notes on where users hesitated or expressed confusion. Positive feedback highlighted that users could easily understand the basic information structure and appreciated the modular layout. Areas for improvement centered on call-to-action clarity, density in certain modules, and homepage illustrations that some users mistook for interactive flow elements rather than decorative visuals. These insights directly informed the refinements made before moving into the final high-fidelity designs.
FINAL PROTOTYPE AND HANDOFF
INTRODUCING: APC
INSERT PROTOTYPE
The final prototype brought together all elements of the design system into a cohesive, emotionally considered website. The soft color palette, rounded components, and custom illustrations worked together to reinforce APC's gentle and welcoming brand tone, while clear typographic hierarchy ensured that critical information — including the club's mission and emergency SOS access — was immediately visible and easy to understand. Interactive elements like forms and wellness activities were woven in naturally, aligning with the site's playful yet intentional visual language. The final design was also structured and documented clearly enough to facilitate a smooth hand-off to the development team for build-out.
Handoff Day
INSERT PHOTO
The final presentation marked the culmination of the team's work, walking the client through the complete design process from research and ideation to the final prototype. The hand-off to the development team was a key milestone, with the design system and documentation prepared to ensure a smooth and consistent translation from design to code. One area the team advocated for during this stage was a redesign of the resources page to make critical mental health information more accessible and easier to navigate — particularly for students in moments of distress. However, due to the client's preferences, the resources page was kept in its original form. The team hopes to revisit this conversation in future iterations, using ongoing usability testing data to make the case for a more accessible and user-centered layout.
REFLECTION
Key Takeaways
The APC project reinforced three core lessons. First, designing with empathy matters — when the end goal is student well-being, every decision from navigation clarity to color choice carries real emotional consequence, and usability testing proved essential in surfacing where the design was falling short of that standard. Second, a well-built design system isn't just a visual tool — it's an efficiency tool, keeping the team aligned on consistency and making the transition from mid-fidelity to high-fidelity significantly smoother. Third, collaboration under a time constraint requires intentional division of work without losing sight of the details — the team had to split responsibilities while still maintaining visual cohesion across pages, particularly in keeping each page's illustrations distinct and unique. Together, these takeaways reflect a project that was as much about learning to work as a team as it was about delivering a polished product.
Next Steps
Looking ahead, the team is committed to continuing their collaboration with Aggie Peer Counseling beyond the initial design and hand-off phase. With the site moving toward launch, the most immediate priority is ongoing usability testing with real students to catch any friction points that only surface once the product is live and in use. One area the team has already flagged for future consideration is the resources page — internally, the team advocated for a layout redesign that would make critical mental health information more accessible and easier to navigate, particularly for students who may be visiting the site in moments of distress. However, due to the client's preferences, the resources page was kept in its original form for the current version. Moving forward, the team hopes to revisit this conversation with the client, using real usage data and continued testing feedback to make the case for a more accessible and user-centered layout. Beyond the resources page, future iterations would also look to expand the site's content as APC grows — adding new program details, updated mental health resources, and additional wellness activities to keep the platform relevant and valuable to the UC Davis student community over time.