TolworthWild

Discover, Connect, Rewild

Experience the Wild: Uniting Communities, Igniting Change.

Tools Used

Figma
Jira
FigJam
Illustrator
Photoshop

Team

2 UX Researcher / Analyst
1 UI Designer
1 UX Designer
2 Animators
1 Game Designer
1 Game Developer

"Welcome to Tolworth Wild, where user experience design takes center stage in our mission to connect communities with the beauty of rewilding. While not directly solving rewilding problems, our approach leverages UX design to create engaging educational materials and interactive tools. By integrating technology, we encourage people to explore and contribute to the restoration of natural ecosystems. Our website and application foster community connections, linking users with local rewilding groups and enabling them to track progress. Through thoughtful design, we aim to reshape mindsets and raise awareness, making rewilding accessible and impactful for all."

My Roles

User Interface Designer (UI)
User Experience / Interface Tester

Project Timeline

Duration: 4 weeks
Discovery & Research: 1 week
Design & Testing: 3 weeks

Mission Statement

TolworthWILD’s mission is to bring the community of Tolworth closer together and educate residents about the importance of rewilding and our environment using augmented reality.

Vision Statement

TolworthWILD’s vision is a world where global warming has been addressed, managed, and prevented, and people in urban areas are educated about global warming solutions such as rewilding and have grown closer together.

Rewilding, a visionary conservation approach, allows nature to rejuvenate, addressing the decline of species and promoting resilient ecosystems. Tolworth Court Farm's 43-hectare expanse becomes a pivotal space, ripe for rewilding initiatives. Inspired by the success of the London Wetland Centre, this project aims to emulate positive outcomes, from Exmore ponies to raptor-merlins, fostering a thriving ecosystem. Augmented reality (AR) technology, known for a 94% higher conversion rate, is harnessed through user experience design to create a mobile application. This tool educates and engages Tolworth residents, connecting them with local rewilding groups and fostering a mindset shift. The project seeks to understand residents' lives, employing a user-centric design methodology to address uncovered issues. Tolworth-wild aims to bridge the gap between people and nature, contributing to wildlife adaptation, reversing biodiversity loss, and enhancing the health and well-being of the community, positioning itself as a catalyst for positive environmental change in urban landscapes.

Research Process

Research combined online surveys and interviews for comprehensive insights. Participants, sourced online and in-person, underwent rigorous screening. Cleaned data, analyzed for insights, revealed both quantitative and qualitative dimensions. Participants underwent a thorough recruitment process, ensuring informed consent. Adherence to interview schedules and post-interview support was prioritised. Expert interviews enriched insights. Affinity diagramming was applied to qualitative data, fostering a holistic understanding of user and expert perspectives.

Diverse Participation: An online survey, reaching 38 residents of Tolworth through targeted online and in-person advertising, laid the foundation. Rigorous screening ensured alignment with product demographics, legal requirements, and participant welfare. Data cleansing and analysis revealed insights and confirmations, providing a broad quantitative overview.
In-Depth User Insights: Six user research interviews delved into qualitative aspects, capturing nuanced perspectives of potential users in Tolworth and surrounding areas. A meticulous recruitment process, including participant screener, information sheets, and informed consent, ensured informed participation. Adherence to schedules and post-interview support demonstrated commitment to ethical research practices.
Expert Perspectives: Two expert interviews, featuring a PhD candidate in rewilding and tick-borne diseases and a rewilding sanctuary professional with climate conference expertise, brought specialized insights. Following a structured process akin to user research interviews, this expert input enriched the overall understanding. The application of affinity diagramming to qualitative data, gathered through audio recordings and transcripts, further enhanced the research depth and breadth.

"Crafting Solutions: Unveiling User Personas and Strategic Insights in the Define Stage"

In the "Define" stage, human-centered data from the "Empathize" stage is synthesized to understand and share core user problems effectively. Artefacts, derived from extensive analysis, form the basis for an actionable plan. The culmination of this synthesis includes four archetypical user personas and narrative scenarios. These personas, ranging from the Green family to a climate change enthusiast like Dr. Rob Foster, represent larger user groups like local families, dog walkers, young adults, and environmental enthusiasts. Despite differing motivations, common pain points emerged, highlighting issues such as limited access to natural spaces and mental health concerns. This unified understanding led to innovative solutions, such as a zonal map for the rewilded area, catering to diverse user needs within the community. The "Define" stage thus lays the groundwork for targeted problem-solving and strategic planning based on empathetically derived insights.

"Navigating the Wild: Customer Journeys for Enhanced Engagement in Rewilding Initiatives"

The project's customer journey maps intricately chart the pathways users traverse in engaging with rewilding and environmental activities. Four distinct maps, tailored to individual personas, illuminate key stages, actions, stories, touchpoints, emotions, and pain points encountered on their rewilding journey. By visualizing these journeys, the team gains a holistic understanding, identifying areas for enhancement and solutions to discovered pain points. A critical revelation was the challenge during searching and planning stages, prompting targeted efforts in subsequent project phases. Events, communities, maps, and other features were introduced to streamline these pivotal stages, ensuring a seamless and enriched user experience.

"Empowering Solutions: User Stories as the Catalyst for Human-Centered Development"

User stories serve as the narrative backbone, offering informal yet powerful insights into features from the end-user's perspective. These stories illuminate the value created for customers by directly addressing their needs and pain points. By distilling complex requirements into concise tickets, user stories guide the team in crafting solutions. This streamlined approach not only expedites design and development cycles but also infuses them with human-centered heuristic insights, fostering a deeper connection between the project and the users it aims to serve.

"Crafting Excellence:

A UI Designer's Journey in TolworthWild's Evolution"

As the sole UI designer for the TolworthWild project, I took charge of initiating the application's concept and crafting the final user interface along with related artifacts. My responsibilities included creating a comprehensive site map, style guide, UI components, iconography, and developing and testing paper, mid-fidelity, and high-fidelity prototypes. In addition to UI design, I actively contributed to various departments, participating in research, analysis, and UX design initiatives.

The collaborative work process began with collectively evaluating research findings and conceptualizing the application's aesthetics and features. Regular sprints ensured continuous communication and alignment within the group, facilitating the rapid translation of ideas. From testing paper prototypes on Marvel to developing a mid-fidelity prototype using Figma, our project evolved iteratively. The culmination of efforts was a fully realized high-fidelity prototype, showcasing our cohesive teamwork and dedication to delivering a user-centric product.

"Navigating Excellence: Unveiling the Comprehensive Site Map for Seamless App Exploration"

I meticulously crafted the site map to orchestrate a visual blueprint of the app's comprehensive features, ensuring a clear and organized representation of its structure. This roadmap outlines the navigation flow, ensuring seamless access to essential functionalities for users. Every feature, from rewilding events to community engagement and educational resources, was carefully placed to enhance the user experience and promote ease of interaction within the app's dynamic landscape.

"Sketching Success: Crafting User-Centric Solutions Through

Low-Fidelity Prototypes"

I initiated our project's exploration of user interface solutions by creating low-fidelity prototypes, visualizing the forthcoming digital solution through paper sketches cost-effectively. These initial representations allowed for early testing of ideas, engaging three UX students in an informal interactive session. This collaborative testing approach enabled iterative improvements, solidifying decisions on layout, page content, and navigational flow. The low-fidelity prototype marked a crucial phase, establishing the groundwork for refined design choices and emphasizing a user-centric approach to our project's development.

"Harmony in Design: Crafting a Unified Visual Identity Style Guide"

Colour Palette: I meticulously selected the color palette to establish a harmonious and serene visual identity across all application elements. I chose Arsenic green (#334452) as the primary color, symbolizing nature and tranquility. I selected complementary shades, including Patina green (#61988E), Gainsboro grey (#D9D9D9), and White, to enhance the overall calm aesthetic. Tertiary colors like Gossip green (#9ACF75) and Bittersweet red (#F76363) added depth and versatility to specific areas. This carefully curated palette reflects my commitment to creating a visually cohesive and calming user experience.

Typography: I chose "Montserrat" as the font type for this project, seamlessly blending traditional and modern aesthetics. Its subtle, serene feel aligns with our application's overall design ethos. The font's versatility enabled me to make nuanced distinctions in font sizes across different features and sections, contributing to a cohesive and composed visual presentation throughout the application interface.

Logo: After finalizing the color palette and typography, I created the logo for this project using Adobe Illustrator. Seamlessly integrating the fixed color scheme's primary and secondary hues, I ensured a cohesive visual identity. With the branding of TolworthWILD, I aimed to instill the brand’s mission, vision, ethos, and target audience, representing nature, community, and technology unified as one in a distinguishable, memorable, and scalable manner. Additionally, I designed the logo to be adaptable, allowing users to personalize their icon display by choosing from various color variations, adding a dynamic and engaging element within the application.

Iconography: I intricately crafted the iconography for the AR experience in this project to serve as a visual cue, enhancing user interaction. I designed customized icons with meticulous attention to detail to facilitate intuitive navigation. Recognizing the challenge of text-heavy interfaces, I curated these bespoke iconography elements specifically for the application, ensuring a cohesive and user-friendly visual language throughout the user interface.

"Evolution to Excellence: The Journey from Iterative Design to High-Fidelity Prototype"

I transformed the high-fidelity prototype, a culmination of iterative design and rigorous testing, into an interactive reality using Figma. I seamlessly blended wireframe layouts with the meticulously crafted style guide and components, resulting in an interactive and navigable representation of the product. The integration of AR implementation in the code elevated this prototype to the status of the final MVP application, reflecting my commitment to cutting-edge technology and user-centric design.

This final version of the prototype underwent numerous major and minor iterations, each informed by valuable user feedback obtained during testing phases. I incorporated animated elements into the high-fidelity prototype, adding a dynamic layer to the user experience. I meticulously built the remaining screens, ensuring a smooth and cohesive navigation experience from the initial stages to the final product. The creation of a high-fidelity wireframe followed, featuring interactive wireframes that seamlessly integrated all screens, allowing users to navigate the application seamlessly from start to finish. This exhaustive process exemplifies my dedication to delivering a polished and user-friendly application experience.

"Strategic Testing for Excellence: Ensuring Usability, Emotional Resonance, and Accessibility"

I led the testing phase in the TolworthWild project, which played a pivotal role in refining potential solutions based on human-centered user feedback and evaluation. I conducted three comprehensive evaluations, including formative, summative, and accessibility assessments, to ensure the product's usability, accessibility, and emotional resonance with users.

For the summative evaluation, I chose valence testing, involving two participants providing positive and negative reactions to the product. This process generated valuable insights, highlighting the application's structured design, user-friendly navigation, calming aesthetic, and informative content. However, feedback indicated a need for early onboarding guidance and adjustments to button and icon sizes, which I successfully addressed in subsequent iterations.

I facilitated usability testing sessions with two participants performing specific tasks, producing performance data on key metrics such as time on task, task outcome, errors, assists, and overall satisfaction. This detailed analysis identified potential problem areas, informing further refinements to enhance the user experience.

Ensuring accessibility for users with visual impairments, a contrast evaluation of the primary color palette in the high-fidelity prototype was conducted. The palette passed WCAG AAA rating, affirming the product's adherence to the highest standards of visual accessibility regarding contrast and color usage. These robust testing procedures showcase the project's commitment to delivering a polished, user-friendly, and inclusive application experience.

"Learnings Through Collaboration: Insights and Reflections on the TolworthWild Project"

Throughout the TolworthWild project, a cohesive and disciplined approach guided the team, ensuring industry-leading tools were embraced across disciplines. The adoption of Figma, FigJam, Autodesk Maya, Mudbox, Adobe After Effects, Photoshop, Unity, Microsoft Visual Studio, and AR Core facilitated seamless collaboration and knowledge sharing. The commitment to literature and principles in user experience design, animation, and game development established a foundation for best practices.

Adhering to the Stanford Design Thinking model and implementing the Scrum framework proved instrumental. Despite a minor learning curve, these methodologies fostered effective problem-solving and workflow organization. Iterative cycles and regular review sessions with users and stakeholders refined the MVP application, showcasing the team's adaptability.

The design rationale emphasized compatibility, with the team relying on industry-leading tools for each role, ensuring open communication about tool choices, and consulting official documentation. This approach preemptively addressed compatibility concerns and promoted a high standard of work, with any deviations corrected in subsequent sprints.

Teamwork played a central role, with effective communication through Microsoft Teams and weekly meetings. Challenges arose due to conflicting schedules, leading to innovative solutions like leaving textual reviews in meeting chats. Despite these hurdles, the team's commitment to close collaboration resulted in a unified, polished MVP product. Reflecting on the project, key learnings emerged from embracing structured processes, meticulous design rationale, and resilient teamwork, establishing a foundation for future collaborative endeavors.

"Charting the Path Forward:

Future Works and Concluding Reflections"

While the TolworthWild project successfully achieved all its initial aims and objectives, there exist opportunities for further enhancements and improvements should the project scope be extended.

The envisioned future works encompass diverse aspects:

• Designing and developing for both Android and iOS platforms.

• Complete integration of the UI with the AR reality implementation in the code. • Ongoing testing and research on the AR implementation through focused user testing sessions and iterative improvements.

• Enhancing personalization and customizability, ensuring the product is accessible and enjoyable for a diverse user base.

• Field-testing the product at the Tolworth Court Farm site, ensuring it aligns with the intended use case setting.

• A final soft launch using members of the public at Tolworth Court Farm for comprehensive testing and iteration.

• Presentation and demonstration of the final releasable product to stakeholders for valuable feedback.

• Launching the product on the App Store and Google Play Store for wider accessibility and user reach.

In conclusion, the project's success lies in its adherence to the Stanford Design Thinking model and Scrum framework. These methodologies empowered the team to navigate the challenges of an unfamiliar problem domain, resulting in an MVP product crafted with a user-centric and heuristic approach. Satisfying user testing outcomes and subsequent refinements through iterative cycles underscore the project's adaptability and commitment to quality. The identified future works present a roadmap for the product's evolution to a releasable, marketable, and scalable level, providing a comprehensive foundation for continued development.

Thank you 🙏 for looking into my case study.

Your time and engagement in exploring the journey of this project are truly appreciated.

Interested in collaboration? Feel free to contact me -- I look forward to exploring potential opportunities with you!