WK11 – Code development: styles and interaction
This post will talk about the finishing of the onboarding process with assets, and the styling of the Homepage screen, Live survey screen, and Profile Screen.
Onboarding Screen
After getting some of the functionality working, I decided to focus on the styling of the app and the copy I wanted to use in the different sections. I started with the Onboarding screen, which has two states:
- If the user hasn’t opened the app before, the onboarding will show.
- If the user has opened the app before, the onboarding won’t show.
The three different screens were populated with images and copies.
- First screen: briefly explaining why the app is important (offering context).
- Second screen: briefly explaining how the app uses object detection and generating some excitement around how this is done.
- Third Screen: explain to the user why the camera and location should be used, and reassure them regarding privacy concerns.
At this point in the code development, I realized I had put all my attention into developing the main functionality, and I had disregarded the importance of the styling, and adding some UI styling to the distinct screens. So, I decided to invest some time in the styling of the screens.
How I think about styling is very CSS-driven. Luckily, react-native works very similarly to CSS, allowing me to create a ‘global’ file in which I would code the elements (components in react) that are repeatedly used across the app, such as fonts, main CTAs, and some common styles. I also created a ‘themes’ file, which would host the values of those elements created in the global file. This is very powerful because it allows me to style in a single file, components that can be present on different screens.
Homepage and Survey details Screens
After setting up my global styling files, I started moving the design I had done in Figma into React Native. Having done the High-fidelity wireframe with assets, colours and fonts, allowed me to easily export icons and images and use them within the app. The styling of the homepage screen is concerned with a first interaction, therefore the user is prompted to start a survey straight away with a CTA (call-to-action) saying ‘Start Survey’. The homepage screen would also ideally greet the user with their name, but since I haven’t implemented user login, I can’t get their name to display dynamically yet.
The live screen presents the user with a form. This form is intended to collect important information to provide context about the place the user is in, the group they are working with, and general vital beach conditions. This data is collected before the ‘Live survey starts’, and it needs to be linked to the information that will be collected during the survey (i.e the found debris).
This section’s coding made me question how and where I would store data. How the form currently works is by retrieving the data that the user is providing, but I’m still unsure of what to do with it. It seems that these steps touched areas on databases, and how to connect the data I am getting from my UI to a place where I can organize the information I am getting.
React native offers different ways in which I can create forms. I am currently using react-hook-forms, which allows me to print the data that the user submits. However, there are still important pieces of interaction that haven’t been implemented, such as form validation.
Profile screen
The profile screen was a section that I decided to re-design. The purpose of this screen is to show the user its achievements and the impact that they are having with the surveys they have done. However, in the previous layout, the page felt dull, and I was covering important information under a tab interaction where the achievements and impacts were side to side.
Additionally, and similar to the Live survey screen, the profile section needed to offer the user the possibility to update their profile. I implemented a similar form style where I could retrieve the data. As said before, this data isn’t being stored, but it’s good to build a structure that can retrieve it.
Going back to the re-design of the profile tab, in the new layout I decided to take out the ‘Impact’ section and make it visible, along with the ‘Achievements’ section. I also reflected on how the user could update their profile, as well as change their app settings, becoming two different screens that can be accessed from the Profile screen.
Live Survey Screen
The Live survey screen is where all the complexity of the app comes into play. This is where most of my has gone, and where there are still interactions that aren’t linked together. This screen aims to allow the detection of objects during the beach survey after the survey details form has been filled in. The user is asked to allow permission to use the camera, and once this is accepted, the app opens the user’s camera.
The user is presented with a button, which triggers the detection model throughout 4 frames and then takes a photo. The bottom-sheet is where the summary of the found object will go. At the moment, I have styled the bottom-sheet with some examples of possible list elements, but the counting of the elements is happening in the background and hasn’t been linked to the UI yet.
Supervision Notes
This week I presented to my supervisor some of the progress I had done on the development of the app. However, I also expressed how some of the underlying functionalities aren’t working, and how the use of a custom model could be a possibility to improve the predictions of the pre-trained model I am using. Closer to our deadline I have been advised to:
– Start desing processes documentation within Project Report. Split the porcess on two sections:
- 1. User Interface (front end) Explain the different choices I made for the UI of the application
- 2. Technical Architecture (back end). Start with a diagram (https://www.lucidchart.com/blog/how-to-draw-architectural-diagrams), https://www.cs.vu.nl/~x/sai/sai.html and explain briefly each section of the functioning of the app.
– Correct SMART goals according to the feedback provided during the presentation.
– Review Beneficiaries example and adjust paragraph
– Keep working on the interface and underlying functionality