👥 Role

1 of 2 UI/UX Designers; 1 of 3 Front-End Developers

⌛ Project Duration

January 2020 - June 2020

About the Project

During my 3rd year at UC Irvine, I had the opportunity to take a new capstone course offered for my major where we had the chance to work with a sponsor to develop software for them.

My team and I worked on a project with a research group on campus known as Engaging Technology and Application Design, and our project was funded by the US Department of Energy. For the project, we implemented a web application that acts as a dashboard aimed to manage and improve upon workflows for small to medium sized manufacturing companies. Users were able to view data about energy consumption for all machines in different floors.

Problem

<aside> 💡 Managers and workers in a manufacturing company spend an excess amount of time diagnosing problems with machines, leading to lengthened downtimes, ineffective processes, and costly maintenance. There are current solutions such as Microsoft HoloLens that help maintain this issue, but they are too expensive for small/medium sized manufacturing companies. Given this context, how can we make an affordable and efficient solution that these companies of their size can utilize.

</aside>

Solution

<aside> 💻 Our proposed solution to the problem is to create a Smart Manufacturing Workflow management software. The web application will highlight any energy inefficiencies in the workflow of the company. We do this by monitoring data we collect from sensors on each machine, and then visualizing the data and creating insights for the user to analyze and execute.

</aside>

Final Prototype

For the final prototype, I mainly worked on the design and front end implementation of the login page, floor plans, and dashboard. I also collaborated with the front-end team to provide insight on the design and implementation of other pages such as floor plan summary and notifications and to determine how we want to visualize data for users to take away important information they would need to manage energy consumption. Here, I provided a few screenshots of several pages of the web application.

Dashboard Page of Web Application

Machines Section of Web Applications

Notifications Page of Web Application

Floor Plans Page of Web Application

Takeaways

• Do some user research. We did a lot of planning with building the web application and figuring out what features we need for it, but I would have liked to have see how users think about the usability of the web application and ask a manager in a manufacturing company what kind of data insights they would appreciate for software like this.
• It's important to think about design through other perspectives. When we started with our first designs for the website, I did not really think about the development aspect of them, which led our team to trouble sometimes with implementing certain features or other styling choices. I did not know this since I was a very new UI/UX designer myself, but collaborating in a cross functional team really gave me important perspectives that aided me in improving upon my designs.

Want to Read More? View Our Report.

To learn more about the backend development, the multiple designs we created over time, and more elaborate information about the project.

Final Report.pdf