Scaling Design Systems & Ensuring UI Consistency across Teams

The last time you picked up your prescription medication at your local pharmacy, there’s a good chance you unknowingly benefitted from an Arlington, Virginia-based company called Surescripts.

Surescripts enables doctors, pharmacists, and other healthcare providers to securely share important healthcare data like medication history and clinical notes. Not only does this allow healthcare professionals to facilitate prescriptions, work with insurance companies, and provide personalized care, it also helps patients get their prescriptions faster and with less hassle and ensures they don’t overpay for their medication.

“We started running into issues with our UI implementations because each team was building front ends that looked nice, but weren’t always built in a way that made them easy to maintain.”

Quote author avatar Quote author associated organization
Jake Anstadt Senior Enterprise Architect

Managing the exchange of healthcare data across hundreds of data partners requires significant investment in infrastructure and backend engineering. As a result, backend engineers at Surescripts significantly outnumber engineers with deep front-end expertise.

Historically, UI development was focused on a single, monolithic admin console used by Surescripts’ customers and internal teams. Like many legacy systems, though, this application became increasingly difficult to maintain and update.

The team undertook a multi-year project to decompose the admin app into microservices. While this allowed for more rapid iteration, it also meant the work of building and maintaining Surescripts’ UIs was now increasingly distributed across dozens of teams, many of which lacked dedicated front-end engineers.

As a Senior Enterprise Architect, Jake Anstadt was tasked with establishing a modular approach to UI development that didn’t require highly specialized frontend engineering experience but was flexible enough to support the wide variety of applications his team oversees.

If Jake’s team updated a shared component or style, it would frequently cause the various implementations to break, requiring the UI to be reconfigured and taking development time away from feature work.

“My goal as an architect was to choose a few frameworks that allowed us to be very opinionated about how we build these applications, create shared components, and provide documentation on how to develop these microsites.”

Quote author avatar Quote author associated organization
Jake Anstadt Senior Enterprise Architect

Leveling up frontend development through interactive documentation

To enable a more self-service model for front-end development, Jake’s team built a system of shared components along with detailed internal documentation and interactive examples.

“We needed visual representations of the proper ways of using our shared components as well as how to style them. We’re using StackBlitz to provide actual working examples within our ecosystem. This means our developers are no longer building UIs by copying code from existing apps and modifying it in all sorts of unpredictable ways.”

Quote author avatar Quote author associated organization
Jake Anstadt Senior Enterprise Architect

While static code examples are helpful for understanding how a UI element works, Jake wanted to empower development teams to modify and manipulate the code without having to spin up a development environment to do so.

Having encountered StackBlitz previously in the documentation of popular open source frameworks like Angular, Material UI, and Bootstrap, Jake felt the browser-based approach would be a great fit.

However, Surescripts processes massive amounts of highly sensitive healthcare data and needed a solution that could run entirely within their firewall.

With StackBlitz Enterprise, Surescripts runs StackBlitz on their own secure infrastructure while still providing a fast and familiar browser-based experience to their developers.

Unlocking feature development

It’s not just Surescripts’ internal teams who are noticing the difference. Many of Surescripts’ customers had requested real-time dashboards and analytics to help them understand their usage of the system.

By using shared components, they can move really quickly to build and expose UIs to our customers that are actually helpful instead of generic and outdated.”

Quote author avatar Quote author associated organization
Jake Anstadt Senior Enterprise Architect

Individual engineering teams are empowered to build according to their specific needs without the need for one-off and brittle front-end code.

Looking forward: Closing the UX/developer feedback loop

As Surescripts continues to grow, the company is introducing a dedicated user experience (UX) function. With the system Jake’s team maintains, the growing UX team can experiment with prototypes for new or modified components themselves, without having to set up a local development environment.

Additionally, the UX team can share proofs of concept with developers in StackBlitz, giving them a headstart on implementing them in production.

As the team has continued to expand, this workflow has started to pay dividends. The UX team is more able to design workflows that meet our users’ needs rather than simply designing a UI on top of a backend our developers have already built.”

Quote author avatar Quote author associated organization
Jake Anstadt Senior Enterprise Architect

Reach out today

to start a conversation about how StackBlitz can help your team!

enterprise @ stackblitz.com