## 4 Design and Implementation
### Corresponding APP Design  
To build the mobile phone application corresponding to the SUNSHADE device, we designed a prototype user interface in Figma. The process is divided into the following parts.  
First, users of SUNSHADE can register an account in the initial page. Users can use their school accounts or telephone numbers to register.  
As shown in Figure 6, After registering, the location of the user will be shown on a map of the area where the SUNSHADE is available. Sliding up from the bottom, detailed information of the environmental parameters and user distribution are shown, including the current humidity, temperature, carbon dioxide concentration and particulate matter 2.5 concentration.  
If the user has decided to use one of the SUNSHADE devices, he or she can choose to either scan the QR code on the device or enter the number of the device to unlock it.  
After successfully unlocking one of the devices, the controlling interface shows the device information (Figure 7), which includes the number and location. Considering that the light environment in different areas varies significantly, and different individuals have different personal feelings about the environment, a specific function is incorporated. The users can choose between auto adjustments and manual adjustments. When choosing the auto follow mode, the SUNSHADE will adjust the height of the cur  
Figure 6: App information page.  
its user shaded. Alternatively, the user can turn on the manual adjustment mode, which allows them to choose from a range of options between completely closed and completely open by sliding a slide block. If the users find any problems with the device, such as mechanical malfunctions, they can use the report button in the top right corner. Staff will work on the feedback.  
After the user has finished using SUNSHADE and plans to lock the device, he or she can click the \"stop using\" button at the bottom of the screen and enter the finishing interface. The finishing interface shows the exact locking time and the period of use.  
As shown in Figure 8a, the user's personal information interface is divided into four parts: \"My credit\", \"usage record\", \"feedback record\" and \"settings\". We have also designed a real-name qualification section. Users can qualify themselves by entering their real name and identity number.  
Figure 8: _Cont._  
Figure 7: Product controlling page.  
In the \"My credit\" part (see Figure 8b), we have designed a credit system, including a 12-point credit record. When the user exhibits unfavourable behaviour, such as forgetting to lock the SUNSHADE after using it, one point will be removed. When the credit score is below zero, the user is qualified as unruly, and will be banned from using the SUNSHADE. After a certain period of time without unfavourable behaviour, the credit will naturally recover. In the \"usage record\" section, every time the user has used the SUNSHADE will be recorded and shown. The usage record includes the using location and duration. In the \"feedback record\" section, a feedback record is listed. Users' feedback is shown. In the \"settings\" part (see Figure 8c), five columns are shown, including \"account and security\", \"legal terms\", \"manage personalized recommendations\", \"about us\" and \"version update\". The version update section shows the latest version of the application and reminds the user to update the application whenever a new version is uploaded. The \"about us\" section shows details of the application and provides the contact number of the developers.  
The user's personal information interface is hidden on the left side of the screen, so it will not bother users during regular use. When the user needs to check his or her personal information or credit, a leftwards slide will call up the personal information interface.  
Figure 8: User personal information interface.