Sapna's Portfolio

Intro

As part of CSE 170 a design programming course at UCSD, I was tasked to, over the course of ten weeks, identify a need group, observe target demographics, brainstorm, prototype, and ultimately code a digital product in HTML.

Research

First I had to identify my needer group. I chose to observe individuals working in public spaces, which typically included students and remote office workers.

Key findings:

collaboration: people struggled to work together on multiple screens given the small spaceing.
Ergonomics: many people hunched over, or put pressure on. joints while working for prolonged periods.
Hygiene: people love to touch their faces.
Fidgeting: many people fidget their feet against the chair and table legs.

Brainstorming

I then attempted to translate these needs into solutions during the brainstorming phase.

Some of my products included adaptive laptops for improved posture, desks fidgets, and collaboritive desk spaces.

I became really intriqued with the idea of creating a glove to minimize posture discomforts and potentially assist with mobility impairments.

Prototyping

Before working on prototypes, I created an architecture diagram. IThen I made lo-fi prototypes and got feedback on it. Then I moved onto hi-fi prototypes. After a very breif user testing, I found that my current protype was too expansive and there were unecessary elements. In my final version, I decided to streamline the application a bit.

For the color, I chose a primairly blue color scheeme for high contrast, and ease of use especially since there was a consideration for various possible impairments. I also went for a sleek style and logo for this modern tech product.

back to design

Final Product Mock Up & Demo

Code Sample

Here is the final coded product in HTML, CSS, & JavaScript.

<body>
  <!-- Login -->
  <div id="login-page">
    <div class="login-container">
      <h1>Login</h1>
      <form id="login-form">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
     
        <button type="submit" id="login-button">Login</button>
      </form>
    </div>
  </div>

  <!-- Home -->
  <div id="home-page" style="display: none;">
    <header>
      <h1>Welcome Back, <span id="user-name">User</span>!</h1>
    </header>
    <main>
      <section class="dashboard">
        <h2>Touchless Dashboard</h2>
        <div class="device-card">
          <div class="device-details">
            <h3>AR Glove X</h3>
            <p>Owner: <span id="owner-name">User</span></p>
            <p>Serial Number: XXXXXXX</p>
          </div>
          <p class="connection-status">Connected</p>
        </div>
      </section>
<section class="networks">
  <h2>Networks</h2>
  <div class="network">
    <p>Sarah's Home Network</p>
    <div class="toggle">
      <input type="checkbox" id="network1" class="toggle-input">
      <label for="network1" class="toggle-label"></label>
    </div>
  </div>
  <div class="network">
    <p>Office Public Network</p>
    <div class="toggle">
      <input type="checkbox" id="network2" class="toggle-input">
      <label for="network2" class="toggle-label"></label>
    </div>
  </div>
  <div class="network">
    <p>Sarah's Portable Network</p>
    <div class="toggle">
      <input type="checkbox" id="network3" class="toggle-input" checked>
      <label for="network3" class="toggle-label"></label>
    </div>
  </div>
</section>
    </main>

  <script src="script.js"></script>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(black, blue);
  color: white;
  max-width: 480px;
  background-size: 480px;
  background-repeat: no-repeat;
  min-height: 680px;
}

/* Login  */
#login-page {
  display: 480px;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-container {
  background-color: #1c1c1c;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  max-width: 480px;
}

.login-container h1 {
  margin-bottom: 20px;
  font-size: 1.8em;
}

.login-container label {
  display: block;
  margin-top: 10px;
}

.login-container input {
  width: 80%;
  padding: 10px;
  margin-top: 5px;
  border: none;
  border-radius: 4px;
  background-color: #333;
  color: white;
}

.login-container button {
  margin-top: 15px;
  padding: 10px;
  width: 80%;
  border: none;
  border-radius: 4px;
  background-color: #0077ff;
  color: white;
  font-size: 1em;
  font-weight: bold;
}

.login-container button:hover {
  background-color: #0056d6;
}

.login-container button:active {
  transform: scale(0.98);
}

/* Home Page */
#home-page {
  max-width: 480px;
  margin: 0 auto;
  overflow-x: hidden;
  padding: 20px;
}

header h1 {
  font-size: 1.8em;
}

.dashboard, .networks {
  margin-top: 20px;
}

.device-card, .network {
  background-color: #1c1c1c;
  padding: 15px;
  border-radius: 8px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

  margin: 0;
  font-size: 1.2em;
}

.connection-status {
  color: green;
  font-weight: bold;
}

/* Toggles */
.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: blue;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.toggle-label:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.toggle-input:checked + .toggle-label {
  background-color: orange;
}

.toggle-input:checked + .toggle-label:before {
  transform: translateX(20px);
}

// login  navigation
document.getElementById('login-form').addEventListener('submit', function (event) {
  event.preventDefault();

  //  username
  const username = document.getElementById('username').value;

  // Show home page and set username
  document.getElementById('login-page').style.display = 'none';
  document.getElementById('home-page').style.display = 'block';
  document.getElementById('user-name').textContent = username;
  document.getElementById('owner-name').textContent = username;
});

Touchless