300dtd_maintenance_tracker_website

Sprint 1 - A Working UI Prototype

Sprint Goals

Develop a prototype that simulates the key functionality of the system, then test and refine it so that it can serve as the model for the next phase of development in Sprint 2.

Figma is used to develop the prototype.

Initial Database Design

4 tables users, vehicles, user_vehicles, and info. all four of them are used to store infomation mainly about what vehicles users own, what has been done serivce wise to the vehicles and keeping the data of the users that have an account for a swift re login when re visitng the website agian.

SCREENSHOT OF DB DESIGN

Required Data Input

one of the main required data inputs that will be needed for my maintenance tracker will be the what has been done to the vehicle (service wise). this speific piece of data will be very important because without it the user anda admin of the website wont know what has been done to the vehicle. also without this data it would be impossible to know when to do the same service again because the user wont know what had been done.

Required Data Output

the types of data that will be displayed is text, as it will display what has happened to the vehicle (service wise). it will be displayed on the mainteance tracker section of my website that will show the allocated user what has happened to their car.

Required Data Processing

Replace this text with a description of how the data will be processed to achieve the desired output(s) - any processes / formulae? the data will be processed quite simply. this tracker will rely on the user to input what has happened to their vehicle (service wise). once this has happened successfully the data will be processed throughout the database and then stored into the list of servicing that has happened to the speific users vehicle. this is simple and effective.

UI ‘Flow’

The first stage of prototyping was to explore how the UI might ‘flow’ between states, based on the required functionality.

This Figma demo shows the initial design for the UI ‘flow’:

Testing

I tested the UI flow my creating it and then going into the point of view of a phone and computer screen and seeing what it would look like visually for the user when they are moving throughout my website. I also made sure that all of the buttons worked so the users could efficiently maneuver throughout the website.

Changes / Improvements

I though after testing that there needed to be more infomation around all of the features like the text boxes. so above them i made sure to write a short descripiton of what is meant to be written there to assist the user in doing things such as logging in to the website.

screenshot: alt text

Initial UI Prototype

The next stage of prototyping was to develop the layout for each screen of the UI.

This Figma demo shows the initial layout design for the UI:

screenshot:![alt text]() --- ## Refined UI Prototype Having established the layout of the UI screens, the prototype was refined visually, in terms of colour, fonts, etc. This Figma demo shows the UI with refinements applied: ### Testing when testing the the Prototype that i made some improvements on i asked my end users again what they wanted differently again to the Prototype i have been making in figma. i talked to my end users again and they said that they wanted a dark mode of the original one and they also said that they wanted a welcome mesage when they successfully log in, and finally they said that they wanted a text box that shows what vehicle (on the home page) what vehicle the logs are about for more clarity on what vehicle the logs are alloacted to. ### Changes / Improvements So considering these refinements i made a dark mode copy of the original light mode version so that the end user is satisfied. then on the home page i added a text box that shows the vehicle that the logs are about. then finally i added the welcome message on the log in page that allows the user to get a welcome message when they successfully log in to the app. Screenshot: ![alt text](<final testing .png>) --- ## Sprint Review Replace this text with a statement about how the sprint has moved the project forward - key success point, any things that didn't go so well, etc. this sprint went quite good considering the improvemnts that i made to my website, the first key success point that i made in this spirnt was getting the databse and sqlite working together, this enabled be to get data from my website to sqlite and from sqlite to my website. this allowed some of the basic features such as adding vehicles and logs to work how i wanted them to. another success point was getting the main UI, css of the website in working condition, things such as colors and fonts for the website were fixed and changed to improve the overall UI of the website improving the aesthetic and minimalist desgin of the website as a whole. some things that didnt go so well was getting the data from sqlite to the website and from the website to sqlite this took a while as i was having probelms with the not null parameters and other parameters such as delete on cascade. these problems took some of my valuable time that i could of used for better tasks.