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
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.
"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."
"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]."
"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."
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.
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.
This map illustrates the time constraints and priorities of Stanford students.
Created by Caroline Willis, who was responsible for our student research.
We address recruiting and how partners view student volunteers.
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.
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.
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.
These actors fill two primary responsibilities: partnerships and execution.
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.
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.
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.
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.
Students are rated with a "social responsibility meter" - adapted from a Black Mirror episode.
Frosh dorms go on trips to Yosemite annually. We propose adding a service trip through Haas too.
Spontaneous service opportunities on campus that occur during less busy times.
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.
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.
We observed students using Facebook, Handshake, and Carta.
Observations from these studies that we could apply to BiteSize.
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.
Left: By Johnson Song; Right: By my left hand... my right wrist was injured.
Fleshing out ideas from Crazy 8s. Sketches by Johnson, the rest by my injured self.
Final Two Concepts
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.
Used for RITE testing to optimize our UX.
See our testing iterations here.
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.
Stark neutrals with pops of color.
Back when we knew nothing about color theory or accessibility...
The project that we submitted. I re-worked the visual design as a personal exercise in 2020.
Final Mockups, 2020
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!