PROBLEM STATEMENT
Growing Hope currently lacks a centralized and accessible way to share information about their mission, programs, and amenities. As a result, visitors and volunteers struggle to gain a comprehensive understanding of the farm’s resources, events, and opportunities, limiting their engagement and participation.
PROJECT OBJECTIVES
01) Research
Our team discovered that the farm's physical space effectively communicates Growing Hope's mission to new visitors, though there's a desire for clearer wayfinding and signage to enhance the experience.
CORE STAKEHOLDERS
RESEARCH METHODS
INSIGHTS
We synthesized insights from interviews, contextual inquiries, and surveys using an affinity diagram in FigJam. By organizing participant quotes and key findings into recurring themes, we identified insights that later informed our UX requirements.
The map should utilize a thoughtful information hierarchy that allows users to toggle or filter between practical details and educational content.
🗺️ Clarity with Wayfinding
The interactive map should facilitate intuitive wayfinding with clear labeling and signage of visitor-accessible areas, entry points, and pathways.
🌾 Interactive Experiences
Visitors are drawn to visually engaging and interactive experiences. The map should highlight these features with illustrations or pop-ups to encourage exploration.
📄 Digital & Physical Accessibility
The interactive map should make it easier for all community members to learn about and interact with the farm, regardless of digital literacy.
USER PERSONAS
Based on the insights from our research, we created user personas to better understand our target audience's motivations, pain points, and behavior.
UX DESIGN REQUIREMENTS
The user personas guided the creation of the UX Design Requirements, where we determined the most important features to include in the solution.
✅ Must Have
Clearly divided garden sections
Denote private vs public spaces
Highlight community spaces
Note areas for visitor interaction on the farm
👍 Nice to Have
Accessibility markers
Context on Growing Hope’s mission
Details about plants and gardens
02) Design Iterations
Our iterative design process involved unfiltered ideation, low-fidelity sketches, mid-fidelity wireframes, and multiple rounds of user testing and peer reviews to refine our interactive map prototype. Guided by our UX requirements, we prioritized usability, accessibility, and a clean backend interface for the client.
SKETCHES
Our unfiltered ideation session began by compiling our Must Haves. We converted the requirements into questions to prompt our sketches. Each person created two sketches in response to each prompt. We then conducted dot voting, narrowing it down to the most successful two or three images per prompt.
LOW FIDELITY
We created a digitized version of an overhead image of the farm, which went on to inform our wireframes.
MID FIDELITY
After receiving feedback from our client and peers, we decided to use a mix of whitespace and lines to denote pathways on the farm to inform users of where they are encouraged to walk.
We gathered feedback from peer evaluations and concluded that a vertical orientation, outlined walkways, and color-coded sections were much clearer and provided more context to the organization of the farm. We experimented by using numbers, titles, and both.
IMPLEMENTATION
After experimenting with various map-making platforms such as MapMe, Drawpoint, and Image Map Pro, we decided to design and implement the map using Framer, a no-code website builder. We utilized their Content Management System (CMS) so that the client is easily able to update the content within.
03) Evaluation
We conducted 15 usability tests in our evaluation phase, with the objective to evaluate if users can understand labels, icons, and legends without confusion, understand key facts about areas, and efficiently plan their routes. We aimed to identify pain points in wayfinding and information retrieval across both map formats.
METHODS
04) Final Designs
Visit Digital Map!
By modifying some of the interactions on the digital prototype and improving the layout of the physical map based on feedback from our usability tests, we created a more approachable, intuitive, and inclusive visitor experience for a wider audience.
MAP HOMEPAGE
DETAILED DESCRIPTION OVERLAY
PHYSICAL MAP
05) Documentation
HIGH LEVEL INTERACTION MAP
The Interactive map is nested in the Farm & Gardens page of Growing Hope’s website. This flow is indicated in the high-level interaction map, as well as the pages the user can visit within the map.
USER FLOW
The detailed user flow shows how a user might go through the digital map.
DETAILED PAGE SPECIFICATIONS
The detailed page specifications explain to the developer what should happen when a user clicks/taps/swipes/etc. on an interactive element to ensure nothing is left open for interpretation.
06) Reflections
🌱 It was amazing to work with the Growing Hope team for my UX Design capstone! I learned so much about taking a project from prompt to publish while considering client requirements and stakeholder needs. I enjoyed engaging with the Ann Arbor and Ypsilanti community while conducting research and evaluation, and furthering my technical knowledge of map-designing platforms during the design phase!
🍀 While there were some constraints during the project, we were able to publish the digital map in website format & print physical copies for lamination and reuse at the farm. The map is now ready to be updated as the farm evolves and I am excited to see how it impacts Growing Hope's community!
