Archana Sankaranarayanan is a senior UI Engineer at Netflix where she builds tools to improve development velocity and obsesses over creating simple, intuitive, and accessible interfaces. Before settling into her enviable position at Netflix, she lent her expertise on style guides to build interfaces for Coursera, Quantifind, and Adobe.
Nowadays, she’s a key member of the Spinnaker team and is getting ready to give an in-depth talk at the Spinnaker Summit about how to use the Spinnaker UI style guide to build your own UI features and speed up development.
Archana kindly agreed to lend us some of her free time to answer a few questions about her background, her work on Spinnaker, what Spinnaker users can expect in the near future, and the importance of Continuous Delivery tools for developers.
Feeling curious? Here are her answers.
Tell us a bit about your background. How did your career lead you to Netflix?
Human Computer Interaction wasn’t a thing when I was growing up. But when I took my first introductory class in Human Computer Interaction at Carnegie Mellon University, I was enamored by the possibility of building products that matches users’ mental models.
So I started doing more work in rapid prototyping and contextual inquiries alongside engineering. I focused on designing and building web products that were simple and intuitive. In response to the ever-increasing complexity in frontend engineering, I built tooling like a style guide starter kit and PostCSS plugins to make my workflow more efficient.
It was actually my growing interest in tooling which led me to Netflix and specifically the Spinnaker team. I love the challenges involved in designing and building for large amounts of data and catering to engineers who typically use these tools under high stress.
Important question: What are you binging on Netflix right now?
I enjoyed Sacred Games. My all time favorite is Chef’s Table; I watch some of the episodes over and over again!
Let’s get into Netflix’s open source CD platform: Spinnaker. What inspired you to join the Spinnaker team?
The challenges involved in designing and building to improve engineering productivity has always been a great source of inspiration.
Spinnaker already has a rich feature set around cloud deployments and is committed to providing users a cohesive experience for the entire continuous delivery lifecycle. This includes canary analysis, artifact and dynamic configuration deployments, application dependency management (exclusive to Netflix at the moment), operational alerting, resource cleanup and much more.
The broad applicability of Spinnaker made it very attractive for me, especially given the UI complexity that needs to be solved along with integrating all the different pieces that make up an engineer’s workflow.
What do you find the most exciting about working on Spinnaker?
The ever-growing enthusiastic engineering user base is very exciting. More importantly, I love being part of the Spinnaker team. The team is smart and funny with great empathy for the community and users.
We all bring different skill sets and perspectives that foster healthy discussions and help build a robust, safe and transparent way for our users to deploy to the cloud.
Can you tell us about any cool features you’re working on?
Team Dashboard. The goal for this cool new feature is to allow developers to see where their commit is in the overall deployment process. Questions like: did the build for the commit pass in Jenkins, did the pipeline triggered from the build go through, is my commit going in with other commits, when did it get deployed, is it live yet?
It helps engineers gain visibility into their workflow without having to open a myriad of different tools. This is just the beginning of what this dashboard can be.
We’re also evaluating the possibility of making this dashboard the place where teams can get at-a-glance view of the state of all their applications and pipelines, cluster health, deprecation warnings for dependencies, vulnerabilities and other audits that can help with the maintenance of everything your team owns.
Plenty of software companies are adopting Spinnaker for safer deployments to the cloud. Have you received any feedback from them that just made you think, “This is why I do what I do.”?
We regularly meet with companies and teams that use Spinnaker. It’s always humbling and inspiring to see how others use it and how passionate our community is about making Spinnaker better for everyone.
The best experience I have had is while I was waiting to get in to a session at Google I/O and the person in front of me was talking about how much he enjoyed moving to Spinnaker.
Also, Target recently published this post where they talk about how they adopted Spinnaker to enable hundreds of zero-downtime production deployments per week across 1,800 stores.
Considering the growing popularity of CD. How do you think learning CD tools like Spinnaker helps developers grow their careers?
Deployments to the cloud were a black box for me until I started using and working on Spinnaker. The patterns and best practices encapsulated ultimately allow you to focus more on building your product and less on the minutia of how it will be deployed. Spinnaker has drastically improved my engineering efficiency and I believe it will for other engineers too.
Let’s talk a bit about the Spinnaker UI style guide. How did this come about and why is this so important for development?
Spinnaker has deliberately defined UI elements and patterns that work well for presenting large amounts of data in an efficient manner. I wanted a way for the rest of the internal tools at Netflix to leverage these UI/UX patterns. The Spinnaker style guide was born out of this need.
As I started pulling out common patterns into the style guide and updating Spinnaker to use them, we were able to cut down on custom CSS and speed up developer velocity.
We have also been carefully consolidating patterns for UI elements like buttons, form elements etc., which is helping us achieve better UI consistency throughout the application. It’s still a work in progress, but has proven to be very beneficial.
What did you find the most challenging about developing the UI style guide?
Updating all the existing styles in Spinnaker to use the style guide patterns has proven to be difficult.
We include Bootstrap CSS bundle for our base styles and grid system, and are in the process of migrating from Angular 1 to React. We also use external libraries for forms and form validations. All of this makes it challenging for us to migrate all the components to use the style guide patterns. It’s still an ongoing effort but our migration to React will help ease this process.
Luckily for us, you’ll be giving an in-depth talk about the Spinnaker UI style guide at the 2nd Annual Spinnaker summit in Seattle. Can you give us a sneak peek at what you’ll be covering and what you hope people will take away from it?
Spinnaker style guide is made up of UI elements we use every day to build features. It’s divided into three parts: foundational UI elements like colors, type and buttons, complex UI elements like pods, forms, badges etc., and utility elements like layouts, alignments and layering.
These are available as raw CSS which makes it very easy to use and customize. I am excited to share all the details in the talk. I will also talk about how having the style guide has improved our engineering efficiency and cut down on custom CSS.
I hope this inspires everyone in the community to start using these patterns for their own UI feature developments and eventually contribute back to the guide. We all can leverage it for better UI/UX consistency.
Bonus question: What blogs do you regularly read that you recommend for anyone in UI development?
I enjoy reading Frontend Focus and Fresh Brewed Frontend weekly. I also love the FrontEnd HH podcast and highly recommend it.
If you found this as fascinating as we did, make sure to follow Archana on Twitter and don’t miss her insightful talk at this year's Spinnaker Summit. She will also be hosting office hours for hands-on tutorials.
Get your ticket to this rare opportunity here and we’ll see you there!