Whitney Speck
Phil Mendez
Rena Shen
Ying Wang
Xi Zhang
Ushio Wang
Demo
Screen Breakdown
Filter by Task
Users can filter tasks from a predefined list.
Filter by Distance
Both the list and map views display nearby tasks based on geographic or manually entered locations via the search bar.
Map Regions
Map quadrants align with Dearborn’s elementary school boundaries, leveraging an existing system for matching volunteers to tasks based on residents' locations.
Remind Group Chat
After signing up for a task, volunteers are connected to a supervisor through a Remind group chat. This familiar tool, already popular with high school students and organizations, was recommended due to resource and feasibility constraints.
Privacy Protection
Contact details and house addresses remain hidden until volunteers are confirmed for an event, ensuring privacy.
Volunteer Journey Tracking
Track completed hours, projects, residents helped, and earn achievement badges.
Exportable Profiles
Volunteers can export their profiles as PDFs for resume verification or sign-off purposes.
Upcoming and Past Events
View upcoming events with details like location and required hours. Access past events, including activity reviews and group participation.
Task Filter
Displays a predefined list of tasks with an "Other Tasks" option for unlisted needs, ensuring accessibility and highlighting overlooked community needs.
Distance Filter
Limits task searches to Dearborn, MI, allowing volunteers to filter activities based on proximity to a specific address for convenience and accessibility.
DESIGN DECISIONS
Designing the Frames
This is a simplified flow of our screen creation process.
I created the last frame post-class completion. The profile header took up over 50% of the viewable screen, so I restructured it to bring more attention to the cards and improve the information architecture of this page.
To better reflect the user demographics of Dearborn, I replaced Emily with Yasmin. Dearborn, Michigan, has the largest Arab population in the US, so I wanted the prototype to honor this.
Sketches and Lo-fidelity Prototyping
A compilation of sketches made by Ying, Xi, and I. These were our initial layout variations that focused on key user needs, such as the ability to track service hours through the user profile.
User Flow
The original paper method, developed during a sticky-note brainstorming session with stakeholders. I expanded the paper to a digital prototype, detailing key pages and features.
Exploring Variations
I tried out many different color variations with the color palate, card layouts, and poster design, before landing on the versions used in our final design.
My priority when iterating on the designs was to make features simple, easily scannable, fun, and to highlight core information.
Card Finalization
Ying and I refined the task card designs to balance key user information with visual appeal effectively.
Branding
The primary colors align with the Mayor's Service Corps branding guidelines. While not final, these colors were approved for the prototype and ensure at least AA color contrast compliance.
We chose the MITR sans-serif typeface for its accessibility, legibility, and friendly, approachable style.
Activity Icons
Fun icons (e.g., the snowman) in the bottom right corner allow users to quickly identify activity types.
Yellow Heart
A save icon inspired by the Mayor's Service Corps logo reinforces the brand identity.
Additional Details
Cards include materials needed, estimated task hours, activity location, and required volunteers.
Poster (Advertisement / Billboard Style)
The poster I designed, alongside our prototype and video, won $500 and 2nd place for Collaboration/Teamwork at the University of Michigan School of Information 2023 Student Poster Exposition, competing against 100+ projects with 300+ attendees.
We also showcased our work to stakeholders during the Civic Interaction Design Expo.
Constraints
How to account for 120,000 users?
We designed a system for 120,000+ Dearborn residents, balancing the needs of: 1) Service Requesters 2) Service Providers 3) Service Administrators, each with varying accessibility concerns, demographics, and urgency.
UX Research
Now-Near-Far Framework
Because of the time constraints, we adopted the "Now-Near-Far" model to streamline our process from conceptualization to near implementation.
Now: An overview of the current user flow/work system in place.
Near: Quick & easy deliverables that can be implemented right away.
Far: Hi-fidelity deliverables that will act as a framework for future implementation.
Work Models: How the Mayor's Office Managed Volunteers at the time of our research
This video and the resulting whiteboard is a visual demonstration of the single task: "How does the Mayor's Office currently send volunteers to shovel snow on a snow day?"
Phil and I brainstormed with our client. We used Business Origami to analyze the people, buildings, network channels, and communication methods involved in the task above.
Whiteboard work-model for how the city currently manages volunteers on a snow day.
Digitized deliverable of the whiteboard.
Contextual Inquiry and Ethnographic Affinity Analysis
Analysis of our initial stakeholder interview data compiled into an affinity diagram. An integral part for defining the scope and constraints of the project.
Outcomes
Presentation of our Solution at our Civic Expo
So What's Next?
My team recently got the EXCITING news that the prototype is being developed!
A team of Software Engineers from the Mayor's Office partnered with Google to build this project. I can't release specific details yet, but I will continue to work with our partners to oversee this handoff, and discuss the design decisions and research.
And finally, here are some comments that my team wrote for me :,))
