3P │ PUBLIC PARK PLANNER
03/2024 - 05/2024
3P is an easy to use app and web-based programme for planning urban greenspaces with AI-assisted tools and community-based park maintenance.
Programme Design // UX Design
03/2024 – 05/2024
Role: Research, Ideation, Conception, Design, Prototyping, Testing, Rendering, Community Design
Project Overview
Public parks and greenspaces are essential for public health, stress relief, living quality and air filtering. AI can help managing the connection between multiple urban factors.
The project started with creating a community-based app for inhabitants of a community to help maintain the public parks in the area with easy tasks. Design aspects from Gamification tactics should help motivating the users. Afterwards, it was extended to be used by public municipality planners and urban designers to help gathering data sets and managing data inputs. It should also help with design tasks like vegetative planning or budgeting, GIS, mapping or biodiversity planning.
User Research
Many target users wish to make planning with a tight budget more rewarding, while also keeping track of environmental data. After diving deeper, the project evolved into a manyfold project with different applications. I concentrated on a dedicated mobile app for citizens to maintain a public greenspace in their area and a web-based landscape architecture programme with AI assistence.
Pain Points
1. Usability: Easy to use AI-tools
2. Data Management: Layering Information in understandable way
3. Rewardability: Rewarding usage for community based maintenance app
User Journey Map - Persona Martha Schwartz
Dedicated Community-based App
Public Park Maintenance App
To kick off the project, I focused on the dedicated mobile app, that allows users to maintain a public park with motivating gamification aspects. The information about the parks maintenance state and live data inputs could be manged by AI, which is also a key element for the web-based planning programme. The app should be more usable for common people then a website, being able to send notifications and having easier access to start. The data from the maintenance of the users could be collected anonymously by municipality planners to keep track of the greenspace development.
↘ For the dedicated mobile app, I chose a simple hierarchical Information Architecture, but divided the functions into a top and bottom bar. I wanted to create an easy and efficient user flow by keeping the functions to a minimum. Also I included different possible paths for the navigation to increase usability and decrease possible frustrations.
↘ Creating paper wireframes, I was able to generate multiple ideas for the project. Main functions for the dedicated mobile app revolve around the community-based maintenance function. The app uses a MMORPG inspired profile reward systems to keep the motivation.
↘ For the low fidelity prototype I created several screens to broaden the range of possible interaction and connectivity. My goal was for testers to explore the prototype and reach the usability study goal through different approaches.
↘ Conducting usability studies and testing the prototype led to important insights, which helped to refine the design and increasing its usability. For this part of the project I observed, that aspects of readability and navigation were key pain points to solve, before moving on with the design.
↘ Over the course of the project, the design changed significantly with each iteration. By keeping the results of the usability study in mind and gathering feedback from peers and friends throughout the project, I was able to develop the early wireframes into a usable prototype.
↘ I used architectural master plans as inspiration for colours, shapes and typography. A clear and structured head font was to be used with a sans-serif font developed for paragraphs for texts. I also used icons from Google's Material Design archive to keep a consistent look.
↘ The high fidelity prototype includes several accessibility considerations: The final design included more easy to use functions and clear CTAs. Also, the contrast of elements and background passed WCAG AAA standards. Important buttons include icons for easier access.
High Fidelity Prototype
The user flow of the high-fidelity prototype was slightly optimised for an ideal user flow. For this part of the project, I chose a linear user flow demonstration to show a possible user flow in its entirety.
Dedicated Mobile AppWeb-based Planning Programme
AI-assisted Public Park Planning Tool
The second part of the project comprises the AI-supported and web-based planning programme for landscape architects and urban planners. The programme should make it possible to collect and manage data from various sensors in the city to help planners plan with this data on the screen. The programme should also help planners with GIS planning, biodiversity planning, budgeting, zoning and path design. Colleagues should be able to work together on projects and also access plans and meetings via mobile devices. In the end, I was able to sketch out some ideas to create a vision for such a versatile tool.
↘ The design of the Information Architecture draws inspiration from planning and 3D modeling software and websites such as Figma, Rhino 7, and Vectorworks. To manage the array of tools, a Top Bar and two Side Bars with distinct functionalities were implemented. Subsequently, employing the "graceful degradation" process facilitated the removal of elements for lower complexities to optimize the interface for mobile and tablet usage.
↘ Creating paper wireframes, I was able to generate multiple ideas for the project. The responsive website for mobile use allows users to monitor data, display projects, add comments to those projects and join meetings. It was important to assess, how such planning tools are used on different devices. Mobile devices, like phones and tablets can be used for on-site management, while desktop applications are used for active planning.
↘ The low-fidelity prototype for the responsive website is less complex and shows a matrix-like connection type. The main function of the mobile website includes the meeting function and the project overview function. Users can comment on the project plans and add simple shapes while collaborating with colleagues on the same project.
↘ Over the course of the project, the design changed significantly with each iteration. By keeping the results of the usability study in mind and gathering feedback from peers and friends throughout the project, I was able to develop the early wireframes into a usable prototype.
↘ After conducting usability studies and testing the prototype, I gained important insights to improve the low-fidelity prototype and mockups. It was important to create clearer call-to-action buttons, enlarge important elements and separate elements from each other.
↘ To keep the same visual look from the dedicated mobile app, I used the same sticker sheet for the website. A clear and structured head font was to be used with a sans-serif font developed for paragraphs for texts. I also used icons from Google's Material Design archive to keep a consistent look.
↘ However, I kept some visual elements subtler to create a more professional look for the website, as it has another usability intent. My high fidelity prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as several changes suggested by friends and peers.
↘ The responsive website had to consider the different functionalities and usage scenarios of the programme. This means that the website can be used effectively on different devices and complements each other.
↘ The desktop version of the website contains the main function: the planning programme in its full functionality. I was inspired by collaborative tools such as Figma, Miro or Spline, but also by planning tools such as Rhino, Vectorworks or Revit. The software needed to combine these aspects with a multi-layered AI assistant for managing data, generative design and machine learning.
Web-Based Tool
My Hi-Fi prototype followed the same user flow as the Lo-Fi prototype and incorporated the design changes made after the usability study as well as several suggested changes from members of my team.
Mobile Web Prototype
Impact
Urban green spaces are essential to city infrastructure, providing air filtration, public health benefits and habitat for other wildlife on a large scale. Generative AI and machine learning can be a powerful tool for planners tackling big data and diverse issues.
What I've learned
It was a pleasure to talk to experts and users and learn about their needs and problems, but also to include accessible design decisions in the process. I also enjoyed dealing with topics such as urban planning, AI tools and biodiversity.
I think AI has great potential for different disciplines and I'm excited to see how it will impact design in the long term.
Next Steps
1. Test Usability
I would test the usability of my Hi-Fi prototype again with different people to ensure ease of use.
2. Extending the prototype
I would also include other functions in the prototype, for example all pages of the information architecture.
3. Implementing AI Features
I would add more features that I thought of with the Crazy-8s and HMW questions.
