On the Verona, WI campus, Epic employs over 10,000 people in over 30
different buildings. As a member of the Computer and Techonology
Services team, my colleagues and I spend a good portion of time
traversing the campus and making computer equipment deliveries. With
each building having 150+ offices, navigating can be extremely time
consuming.
Epic’s internal website currently has a map system, but for our use
case it's very limited as it only allows you to search one office at
a time. My team does deliveries for upwards of 20 people at once, so
it is a huge hassle to search for each office individually.
To speed things up, I fully developed an internal tool that allows
for input of any number of offices. It ouputs an interactive webpage
with highlighted rooms on floor plan maps.
Demo
Features and Improvements
When I first created this tool, it was very basic and lacked
functionality. It would only work by taking input from a seperate
internal webpage, and would display a hardly readable list of map
images. Over the timeline of this project, I continued to scale the
application to make it more user-friendly.
V1
V2
UI Rework
Because the original map components relied on existing PNG files,
they were very hard to read; especially when using a 14" laptop
screen. I refactored hundreds of lines of code to create polygons
for each room object. This allowed me to add individual, readable
labels and color-coding based on room type.
Hovercards
The main drawback to using this map system was that it was not
very interactive, and it did not allow the user to see office
occupant information. I implemented hovercards so the user could
view the occupant's name, team, role, tenure, calendar, and
whether or not they were in the office. Additionally, I included
quick links to the occupant's devices and profile within our
internal site, along with easy methods of contact.
Custom Input
Most deliveries were done based off a seperate internal tool, but
a lot were done based off of arbitrary office lists. I added a
feature to allow for custom input based on a user-entered list of
offices. It also accounted for errors such as misformatting and
building abbrevations.
Check-Off
Implemented a check-off feature to make floor deliveries more
efficient. Clicking on an office on the map would grey it out,
allowing easy tracking of visited offices. Once all offices were
visited, the entire map would be greyed out.
Printer-Friendly Maps
Some of my colleagues prefer to leave their laptop behind during
deliveries, as it takes up too much space. Added a "Print Maps"
button for easy printing which would reformat the webpage for
better readability on paper.
Zoom
With different employees working on different sized screens
utilizing different workflows (full-screen view vs. split-screen),
I added zoom controls. This way, you could easily zoom in closer
on a map, or view multiple maps at a time.