Undergrad Service

Despite the efforts of Stanford's Haas Center for Public Service, fewer than 30% of undergrads commit to a service project during their time on the Farm.

As a team in Julie Stanford's service design course, we embarked on a quarter-long quest to design a tech solution aimed at increasing student volunteering.

Owning the full process.

I treasure this project as my first deep dive into UI/UX. For educational purposes, we owned the full process from needfinding to high-fidelity wireframes.

We took a service design approach, meaning our solution aimed to solve problems for all stakeholders. Of the work presented, I was directly responsible for research on Haas partners, worked with our team of 6 on needfinding synthesis, and collaborated with the wonderful Johnson Song on UI/UX.

Timeline: March - June 2019

Needfinding Writeup

Design Writeup

Investigating the 3 actors.

In order to tackle such a broad topic, our team split into thirds with each subgroup investigating a different "actor" in the system.

The 3 important actors that we identified were Stanford students, employees at the Haas Center for Public Service, and Haas partner organizations.

As mentioned, I was responsible for researching and interviewing people from Haas partner organizations.

Key Quotes: Stanford Students

"I stumbled upon Dosti through an e-mail when I was worried about summer opportunities."

"It's hard to commit continually when you can't predict... schedule-wise or work-wise."

"You have to do a bunch of workshops [and] meet with a faculty mentor... I don't really think they're very helpful."

Key Quotes: Haas Partner Organizations

"We rely heavily on word of mouth [to recruit]... [Haas] posted it on their newsletter but we never collaborate."

"Stanford students are so busy and... they seem committed to it, but it's hard to keep people committed."

"I had a hard to time understanding [how to] structure incentives to give to [student volunteers]."

Key Quotes: Haas Staff

"My favorite part is when students come in and... need help with a public service idea and we get to unpack that."

"I become aware of frustration of students by having individual conversations with them - when they trust me."

"[Students] are thinking about how they can share their talents... It's interesting to see how they approach solving problems."


Grounded theories and journey maps.

After interviewing these stakeholders, we synthesized our findings in a group affinity map which helped us produce a grounded theory and journey map for each stakeholder group.


Grounded Theory: Stanford Students

The student volunteering perspective breaks down into 3 categories.

Motivations: "What will look good on a resume?"

Stanford students are always thinking about career development, and expect extracurriculars to help them achieve their goals.

Service abroad = study abroad.

Service abroad is a supplemental opportunity in a student's education if their schedule doesn't allow for a study abroad quarter.

Community service is low priority.

Students already balance education, social life, and responsibilities. They value community service, but when their schedules fill, service is cut first.

Journey Map: Stanford Students

This map illustrates the time constraints and priorities of Stanford students.

Created by Caroline Willis, who was responsible for our student research.


Grounded Theory: Partner Organizations

We address recruiting and how partners view student volunteers.

Orgs expect and need long-term commitment.

Organizations invest a lot of time and resources training volunteers.

Orgs are either volunteer-centered or mission-centered: they rely on volunteers to operate or they function with quick turnover in mind. The former is less sustainable.

Mismatch in understanding student motives.

Org leaders often pursue careers in service because of past inspirational experiences.

But due to their altruistic motivations, they struggle to conceptualize student motivations for volunteering. This makes recruiting more challenging.

Journey Map: Partner Organizations

This org leader's journey displays the development of her views on service, and helps explain how her perspective creates barriers for understanding what motivates students to volunteer. Created by me, Kristina Inouye.


Grounded Theory: Haas Staff

These actors fill two primary responsibilities: partnerships and execution.

Creating opportunities.

Staff work with orgs, students, and faculty to add new opportunities.

This entails outreach to find potential projects and then the development of these opportunities in conjunction with students, faculty, and organizations all within ethical service guidelines.

Executing service projects.

Haas staff are responsible for more than just student-organization connection.

While the best part of the job is working with students 1-on-1, most often, the work is logistical ‐ hosting workshops, filing paperwork, etc. This mismatch causes the work to feel less rewarding.

Journey Map: Haas Staff

This staff member's journey helped us understand the misalignment in what Haas staff want to do versus what they actually do. Created by Johnson Song.

Key Insights

Objectives and pain points.

Each actor has an objective but faces barriers to get there. Drawn on my iPhone...



Volunteer while still achieving career and academic goals.


Service is low priority due to "more beneficial" other commitments.

Partner Organizations


Establish continuous relationships with students for long-term service.


Struggle to find aligned students who value selfless, committed service.

Haas Staff


Support student careers in public service by exposing them to volunteering.


Low student turn out and unfulfilling logistical work dominating their schedules.

Aha Moment

The core problem is misalignment with student ambitions.

The pain points described by partner orgs and Haas staff are symptoms of a core student problem: public service is low priority on the list of student extracurriculars.

How might we help students find opportunities that integrate their academic interests, career goals, and desire to serve?

Ideation: Conventional to Dark Horse.

We conducted multiple rounds of sticky note ideation as a team. Round 1 we unleashed our "top of mind" ideas and then went for more out-of-the-box concepts in a "dark horse" round 2.

Below is a small selection of our favorite ideas from this brainstorm.

Nose Dive
(Guilt Tripping)

Students are rated with a "social responsibility meter" - adapted from a Black Mirror episode.

Dorm Service Trip

Frosh dorms go on trips to Yosemite annually. We propose adding a service trip through Haas too.

Pop-up Service

Spontaneous service opportunities on campus that occur during less busy times.

Choosing an Idea

For the sake of brevity, I won't discuss our rationale in selecting our final concept; however, you can read about that process (experiment prototypes, more journey mapping, feedback) on these pages of our documentation.

Interest-aligned, short service opportunities.

App design process below!

Exploring comparators.

As a starting point, we analyzed apps and websites that our target population (Stanford students) regularly uses to find patterns and understand where we might fit into the technology ecosystem.

Comparator Studies and Analysis

We observed students using Facebook, Handshake, and Carta.

Nits vs. Needs Analysis

Observations from these studies that we could apply to BiteSize.


Sketching prototypes.

To lightweight explore how our ideas might come to life, Johnson and I created some rapid sketching prototypes. We completed a round of "Crazy 8s" and then selected certain ideas to explore with more detailed sketches.

Round 1: Crazy 8s

Left: By Johnson Song; Right: By my left hand... my right wrist was injured.

Round 2: Going Deeper

Fleshing out ideas from Crazy 8s. Sketches by Johnson, the rest by my injured self.

Final Two Concepts

AI sprite vs. Search + filter?

Going into prototyping, we were torn between doing something traditional or something new and fun. So we tested both!

Merging ideas!

After testing each paper prototype, we realized that both had merits and drawbacks. Students were delighted by sprite recommendations, but wished they could do more thorough searching on their own. Alternatively, the traditional search + filter felt comprehensive but lacked flavor.

In the end, we merged the two into a hybrid model.

Medium Fidelity Wireframes

Used for RITE testing to optimize our UX.

See our testing iterations here.


Visual Design: Stanford, but with a pop.

After 3 rounds of RITE testing, Johnson and I felt confident in our wireframes and decided to move into visual design. We started by building mood boards and style tiles, then played with the integration of Stanford branding, and finally applied our ideas to the screens we made.

For the sake of brevity, I only include the content we took final inspiration from, but you can see all of our explorations here.

Mood Boards

Stark neutrals with pops of color.

Final Style Tile

Back when we knew nothing about color theory or accessibility...

Visual Design Wireframes, Spring 2019

The project that we submitted. I re-worked the visual design as a personal exercise in 2020.

Final Mockups, 2020

Quick, interest-aligned volunteering, by BiteSize.

Once I learned more about visual design, I decided to re-do these mockups as a personal exercise to see my own improvement.

Tell us about yourself during onboarding.

We use onboarding to build a user's volunteer profile. This includes discussing past volunteering and work experience, interests, skills, and course work. We use this information to provide weekly personalized service recommendations.

Get weekly recommendations or browse on your own.

With our hybrid model, users receive weekly personalized recommendations for low-effort service exploration and they can use our search + filter approach for an in-depth view of available opportunities.

More details sets clearer expectations.

Most Haas listings mention the organization and maybe the volunteer's responsibilities; however, there is little on the actual experience and expectations. We include videos, contact info, student interest, and past student reviews.

Big takeaway: Design is a toolbox.

Although I had taken an intro to design thinking and user experience class prior to this one, I consider this to be my first grasp of what design entails.

When learning design thinking and user experience, it can seem like a prescribed methodology, but this project showed me that every project will be different and you have to employ the tools that will help you move forward.

Big thanks to my project team as well as the teaching team for such a rich learning experience!


Up Next