WK08 – High fidelity prototype and code start

This post will talk about the design of my high fidelity wireframe, my decision on logos and colours. Additionally, this wil show how I have been implementing the onboarding process, the camera, and the tabs navigation.

Since the last post, I have settled on a logo design and a name. I needed to get the App brand guidelines clear, so I could start the development of my high-fidelity wireframe. The logo went through different iterations, and it mainly explored the aesthetic of the object detection bounding boxes. It started as a clear green square that ‘detected’ the plastic bag in the logo, similar to how real object detection works. However, it moved beyond the concept of merely detecting.

I experimented with having the world in the background, representing the global responsibility around waste, and I kept the idea of object detection, but with a green outline, surrounding the flag. I experimented with having some waves, referring to the ocean, and a dark blue background, to help with the visibility of the core element: the plastic flag.

The earth in the background in combination with the colour communicated a more ‘outer space’ setting, so I chose the logo that included the waves because I considered it communicated better the idea of plastic retrieval from the ocean.

After selecting my logo from that iteration process, I updated the brand guidelines and this gave me the foundations to start putting together a high-fidelity wireframe. Having settled on the core elements of my app also allowed me to play with the use of colour, fonts, assets and layout.

---

High Fidelity wireframe

The development of the high-fidelity wireframe was heavily influenced by the low-fidelity wireframe and the brand guidelines. During the process of transferring the hand-drawn wireframes into Figma, I was also thinking about the interactions that the user would have and the different stages in which the app would be. The clickable prototype that I designed describes the first stage of the app, in which no interactions have happened before. In this stage I had identified four key moments:

• User login
• User Onboarding  (quick and straight to the point)
• User permission to use camera and location
• Filling in a first beach cleanup survey

One of the core stages of the app, and one where I had put special focus was the stage in which the user is presented with the object detection functionality. One of my main constraints is the screen size. Since I am aiming to offer a summary of the findings on the same screen where people are, I needed to find a format in which it could be achievable to present both views. There’s a view, within mobile development, called Bottom Sheet modal, which allows you to overlay some content on top of the current screen, without fully closing the current view.

I have also implemented colour to identify different categories/ subcategories. For example, you could find in one image 4 different plastic items, and even though they are all plastic, they are still different objects.  But you could also find glass, and plastic within the same image frame. Here is where colour coding becomes so important during the breakdown of the information. Finally, the count of the found objects. This section allows the user to submit the items they have found and keep track of the total count during the session.

Some other elements within the app tackle other pain points that were identified during the ideation process. Things like user rewards and engagement are addressed through the badge reward system, in which users earn badges. Also, keeping track of their progress and contributions to cleanups is tackled with a section in the app that keeps a record of the user’s participation in events.

---

App code development

Camera implementation

During the first code tests I had done during WK07 (click here to review), I had already implemented the navigation of the menu. This allowed me to start looking into the implementation of the camera.

---