Scaling Design Systems and Ensuring UI Consistency across Teams with Surescripts
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.
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.
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.
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.
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.
Increase your team’s speed and consistency
We can help! Get a demo or talk to us about your needs.