PureView
An app to tackle water pollution issues within waterways…
Technology Used: Figma, Adobe Illustrator
Duration: 7 Months
Pureview is a mobile application specifically crafted for young adults, targeting the mitigation of plastic pollution in waterways. The app's primary focus lies in tackling water pollution problems within the Lake Parklands of Forest Lake, a suburb situated in South Brisbane.
Planning
Brianstorming
Firstly, following my tour of Forest Lake's Lake Parklands, I conducted a brainstorming session to kickstart the development of PureView for a young adult audience. I initiated a mind map to generate ideas for potential features in the prototype. During my visit to the Lake Parklands of Forest Lake, I noticed a variety of debris scattered across the area, causing adverse effects on the surrounding environment. The mind map below depicts several essential elements that I hope to add in PureView’s interface.
Wireframes
Shown below are initial wireframes illustrating PureView's concepts. These wireframes represent early ideas within the prototype, showcasing a variety of screens to convey PureView's functionality. The prototype's primary focus at this stage is reporting waste in Forest Lake's Lake Parklands, accompanied by a map displaying common debris collection areas. The first concept involves using a camera for debris collection, the second allows reporting through the app, and the third details interactive "click and collect" actions. This phase is pivotal for aligning the prototype with the young adult demographic, with the inclusion of user-friendly navigation buttons to enhance interaction.
Storyboarding
After wireframing, the next step was creating a user interaction storyboard to combat Lake Parklands contamination. Six scenes, depicted on the done, were done. The narrative unfolds with the Lake Parklands' littered waterways, highlighting the ecological and human health risks. In Scene 3, users open PureView to report debris, fostering awareness and reducing pollution. Scene 4 displays user collaboration through the prototype's chat features for collective debris cleanup. Scene 5 involves using PureView to report collections, leading to Scene 6 where users complete reports and earn rewards. Storyboarding was pivotal for mapping the user experience in PureView's design process.
Flowchart
Next in the design process, a flowchart for PureView was introduced to enhance comprehension of the prototype's user flow. The flowchart, shown on the right, outlines the primary sections and their respective subcategories, allowing users to explore the prototype's features in greater detail. Commencing with the start screen, the flowchart leads users to the home screen via login credentials. The home screen branches into four key prototype categories: "How it works," "View Map and Stats," "Report Debris," and "Chat." The flowchart visually presents a range of features within these categories. Mapping PureView's features proved pivotal in ensuring a clear and user-friendly demonstration for the target young adult audience.
Paper Prototyping
To facilitate user engagement and gather feedback for PureView, I decided to create paper prototypes. These paper prototyping sessions are shown on the right. This approach was crucial as it allowed me to build various low-fidelity prototypes showcasing simple interactions for individual users.
Theme Refinements
After exploring colour options, I refined PureView's theme. The initial theme, served as a basic color scheme for the high-fidelity prototype layout. The home screen was designed for easy feature access. The image placed on the middle displays a refined layout compared to the previous, with a simple and attractive theme to engage young adults in reporting debris within Forest Lake's Lake Parklands. The third image showcases the final refined color scheme and the four main sections: "How It Works," "View Map and Stats," "Report Debris," and "Chat." For a personalised touch, the prototype includes user progress details and a playful interface to enhance user engagement.
Four main category designs
After selecting a suitable theme for PureView, the next step was designing its four main categories, as seen on the right. The first screen displays the "How it Works" page, explaining the app's processes. Secondly showcases the collections screen for users to report their debris collections. Thirdly presents the "Chat" page, allowing users to communicate and report debris as a team. The final screen illustrates the map of Lake Parklands and statistics on debris collections at Forest Lake's Lake Parklands.
Subcategory screen designs
After creating the main screens for PureView, I designed subcategory screens to meet the app's specifications. These subcategory screens allow users to explore and engage more deeply within the prototype. The screens shown on the right depict these subcategory screens for a personalised experience. The first screen enables users to categorize their collections, the second is a photo viewing tool, the third highlights significant locations in Lake Parklands, and the final screen showcases a chat conversation between users through PureView's chat functions.
User Testing Session 1
After creating the high-fidelity prototype of PureView using Figma, I conducted user testing sessions. As depicted on the right, a user tested PureView to evaluate the prototype's features.
This was seen as an important step of the design process to ensure potential improvements. The images shown on the right showcase the initial user testing session. The feedback obtained from this session included the following suggestions:
Incorporate incentives to increase user engagement in debris collection.
Improve the color scheme of buttons to enhance user awareness.
Implement a gallery feature where users can view their debris collection.
Replace the menu icon on the top of the home screen with a settings option, allowing users to personalize their experience.
Iteration 1
Following the initial user testing session, PureView underwent iterative improvements. As shown on the right, the first screen shows a settings icon was placed on the top-right corner of the home screen, allowing users access to their profiles, the ability to log out, and the option to change their passwords. Secondly, showcases the rewards screen of the prototype, which was integrated based on user feedback received during the initial testing session. The third screen displays the image gallery, featuring pictures taken while collecting debris at Lake Parklands in Forest Lake. This gallery was incorporated to verify collections before users proceed to earn rewards. Furthermore, enhancements were made to the color scheme across the entire prototype to enhance its overall visual appeal.
User Testing Session 2
After incorporating the user feedback obtained from the initial user test, a decision was made to conduct a second test to ensure that PureView presents an appealing experience to its audience. As depicted on the right, the second testing session was conducted, and the feedback received from this session included the following suggestions:
Provide access to a gallery where users can authenticate their collections
Incorporate a statistics section, ideally within the maps page, where users can view their performance metrics following their collections
Iteration 2
Following the second user testing session, adjustments were implemented, as displayed on the right. As depicted in the “Collect Your Rewards” screen, a barcode was introduced to the rewards page of PureView. This addition serves the purpose of drawing the interest of potential users when the app is used in a specific store. Moreover, the barcode imparts a personalized touch to the interface, indicating authenticity and motivating users to continue collecting debris within Forest Lake's Lake Parklands. “Stats” showcases the statistics screen, allowing users to review their career progress and the percentage of water quality improvement in the lake.
User Testing Session 3
After incorporating the feedback from the second user test, the decision was made to conduct a third and final user test to make the last adjustments to the PureView interface. As depicted on the right, this was the third user test conducted for PureView. The feedback obtained from this testing session included the following suggestions:
Alter the colors of the home screen to adopt a simpler theme, utilizing two primary colours for the four main buttons displayed on the homepage.
Final Iteration
Based on the feedback received, adjustments were made to the colours of the home screen. As shown on the right, the home screen buttons were transformed into shades of blue and yellow to align with the colors of the Brisbane City Council. This change enhanced the prototype's relevance to its local context and established a cohesive theme across its interface. The first design displays the previous colour scheme, while the second screenshot showcases the updated and polished home screen theme for PureView. This refined color scheme on PureView's home screen not only maintained a consistent theme but also localised the context within its interface.
Final Prototype
Following Figma's assistance, the final prototype of PureView, displayed on the right, incorporated a variety of screens to highlight its features. The navigation bar at the bottom was tailored to the theme for user-friendly navigation. With the high-fidelity prototype now completed based on user feedback and design choices, the project was prepared for delivery. This step was crucial as it allowed me to create a prototype with an appealing theme and interactions aimed at engaging the target audience of young adults.
Home
On PureView's home screen, users have access to a variety of options, including reporting debris, viewing maps and statistics, engaging in chats, and exploring the app's functionality. The interface is user-friendly, displaying personal best statistics and supplementary details like weather and date. The primary colours, yellow and blue were thoughtfully selected to align with the Brisbane City Council's identity, ensuring a harmonious connection.
Chat
The "Chat" function facilitates user communication and teamwork in debris collection. A user-friendly design was adopted to ensure seamless interaction with the chat feature. By integrating this tool into the app, it aims to foster stronger dedication to debris collection and enhance awareness through swift and efficient communication.
Map
The "Map" feature provides users with a comprehensive view of the Lake Parklands at Forest Lake, displaying various statistics related to the area. These statistics encompass information on rubbish bins, significant lake locations, and rates of debris reporting. Moreover, users can access their own personal statistics regarding their collections while using the map.
Report Debris
The "Report Debris" feature enables users to document their collections as they explore the Lake Parklands of Forest Lake. To maintain user engagement during the collection process, the app incorporates captivating colours and imagery. Users are prompted to specify the type of collection they made, such as plastics or metals, and accurately record the quantity to ensure precise data collection.
How it Works?
The "How it works" section of PureView enlightens users about the app's purpose and offers clear instructions on how to count debris collections and achieve their objectives. The layout is designed to be user-friendly, allowing effortless scrolling through information about the application.
Rewards
Upon successful completion of their collections, users will receive incentives as a token of appreciation for their efforts in preserving a healthy ecosystem within the Lake Parklands of Forest Lake. The app allows users to choose from a range of rewards and submit proofs of their collections to claim their chosen incentives.