WORK ACCOMPLISHED:
UI Layout Finalization and Enhanced User Experience:
This week, I finalized the UI layout for all the key pages in the app, with a particular focus on setting up the connection flow. Now, users can seamlessly navigate through the process of pairing their skateboard, selecting devices, and managing connection success or failure. The connection pages are fully designed and functional, including the welcome screen, device list, search, and both success and failure outcomes. For this, I just used mock data for now. I also added animations to enhance user interaction, making the overall experience smoother and more intuitive. With these components in place, the frontend is now in a solid state, ready for backend integration. The UI is responsive and visually polished, laying a strong foundation for future development.
Additionally, I implemented a progress bar animation for the “Return to Me” feature, providing real-time feedback as the skateboard gets closer to the user. I also added a warning visual to alert the user if the skateboard is more than 5 meters away, enhancing the safety and usability of the feature.
Stats Page and Calculations: On the stats page, I calculated the equation for CO2 saved to provide users with meaningful feedback on the environmental impact of using the skateboard (the average passenger vehicle emits about 400 grams of CO2 per mile). This data is visually represented to engage users in tracking their sustainability contributions.
Remote Control Enhancements: The remote control page was improved with the addition of battery calculations and a corresponding visual to show real-time battery levels. I adjusted the battery percentage visuals to ensure accuracy and readability, which is critical for the user experience.
Responsive Design: To ensure the app looks good across different devices, I adjusted styles to be more responsive to various phone sizes. I also refined the tab bar styles, making navigation more user-friendly.
PROGRESS:
I’m on track with the progress made this week, particularly in finishing the entire UI/UX with animations, real-time feedback, and responsive design. The core layout for the remote control is complete, and I’ve laid the groundwork for future BLE integrations by refining the connection flows. Since I haven’t had the chance to work with the Raspberry Pi yet, it has pushed back my schedule for Bluetooth connectivity and integrating it with the mobile app. However, I have set up the proper libraries and will try testing it with mock data for now. Also, backend coding is still pushed but still debating the necessity for that. Also, for our gantt chart, we didn’t take into consideration that we had fall break and we were only going to complete additional tasks during that week if necessary. The schedule is below for my progress (my tasks are colored in orange and my shared tasks in yellow):
NEXT WEEK’S DELIVERABLES:
Next week, I aim to complete the following:
- Finish integrating BLE functionality and begin testing with the Raspberry Pi.
- Start coding the backend for the skateboard control interface.
- Continue improving the visuals and animations on the control and stats pages for a more polished user experience.
- Refactor code as needed to prepare for backend integration. Also, refactor the code to make it more reusable and responsive. There’s some things that still look a tiny bit off on different screen sizes.
- Test the GPS module on react native.