Hike Finder
The Washington Trails Association (WTA) is a non-profit committed to preserving and promoting hiking trails across Washington. Through volunteer efforts and education, WTA ensures everyone can enjoy safe and well-maintained outdoor experiences while fostering a connection to nature.
This quarter-long project involves refining the visual system for the Washington Trails Association (WTA) based on secondary research and designing a high-fidelity mobile interaction flow. The flow aimed to enhance user experience on WTA's mobile platform. The project culminated in creating a brand book that compiles the refined visual elements, including logo, color scheme, typography, and mobile flow.
Introduction
Research
Planning
My aim for the project was to create a more intuitive and enjoyable mobile experience for hikers and outdoor enthusiasts using the WTA's platform. To begin, I delved into understanding the WTA's mission and values. Their commitment to enabling outdoor exploration and connecting individuals with Washington's natural wonders provided valuable insights into the emotional aspect of their brand. Recognizing the primary audience as hikers and the secondary audience as individuals seeking hiking information would inform my design choices, ensuring that the solution would cater to their needs.
Thus, through an in-depth analysis of the current mobile website, I identified several pain points that users encounter. The search process for finding hikes was cumbersome due to multiple steps, a lack of findability for the "find a hike" feature, and difficulty in interacting with the map. Users also spent considerable time parsing through individual hikes.
Hike finding flow on the website
Design
Process
Based on the pain points identified, I crafted wireframes to address these issues. I streamlined the user journey, reducing the number of steps required to find a hike. I placed a prominent "Find a hike" button on the main page to enhance findability. Applying principles of proximity and order, I grouped buttons on the home page and menu to create a cohesive layout that guides users intuitively.
My early wireframes transformed the search process by introducing clear entry fields and providing an option to switch to a map view. This empowered users to choose their preferred search method. I also condensed the presentation of hike options into a single screen with succinct summaries, complemented by icons for rapid comprehension. This alleviated the issue of having to scrutinize individual hikes one at a time.
Lastly, I integrated design principles such as drop shadows on clickable elements to establish a consistent visual pattern and prompt users to take action. The design language was carefully extended across the interface, maintaining uniformity and aiding user recognition. To cater to the emotion-driven nature of outdoor exploration, I planned for the color palette and visual elements to evoke feelings of friendliness, nature, and community.
Low-fidelity wireframes with annotations
I began to transition from wireframes to high-fidelity designs, focusing on refining the visual system and interaction flow for finding a hike. This endeavor aimed to bring the WTA's digital platform to life through typography, imagery, color choices, and enhanced composition.
-
Home Screen Transformation: The home screen welcomes users with an image that resonates with nature enthusiasts. The "Find a hike" button, central to user engagement, was visually prominent. By employing drop shadows, I ensured the consistency of the visual language that prompts action.
-
Enhanced Search Page: Redefining the search experience, I streamlined the interaction by having clear entry fields. Furthermore, I introduced a map toggle feature to cater to diverse user preferences, making information retrieval more engaging and efficient.
-
Hike Selection Screen: The heart of the user journey, this screen aggregated hike options into one cohesive view, significantly reducing time spent parsing through hikes individually. Each hike was accompanied by a summary and icons to expedite decision-making.
-
Consistent Visual Elements: Throughout the high-fidelity designs, I maintained the cohesion of visual elements. The typography, color scheme, and imagery resonated with the WTA's brand, evoking feelings of camaraderie, adventure, and natural beauty.
Proposed flow with high-fidelity mockups
Evaluation
Brand Book
In the journey to refine the user experience, I reached a pivotal phase – the creation of the brand book. This comprehensive guide encapsulates the refined visual system, interaction design, and strategic decisions that collectively contribute to a cohesive and impactful user experience on the WTA's digital platform. I delved into understanding the essence of the WTA – an organization committed to promoting exploration and connection with nature. With these insights, I aimed to channel the brand's mission into the visual elements of the brand book.
Design process presentation
What I Learned
Throughout the project, I gained a spectrum of valuable skills, mastered essential tools, and internalized key lessons that have significantly enriched my UX design journey. In essence, the WTA project illuminated the transformative power of design. It taught me the synergy between empathy, strategy, and creativity, while honing my skills in crafting user-centric experiences.
-
Strategic Wireframing: I developed proficiency in strategic wireframing. Crafting streamlined user journeys and reducing complexity while retaining functionality taught me how to distill ideas into impactful designs.
-
Visual System Refinement: My proficiency in refining visual systems saw marked improvement. I successfully translated the WTA's mission into visual elements, a crucial skill for creating identities.
-
Figma: My proficiency in Figma soared as I created high-fidelity designs and interactive prototypes. I became adept at leveraging its features to execute my design visions effectively.
-
Visual Composition: I refined my ability to balance visual composition, ensuring seamless user interactions across different screens and maintaining consistency throughout the brand book.