Code Status Check
An in-house desktop application for software engineers to check the health and code status of their running applications
January to March 2020, June to July 2021
Undergraduate Industry-Sponsored Student Project
Team of 3 UX Designers
My Roles
-
UX Designer
-
UI Designer
Software
-
Adobe XD
-
Figma
About the Project
The Code Status Checker is an in-house desktop application designed to allow software engineers at the digital product agency Brand New Box to monitor the health of their applications.
The Assignment
Brand New Box is a digital product agency that has a lot of different clients and different applications to keep track of. The software engineering team at the agency approached our student team to create a solution for them to monitor their running applications. They use a system of checks (which consist of specific code written to check for errors, older versions of existing application code, expiring code, etc.) that run against the different applications they create and manage.
Our assignment was to create a desktop application for these engineers to monitor what checks were failing, expiring and passing across their different running client applications.
Research
Interviews with Software Engineers
To understand our assignment involved diving deeper into the space and knowledge of the language used among software engineers at the agency. To get a full scope of their needs, we conducted semi-structured interviews with different software engineers at Brand New Box.
We used affinity mapping to group together quotes we heard from the software engineers during our interviews. We then were able to glean research insights from this data.
Research Insights
-
Software engineers need to be able to comprehensively view all their running applications at once in glanceable way.
-
They also need to have the ability to filter through their applications based on failing and expiring checks, as well as filter through applications based on specific code.
-
In the event that the agency expands, administrators need to be able to track teamwork and individual projects on the application.
Opportunity Statement
How might we create an application for software engineers to comprehensively display the check status of each client application and filter through applications based on check status?
Creating Our Solution
Information Architecture
I mapped out the information architecture of our proposed application to get a clear understanding of how software engineers would interact with it. I chose to map out the IA to provide a framework for our team to guide us while creating prototypes.
Rapid Prototyping and User Testing
After creating wireframes and paper prototypes, we created mid to high fidelity interactive prototypes of our desktop application, and user tested these with Brand New Box software engineers.
Our first prototype featured each application with a status bar that indicated the amount of checks failing, expiring and passing in red, yellow and green respectively. We also put the number of failing checks at the top of each application.
Information Architecture Mapping for our desktop application.
Mid-fidelity prototype of desktop dashboard overview.
Mid-fidelity prototype of detail view when an application is selected.
Based on user testing, our team chose to go with a darker theme as opposed to a lighter theme, reducing screen glare experienced by our users.
With our next round of digital prototyping, we experimented with making the check status bar for each application a gradient. We also removed the numbers from the top of each application, as we were told that they did not give the users enough information and were overwhelming.
We changed the display system of failing, expiring and passing checks to numbers that would appear when a user hovered over the status bar of the application. If a user hovered over the red portion, the number of failing checks would be displayed. The same system applied to expiring and passing checks.
Mid-fidelity prototype (version 2) of dashboard overview.
Our user testing showed that the gradient display method was confusing to software engineers, with the exact proportion of failing, passing and expiring checks being difficult to understand. This feedback led me to pivot back to the original layout of the check status bar when I revisited this project to create an updated version in June of 2020.
Revisiting the Project in 2021
With the skills I gained over the course of my graduate program in Human-Computer Interaction and Design, I turned back to this project to critically analyze its shortcomings and find opportunities for improvement and further development. I was not completely satisfied with my work on the project as an undergraduate student and felt like it was a missed opportunity for me to showcase my ability. I further developed it to meet my own standards of execution.
My Updated Solution
Dashboard Overview
For my revised version, I created an overall dashboard with quick stats displaying the number of failing, expiring and passing checks that corresponded to a color code that was universally understood: red for failing, yellow for expiring and green for passing.
From the overview, users can select a specific check category, such as expiring checks, and view details about applications that are expiring. They can also view specific code within each application, to be able to identify what code is expiring and what code is passing.
Dashboard overview with application code detail screen.
Filtering Applications and Checks
The application also features a filter system where software engineers can input the specific check or code they are looking for, and view all the applications using it. They can also search for individual applications and then view the code and checks within that particular application.
Process of filtering through applications based on checks.
Viewing Team Updates
Due to the agency's growing size, I anticipated that administrators would want to be able to view recent updates and the work of software engineers. I added a teams tab that would allow administrative users to view other software engineers' activity and progress on the application, thus making the application scaleable. The business purpose of this feature allows the software engineering team to align themselves and create priority-based action items.
This feature displays each application created and run by Brand New Box, as well as the status of the applications (green for passing checks, yellow for expiring checks and red for failing checks) and when they were last updated and by whom.
Team overview with recent activity updates and list of active projects.
Results and Next Steps
As this application was created as part of an industry-sponsored undergraduate student project, our team worked with software engineers to hand off our high-fidelity prototypes. I created a revised version of this application to showcase the knowledge and skills I gained over the course of my graduate program to meet my personal standards for execution.
I hope to be able to pitch my revised version to Brand New Box, and over the course of time I would like to be able to make changes to the application's user experience to fit the expanding agency and its growing needs.