Goal

The goal of this project was to make the testing and delivery of wafers faster and more efficient.

Role

User Interface Designer, Business Analyst

Process

• Getting to know our client

  We needed to gather domain knowledge about the company and the current process they use to test and deliver wafers in order to fully understand how to design and implement the product.
  
  

  

• Define the problem and come up with a feasible solution

  There wasn't an efficient way for our clients to track materials as they moved across the factory floor. Our client wanted us to use MQTT, an Internet of Things protocol, and develop a mobile app and desktop app that would work together to track and update the status of wafers.
  
  

• Requirements elicitation and documentation

  It is important to formulate documents and diagrams detailing the product and its core functionalities and goals to illustrate our plan for the product. In an Agile environment, things will likely change during development, and these documents will be edited to reflect these changes. In other words, they are a living document.
  
  Below are examples of the diagrams found in our requirements documents.

  Diagrams

  Swimlane Diagram

  This help us visualize how the mobile and desktop would interact with each other.

  
  

  Use Case Diagram

  
  

  Persona - Administrator

  
  

  Persona - Operator

  
  

  Storyboard - Administrator (updated with screens from live desktop app)

  
  

  Storyboard - Operator(updated with screens from live mobile app)

  

• Design

  Create wireframes and mockups to visualize the product.
  
  

  Mobile Application

  Sketch of mobile application

  This was our intial sketch of the mobile application. In order to start with the initial sketch, we had to conduct research to get a better understanding of inventory tracking systems. We did a competitive analysis on current inventory tracking systems and asked our clients detailed questions in order to understand their testing process. We wanted to understand the basic flow of the application and illustrate its main purpose.

  
  

  Wireframe

  

  Mockups

  After showing the initial wireframe to our clients, they provided feedback and wanted to remove the input function and only have the scanning function. Additionally, they gave us more background information about the test/load/unload process which gave us the idea of changing the home page to initiate the three step process.

  Load sequence

  
  

  Test/unload sequence

  
  

  Desktop Application

  Sketch of desktop application

  This was our intial sketch of the desktop application. We asked our clients to describe to us what functions they wanted and had them draw out what they wanted to see. Although we didn't move forward with this initial sketch, it was a great starting point and we got an idea of what they expected from us.

  
  

  Wireframe

  With their feedback and initial sketch, we created a wireframe that simplified the process and made the user interface easier to understand.

  
  

  Mockups

  After showing the initial wireframe to our clients, they provided feedback and wished to have a log tab that showed the real-time activity of the test/load/unload process.

  Status Tab Active

  
  

  Log Tab Active

  
  

• Development

  After receiving approval from clients, we started development! As always, Test! Make improvements! Test again!
  
  

  
  

  

• Presentation/Demo

  We presented our final product to Astronics executives. We also ran a demo at our annual technology showcase held at UCI.
  

  Project Overview

  
  

  Nielsen Ninjas

Skills

Insights

• Importance of gaining domain knowledge
• How to communicate and work as a team
• How to elicit information from a client
• How to use WPF and Android Studio

Recognition