top of page
nk.
.png)
Brigham and Women's Hospital App
OVERVIEW
Helping hospital employees manage their workflow in a centralized application.
I worked on an 11-person team to design and develop a medical equipment tracking and workflow app. The app was completed in WPI's CS3733 Software Engineering class, sponsored by the Brigham and Women's Hospital.
The app is complete with a medical equipment tracking and workflow simulator, a hospital dashboard, floor map editor and multiple integrated service request modules for the hospital.
Role
Front-End Team Lead
UX Designer
Tools and Languages
Figma
IntelliJ
Apache Derby
Java
JavaFX
CSS
SQL
Links
Timeline
Mar 2022 - May 2022
7 weeks
STYLEGUIDE
Creating a Design System
I created a style guide and design system to help my team develop screens efficiently and professionally. With a tight project timeline and the programming skills of my teammates greatly ranging, I had to create a design system that was replicable and quick to implement with those constraints. I utilized some styles directly from the Brigham and Women’s Hospital website to create a design system that felt professional and consistent with the hospital’s current brand.
DESIGN ITERATIONS
Applying Sponsor Feedback
For every weekly iteration, we presented our development progress and demonstrated our application to representatives at the Brigham and Women's Hospital. We received feedback in each iteration and applied the feedback to improve our application's design and fit sponsor and user needs.
Map Editor
First Iteration — Stakeholders disliked the light UI theme and rounded text font. Screen space was limited with the side menu reserving a lot of space.
Final Iteration — Revamped our UI for a darker theme with sharper fonts. Map location icons are more dimensional. Side menu slides out upon clicking the hamburger icon on top right to reserve screen space.
Service Request Module List
First Iteration — Nothing to differentiate service request modules on list.
Final Iteration — Icons that correspond to service request modules to differentiate on list.
FEATURE IDEATION
Hospital Emergency Code Alert Feature
I was required to implement a special feature into the application. I referred to the Brigham and Women's Hospital manual to ideate a practical feature that would enhance the usefulness of the app for employees. I implemented an emergency code alert system that could be utilized and displayed on the map editor screen of the application. The emergency codes are pulled directly from their manual. The system allows for employees to visually see where emergency codes are called on the hospital map, and gives them the option to easily add and address emergency codes.
DEVELOPMENT
Back-end Development
We used Apache Derby to store map location, medical equipment and service request data. We used this data to load into the map editor.
Front-end Development
We used React Native JS to develop the front-end of the application. The framework allowed compatibility on IOS and Android.
DELIVERABLE
Final Application
Our team successfully delivered the requested application at the end of the 7-week project span.
Users can log in using their username and password or tapping their ID Card on an RFID card reader plugged into the device.
Login Screen
Users can see locations, medical equipment, hospital emergency alert codes and service requests on every level of the hospital in a map view. They can edit, add and delete elements on the map based on their needs.
Map Editor
Users can submit service requests for various services listed. The module forms guide users through the process of submitting a service request.
Service Request Modules
TAKEAWAYS
Project Reflection
A large part of my role as the Front-end Team Lead was managing engineers and ensuring they adhered to our design system so that we had a uniform and professional UI throughout the application. Through this, I was able to learn how to direct engineers and host design and code reviews to fix any UI discrepancies.
bottom of page