Photo of our recent intern Shannen Wu

the virtual impira internship experience

Our recent engineering intern, Shannen Wu, describes her experience with Impira's internship program and working remotely. She also shares a high-level overview of her project where she built an interactive UI for viewing, labeling, and correcting predictions on assets that allows users to easily leverage Impira’s machine learning platform.

I was mindlessly strolling through the booths at the MIT Fall 2019 Career Fair when I came across Impira’s stand, knowing absolutely nothing about the company besides that they were a startup with a very aesthetically-pleasing logo and banner. I chatted with a couple engineers, dropped off my resume, not thinking much about it, and now—nine months later found myself taking ownership for one of Impira’s core UI features, one of the most interesting and impactful projects I’ve done across all my previous internships.

expectations vs. reality

After I accepted my offer, I was initially excited at the thought of living in San Francisco for a summer, going on overpriced coffee breaks with teammates, and working for a Series B startup, especially after only having interned for big tech companies. 

When news first came about the internship going remote, I was concerned. I thought working remotely meant being isolated, getting assigned a sidelined project that would simply be reverted after I left, and being blocked for days on technical issues. I had no idea how I would integrate with the Impira team and receive the adequate support I needed to be successful. 

However, my expectations proved wrong starting day one. Mark, my manager at the time, spent 3 entire hours with me over Zoom just to help me set up my dev environment, and throughout the entirety of the internship, my mentor Joren was always available and quick to provide assistance whenever I was blocked.

Screen capture of Slack conversation. Shannen: ... hi is this the git police? Joren: Git One One what is your emergency?
Screen capture of Slack conversation. Shannen: my confusion has been cleared. Thank you Impira help desk. Joren: {inserts rain emoji arrow to sun emoji and green checkmark} Thanks! Please submit your rating on {url to internal fake link}
My mentor Joren/Impira Help Desk, positive ratings only, 5 star experience

the project

Over the course of twelve weeks, I built an interactive UI for viewing, labeling, and correcting predictions on assets that allows users to easily leverage Impira’s machine learning platform. Users can more easily extract text and tables on their documents, as well as adjust incorrect OCR or predictions through this new asset viewer, one of Impira’s core selling features.

A preview below:

Sample purchase order with different sections highlighted in different colors. A panel to the side shows more details about how the colors map to certain data points.

features

new reusable UI components

I implemented a majority of the presentational components from scratch, as tooltips from external libraries didn’t support the complex interactions I needed. The tooltips I made were customizable in displaying a confidence indicator, editing inner text, a functional search dropdown, and the ability to select a field type.

selection

Implementing similar behavior of text selection on a real typed document, as well as augmenting it to allow adjustment is a lot harder than it looks! 

a cursor moves over address text to highlight in yellow.

Mimicking a “box” selection with resizing was also quite tricky.

A cursor drags a blue box over a table of items. The cursor reshapes the box to fit more precisely over the table.
backend integration

I added some complex features in the tooltip in order to enable the user to label text or tables, correct the OCR, adjust the selection, and create a new field in one single step. I made sure that these interactions were differentiated in the front end code before calling the appropriate mutate function to talk to the backend.

small details

A big part of designing a good UI depends on attention to detail. To improve user experience, I implemented keyboard navigation for components such as dropdown selection, resize/adjust handlers for selections, page jumping, and many other details that would make labeling documents seamless and easy.

takeaways

Some of the biggest takeaways for this internship not only include much more extensive knowledge of writing React.js, but also a new sense of how to navigate the involved processes of engineering. I learned how important cross-functional communication was working with designers, PMs, and other engineers, and also what it meant to assume complete ownership of an end to end product.

I enjoyed a lot of freedom and autonomy being one of the only two front-end engineers at Impira. I was trusted to take on tasks of a typical full-time engineer and I never felt that my work was limited to that of a sidelined intern project, rather an important and essential component in the Impira GA release. There were times where I was called to pick up on tasks outside the scope of my project, sometimes with tight external customer deadlines. There were also times where I needed to design and implement components and features from scratch because they were missing or not specified in the mocks. 

In the end, I learned how to deliver a product end to end, from whiteboarding sessions on UI design and implementation, writing quality code, creating user test plans, addressing feedback, and shipping it at the end. I was able to wear many hats throughout the internship.

special thanks

I want to thank my mentor Joren for all the help and guidance he provided throughout this internship. Despite everything being virtual, he made my experience at Impira fun and enjoyable, either through patient hours of debugging sessions, or joking around and exchanging bread recipes. Really helped break the monotony of remote work!

I also want to thank JT for being such a kind and caring manager, and for providing great advice about navigating the workplace or life in general.