WK07 – Low fidelity wireframe and Brand guidelines

This post will talk about moodboard, low-fidelity wireframes, app flowchart, and app brand guidelines.

During the past week, I have been working on the wireframe of the app in which I merge all the learnings from my user research to design a coherent interface and user journey. To start thinking about how I would like the interface to look, I created a moodboard looking at elements that display Geolocation information, onboarding processes, badges styles, and other UI elements.

Low fidelity wireframe

The low-fidelity wireframe was crafted with the user personas in mind and tries to implement the functionalities that had been identified as solutions to the distinct pain points (identified during the creation of the scenarios).

The names of the identified screens are subject to change since the word ‘survey’ might be confusing to newcomers, yet it is the word that is often used to refer to ‘beach cleanups’. This is of high importance because these ‘main screens’ have been identified as the items of the app’s main menu. The users will need to understand the role of each screen clearly.

---

Flowchart

This low-fidelity wireframe also served as the structure to start creating my app’s flowchart. The purpose of the flowchart is to understand the overall user journey and guide the code structure of the app. By identifying main screens and interactions, I can start thinking programmatically and roughly understand the components and the file structure that make up the app.

---

Brand Guidelines

This project has been highly influenced by Precious Plastic’s mission to change people’s relationship to single-use plastic, as well as offering a strategy to reduce plastic waste by boosting small-scale recycling centers.

Precious Plastic is an open-source project that started with Dave Hakkens as part of his Design degree in Eindhoven. The project mainly focuses on the distribution of open hardware, (machines and tools) that can grind, melt, and inject recycled plastic into new products. The project is also focused on educating people about the different types of plastic, how-to’s to build the machines, and how to set up a small-scale recycling business.

In their efforts to keep the project open, they offer brand guidelines that can be used by people who wish to be part. I did have to stop and think about how this project is related to Precious Plastic since it isn’t a small-scale business that transforms plastic waste. However, it can be used within their model, especially when it comes to the collection of plastics found in the wild that can be later transformed.

The project is divided into spaces, which altogether make up the local recycling business. The first step to creating a sub-brand is to identify to which space the project (my app) belongs to.

There’s also a bigger category called ‘the academy’ which comprises the spaces but also expands on extra resources, such as ‘research’, and ‘business’.

Is it right to use these brand guidelines?

I think of my app an extension of Precious Plastic open-source project into the digital realm. The app helps its users to feed an open-source database, and aid researchers in collecting meaningful insights while removing plastic waste that can be later transformed into new products. As an example of this model, I cite the project ‘Precious Plastic Uramba’ in which their main goal is removing plastic waste from coastal areas. Not many beach cleanups use the material they collect to make new products, and from my readings, it is usually suggested to contact the local authority to arrange for a waste collection. What happens to the collected material is unclear, and it might fall within waste mismanagement again. These projects might also benefit from the app, to feed data and collect information quicker, but they wouldn’t align with the Precious Plastic mission.

With this, I am aiming to state that the app might benefit distinct beach cleanups/ surveys, but it will fit better an organization that already works within the Precious Plastic model.

This justifies my decision to use the Precious Plastic brand guidelines, and I present a first draft of the app brand guidelines, based on the existing guidelines and still subject to modifications:

---

The name of the app, as well as the logo, haven’t been decided on yet. However, the fonts will remain, as well as the colours

---

Next steps

After having a clear understarding of the flow of the app, as well as its potential look and feel, my nexts steps are :

• Settle on the name and logo of the App
• Create a high fidelity wireframe in Figma
• Start the development process in React Native. This will take most of my time as I haven’t used this framework before.

To get started with code I need to understand:

• Folder structure and routing
• How to trigger the camera from within the app
• How to add a model within React native
• How to capture and record the object-detection results.
• Start thinking how I can deploy this app to be tested on a device, instead of the simulator.