Mary Francine Delos Reyes


UI/UX designer with a background in Computer Science and Engineering.

resume︎︎︎
about me
playground


︎    ︎    ︎   



Mary Francine Delos Reyes


UI/UX designer with a background in Computer Science and Engineering.

︎    ︎    ︎  

Standford National Accelerator Laboratory





TYPE
Software Engineering Course

COMPANY
SLAC National Accelerator Laboratory

ROLE
UX design, UI design, Frontend

TIMELINE
Jan 2022 - May 2022

Redesigning the SLAC National Accelerator Laboratory’s cable management experience, enabling engineers to easily handle cable data, issue tracking, and more.


View Prototype ︎︎︎



1. DISCOVERY

Background


SLAC National Laboratory is a research facility operated by Stanford University and funded by the US Department of Energy. With a rich history of pushing the boundaries of knowledge, SLAC drives discoveries and innovations for the betterment of humanity. At the core of the laboratory is its 2-mile-long particle accelerator complex, which once played a pivotal role in particle physics research. Today, it powers the world's brightest X-rays through the Linac Coherent Light Source (LCLS), an advanced X-ray laser.

To manage the extensive cabling infrastructure at SLAC, a single Oracle APEX database is utilized. Currently, engineers rely on manual processes and file formats such as Excel spreadsheets and CSV files to specify and monitor cable installations. This approach is error-prone and inefficient. Additionally, there is a cumbersome I/O page within the database for handling these tasks.

Building shared understanding


Our team met with our stakeholder/mentor to understand the company needs, obtain old database mockups, and learn about our timeframes. We wanted to gather as much information as possible about the current design and the scope of the redesign, including additional features. Its also necessary to have an outline of the design process. The first place to start is the “double diamond process,” shown below.

Credits: Taras Bakusevych on Medium

In the initial meetings, we identified our primary target audience as engineers and admins. We focused on defining the tasks they needed to accomplish, their goals, thoughts, and what they actually required. This helped us understand their motivations, expectations, and to emphathize with our users.


Jobs-to-be-done framework guides this process



Deconstruct existing design 

Based on the current design, it only has one page with an upload button and verification the identification of the engineer and admin. This action flow directly goes to their Oracle database. We will still implement this feature but with better user interface and additional features. However, manual labor is still involved, and our goal is to eliminate the need of the middle man.




2. DEFINITIONS

Prioritizating pain points


Our main objective was to create a user-friendly web-based UI for engineers to upload, check, and track their database specifications. The user interface needed to provide error correction in real-time to prevent mistakes from being propagated. So we need to help identify the key problem areas with the existing design and finalize what to prioritize and organize our timeframes.




After identifying the pain points using the impact and effort matrix, my team and I developed separate user flows for administrators and engineers. During this process, we faced challenges related to redesigning the login and notification systems. To address these challenges, we scheduled weekly meetings to discuss questions, address the issues we encountered, and provide updates to our mentor.


This user’s journey helps us determine the paths taken by two distinct user types, while still having similarities. We recognized that administrators hold the primary hierarchy as they are responsible for approving or rejecting changes made by engineers to the database.

3. EXPLORATION

Ideate and existing design

 
After understanding the user journey and the challenges we encountered, our next step is to determine the scope and structure of the design. To guide us, we examined the existing design on SLAC's website application. We opted to maintain consistency by using their color theme, as it offers a familiar and professional look for the redesign. Similarly, we utilized the logo resources provided by SLAC for a cohesive branding approach.

Design System




The Prototype


To achieve the high-fidelity design, our team aimed to develop a web UI that allowed for file import or direct input, filling in 5 to 20 fields, and verifying the uploaded data. Additionally, the UI should include a review and approval process involving other users in the system. *We had to omit certain steps in the design process to meet the given timeframe and prioritize development for coding.

The Engineer and Admin Dashboards display action items and feeds related to cable listings. The Admin holds a higher hierarchy and has the authority to approve or reject changes made by the Engineer.


When uploading a Captar file and standarization rules, a form is presented to specify the respective admin. Regarding bulk uploads, we are still considering whether to use the zip file method or the cable upload navigation. If the file does not meet the standardization requirements, an error message is displayed.


Once uploaded, engineers can comment and view their sent items statistics.


Logout popup



4. EXECUTION

Delivering tests and implementation


As part of a software engineering course, I took the lead in developing the frontend using React, HTML/CSS, and Javascript. Our team was responsible for delivering specific code and implementing our design in each sprint. At the end of the course, we presented our progress to stakeholders. To view the code version, please contact me on my email or linkedin.

Reflections and Awards


This project and course provided me with invaluable real-world experience, especially working with a company like SLAC. I gained knowledge about agile methodologies, the significance of redesigning projects, and the importance of utilizing existing designs, considering their purpose and time sprints.

The Cable Company aka Smart UI Cable Management was rewarded for Best Code Software Engineering Capstone from Top Finisher (Innovate to Grow).