About the project

During the last two quarters of my 2nd year at the UC Irvine, I got the chance to be a part of the pilot of the Computer Science Capstone project, typically completed in the senior year as a CS major.

Alongside a team of other UCI students, we worked on a project with the Engaging Technology and Application Design research group on campus on a project funded by the US Department of Energy. My team worked on the web application that would allow small manufacturing companies to view data about energy consumption across the different floors or rooms at their centers.

👩🏻‍💻 My role: 1 of 2 UI/UX Designers, 1 of 3 Front-End Developers on the team

💻 Technologies I used:


  1. Git (version control and collaboration)
  2. React.js (design and implementation of components)
  3. Recharts (data visualizations)


  1. Figma (initial designs)
  2. HTML/CSS (prototypes)
  3. Adobe Illustrator (logo)

The Problem

<aside> 💡 Manufacturing companies, particular smaller ones, have no way to keep track of the energy consumption across their different floors at their manufacturing centers. Using data from something like the Microsoft HoloLens (the other part of this project), how can we make raw data useful to managers of small manufacturing companies?


🎬 Demo

For our final implementation, I worked on designing the logo on the top left, the Notifications page, the design and implementation of the floor plan summary (Equipment Overview and Machine components), and also collaborated with the rest of the front-end team to determine how we wanted information displayed with the data visualizations across the entire web application.


🤔 Reflections

This was my first time getting to work primarily in a UX/UI role for an extended amount of time. It was exciting getting to be a part of the design process from the initial sketches to some of the final implementation of the components. However, knowing what I know now, if I were to go back in time, these are things I'd probably change about the process...

  1. Documenting everything in my process. I think it would have been helpful to keep a record of my process, such as all of the rough sketches and the different versions I went through when we were coming up with different versions of the final product.