User Interface I Project 1

Smart Object: Smart Desk

Project Summay and Documentation

The main goal of this project is to design a user interface for a ‘smart object’. The general project timeline is as follows:

1. Brainstorm possible ideas for a smart object.

• This step is designed to give a wide variety of different user interfaces to choose from. This was done as a class.

  2. Choose a smart object from a dedicated list and gather design requirements for the project user interface.

• Our class list consisted of a smart desk, cookbook, bike, window, or mirror. For my personal project, I chose to design a UI for a ‘smart desk’.

  3. Prototype possible physical and digital designs. Document all information gathered during this phase.

• Step 1 was to gather design requirements through interviews. My interview summary is listed below:
• Step 2 was to follow the ‘10-plus-10’ protocol for exploring different physical designs of our smart object.

  Final Brainstorming Documentation and Design Presentation

  4. Program a working interface in React.js using components.

• Step 3 is to apply everything learned in step 1 and step 2 to implement a working application.
• Here is the color scheme I decided to follow for my application:
  
  

• My thought process for this smart desk application was to have a screen integrated into the physical desk where the user can indicate if they are at their desk for productivity or entertainment purposes. Each page of the application was designed to assist the user with either of these activities.
• Here is the first page of my application:
  
  

• Here is the second page of my application:
  
  

How To Launch Application

1. Copy this repository.

2. Run the following commands in the terminal, from your desired code compiler.

• Cd into the smart-desk-ui directory with the following command:

  cd .\smart-desk-ui\
  

• Run the following command to update all dependancies from the file:

  npm update
  

• Then run the following to host the react application locally:

  npm run dev
  

  The output from the previous command should be as follows:

  > smart-desk-ui@0.0.0 dev
  > vite
  
  
  VITE v4.4.9  ready in 630 ms
  
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
  

  3. Open the given local host ID into your browser.

• From the previously stated output, hold the ‘ctrl’ button on your keyboard and click the localhost ID.
• If your compiler does not support this feature, copy the localhost ID ‘http://localhost:5173/’ and paste it into your browser without the apostrophes.

  4. Application Video Demonstration