dex-net.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>sona dolasia</title>
  <link rel="icon" href="assets/img/logo.png">
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/styles.css">
  <!-- <link rel="stylesheet" href="assets/css/Transparent-Overlay-On-Image-On-Hover.css"> -->
  <link rel="stylesheet" href="assets/webfontkit/stylesheet.css">
</head>

<body class="text-center"  style="background:#FBEC9E;">
  <div class="container">
    <div class="row" style="padding: 100px 0px 0px 0px;">
      <div class="col-sm-6">
        <h1 class="text-left" style="font-size: 18px; color: #333333; font-weight: 100; font-family: 'apercu-boldbold';margin: 0px;"><a href="work.html">view work</a></h1>
      </div>
      <div class="col-sm-6">
        <h1 class="text-right" style="font-size: 18px; color: #333333; font-weight: 100; font-family: 'apercu-boldbold';margin: 0px;"><a href="about.html">learn more</a></h1>
      </div>
    </div>
  </div>

  <h2 class="display-1" style="font-size: 100px;font-style: normal;margin-top: 100px"></h2>
  <div class="container">
    <div class="row" style="padding: 0px 0px 100px 0px;">
      <div class="col-sm-6 text-left">
        <p style="font-size: 36px; font-family: 'apercu-boldbold';">Dex-Net GUI</p>
        <p style="margin: 10px 0px 10px; font-family: 'aperculight'; font-size: 18px;">Designing an interface for a deep learning research project.</p>
        <div style="font-family: 'aperculight';font-size: 15px; margin: 50px 0px 10px;">
          <p style="margin: 0px 0px 5px 0px;"><a style="font-family: 'apercu-boldbold';">Team:</a>&nbsp;Sona Dolasia, Jeff Mahler PhD,  Mike Danielczuk, Matthew Matl, Prof. Ken Goldberg (Advisor).</p>
          <p style="margin: 0px 0px 5px 0px;"><a style="font-family: 'apercu-boldbold';">Role:</a>&nbsp;Lead User Interface Designer and UI Engineer</p>
          <p style="margin: 0px 0px 5px 0px;"><a style="font-family: 'apercu-boldbold';">Timeline:</a>&nbsp;January - April 2018</p>
          <p><a style="font-family: 'apercu-boldbold';">Tools:</a>&nbsp;Figma, Python, PyQT</p>
        </div>
      </div>
      <div class="col-sm-6 text-center">
        <img class="shadow" src="assets/img/teacher.gif" style="height: 300px;margin: 0px 0px;">
      </div>
    </div>
</div>
  <!-- </div><button class="btn active btn-sm text-left text-dark border rounded-0 border-dark body" type="button" style="padding: 10px 50px;color: rgb(33,37,41);margin: 40px 0px 0px 0px;">view full case study</button> -->
    <!-- <h5 class="text-center" style="margin: 50px 0px 10px 0px;font-size: 24px;">the short story</h5>
    <h6 class="text-center body" style="margin: 0px 0px 10px 0px;">a 6 minute abridged case study</h6> -->
  <div class="container">
    <div class="row">
        <div class="col-sm-3">
            <p class="text-left" style="font-size: 24px;font-family: 'apercu-boldbold';">context</p>
        </div>
        <div class="col-sm-8 text-left" style="margin: 10px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
            <p>While working as an undergraduate researcher in the UC Berkeley AUTOLab, I was tasked with designing and developing a graphical user interface for the Dexterity Network (Dex-Net) project. The Dex-Net project includes code, datasets, and algorithms for generating datasets of synthetic point clouds, robot parallel-jaw grasps, and metrics of grasp robustness based on physics-based models to plan robot grasps.</p>
            <p>In demonstrations of the network, the lab wanted a display that would rest on top of the robot, presenting the thought process of Dex-Net in real-time. The key challenge with this project was creating a simple design that could be understood by a non-technical audience. </p>

        </div>
    </div>
  </div>


<div class="container">
    <div class="row">
      <div class="col-sm-3">
          <p class="text-left" style="margin: 30px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">low fidelity</p>
      </div>
        <div class="col-sm-8 text-left" style="margin: 40px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">

          <p>The first step was meeting with the team to discuss the goals for the display. Together we came up with the key pieces of information to be included: the live depth camera, confidence percentage, weight of the bin, type of grasp, the outcome of the previous grasp, the current picks per hour rate, and branding assets for the lab. At first, the sheer number of necessary data points was a bit overwhelming, and finding a way to make it not so number-heavy seemed daunting. </p>

          <img src="assets/img/dex-low-1.png" style="width: 700px;margin: 50px 0px 0px 0px;"><p style="margin: 20px 0px 40px 0px;">Initial mock-ups of the product.</p>

          <p>I began by simplifying Dex-Net itself into three stages – sensing, computing, and moving – generalizing the inner working of the network into descriptive categories. These would be used to display the current thought process of the network in a linear status bar modeled after a traffic light, with the correct stage lighting up when reached. I also created icons for the robot's three different grasping actions: suction, gripping and pushing. These would be overlayed on the live depth camera to show the location and type of grasp the robot was attempting. </p>

          <img src="assets/img/dex-low-3.png" style="width: 700px;margin: 50px 0px 0px 0px;"><p style="margin: 20px 0px 40px 0px;">Initial mock-ups of the product.</p>




        </div>
    </div>
</div>

<div class="container">
    <div class="row">
      <div class="col-sm-3">
          <p class="text-left" style="margin: 30px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">mid fidelity</p>
      </div>
        <div class="col-sm-8 text-left" style="margin: 40px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
          <p>With some of the design elements locked down, I worked on mocking up different compositions of the display. I went through many iterations of the design with feedback from the team, adding and highlighting different elements to improve readability and understanding. </p>


          <img src="assets/img/dex-mid-1.png" style="width: 700px;margin: 50px 0px 0px 0px;"><p style="margin: 20px 0px 0px 0px;">Iterated designs.</p></div>
    </div>
</div>

  <div class="container">
    <div class="row">
      <div class="col-sm-3">
          <p class="text-left" style="margin: 40px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">high fidelity</p>
      </div>
        <div class="col-sm-8 text-left" style="font-family: 'aperculight';font-size: 15px;">

          <img src="assets/img/teach-hi-1.png" style="width: 700px;margin: 50px 0px 0px 0px;">
          <p style="margin: 20px 0px 0px 0px; font-family: 'apercu-boldbold';">Onboarding</p>
          <p style="margin: 5px 0px 40px 0px;">A screen-by-screen user flow to help new users construct their profiles. Validates a teacher profile creation with a .edu email address. Profiles contain basic information about the teacher’s classroom (subject, number of students) and a short description about the teacher.</p>

          <img src="assets/img/teacher-hi-1.png" style="width: 450px;margin: 50px 0px 0px 0px;">
          <p style="margin: 20px 0px 0px 0px; font-family: 'apercu-boldbold';">Navigation</p>
          <p style="margin: 5px 0px 40px 0px;">The homepage of the application contains all the active posts. Each post includes tags to help users quickly navigate through them as well as information on how far away a teacher is. The navigation drawer allows for easy access to all other features of the application.</p>

          <img src="assets/img/teach-hi-3.png" style="width: 700px;margin: 50px 0px 0px 0px;">
          <p style="margin: 20px 0px 0px 0px; font-family: 'apercu-boldbold';">Posting</p>
          <p style="margin: 5px 0px 40px 0px;">Teachers have the option to both request a donation and donate items. For both post types, there is a screen-by-screen user flow helping users fill in all the necessary information.</p>

          <img src="assets/img/teach-hi-4.png" style="width: 700px;margin: 50px 0px 0px 0px;">
          <p style="margin: 20px 0px 0px 0px; font-family: 'apercu-boldbold';">Donating</p>
          <p style="margin: 5px 0px 40px 0px;">When a relevant post is viewed (by both teachers and donors), an option to match the request with a donation is possible. Once a user matches with a post, they are able to chat to determine the logistics of the donation.</p>

    </div>
  </div>
<div class="container">
    <div class="row">
      <div class="col-sm-3">
          <p class="text-left" style="margin: 40px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">development</p>
      </div>
        <div class="col-sm-8 text-left" style="margin: 50px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
            <p>Finalizing the design was only the first part of the project – I then had to develop it. After researching several different libraries and tools, we chose to build the display in PyQt, a Python binding for the QT framework, commonly used to create user interface applications. The toolkit for PyQt contained hundreds of widgets that could be used together to create a UI. However, I quickly found that these widgets were not very customizable.</p>
            <p>In my first attempt to implement my design, I tried to find different widgets that looked similar. This attempt was unattractive, and it didn't seem like my design would be possible. Digging deeper into StackOverflow and the QT documentation, I found ways to customize the colors and fonts, ultimately getting my desired design. I then worked with the team to connect my GUI to the Dex-Net project itself to pull in the live depth camera and data.
</p>
            <img class="shadow" src="assets/img/crucible.jpg" style=" width:500px">
            <p style="margin: 20px 0px 40px 0px;">My team and our client at the Berkeley Innovation showcase!</p>
        </div>
    </div>
  </div>


  <div class="container">
      <div class="row">
        <div class="col-sm-3">
            <p class="text-left" style="margin: 40px 10px 10px 0px;font-size: 24px;font-family: 'apercu-boldbold';">results</p>
        </div>
          <div class="col-sm-8 text-left" style="margin: 50px 0px 0px 0px;font-family: 'aperculight';font-size: 15px;">
              <p>This was my first project in berkeley innovation, and my first project doing work for a client. I learned so much from my team and our client about the design process.</p>
              <p>Looking back, I wish we had time to conduct more user testing with the high fidelity screens. Since there were only a number of screens we designed up, it was difficult to get accurate testing on the navigation improvements, given there were only a few pages to choose from.</p>
              <img class="shadow" src="assets/img/crucible.jpg" style=" width:500px">
              <p style="margin: 20px 0px 40px 0px;">My team and our client at the Berkeley Innovation showcase!</p>
          </div>
      </div>
    </div>
  <div class="container">
    <div class="row" style="margin: 70px 0px 100px 0px; padding: 0px;">
      <div class="col-md-6" >
          <h5 class="text-left" style="padding: 0px; color: #333333; font-weight: 100; font-size: 18px;font-family: 'apercumono'; ">© sona dolasia, 2020</h5>
      </div>
      <div class="col-md-6">
          <!-- <h5 class="text-right" style="padding: 0px; color: #ffffff;font-weight: 100; font-size: 20px;font-family: 'Apercu-Mono';">invert</h5> -->
      </div>
    </div>
  </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>