CASE STUDY
Streamlining HCP Website Design with Atomic Design and Collaboration
Brad Frost invented the term "Atomic Design" in his 2013 blog post and later expanded it into a book. This concept was revolutionary at the time because websites were typically designed and meticulously hand-coded page by page with final content. While breaking down content into smaller "atoms" for reuse was common in application design, applying this approach to enterprise websites proved challenging. Content requiring complex visual communication was particularly difficult to "atomize"—which explains why even in 2024, pharmaceutical websites for healthcare professionals remain predominantly custom designed and hand-coded. The content's complexity combined with rigorous legal reviews leads to multiple revision rounds, inflating both timelines and budgets. Despite these challenges, our agency embraced technical innovation by migrating our client's extensive healthcare professional (HCP) website to an atomic design system.
Bridging the Gap: Overcoming Inefficiencies in Traditional Website Design
Our traditional approach, relying on page layouts as the ultimate "source of truth," proved inefficient. Timelines for updates are very long with the stringent legal reviews required for pharmaceutical websites at multiple points when design flats are the first point of review, and the build second. Additionally, the “brand book” provided by the branding agency failed to address challenges specific to web design, like a more flexible color palette needed for all the complex states required by UI design that also can pass accessibility requirements for contrast and live in a responsive website that fluidly reformats the content to fit any screen size. These highlighted the gap between print-first mindsets of traditional agencies and modern digital needs, and gave us reason to invest in a bigger solution that would serve our client and provide considerable efficiency both immediately and over time.
Solution: Streamlining Design and Development with Atomic Design and Collaboration
My Role and Responsibilities: As the design lead, my responsibilities included overseeing the design for the migration of a complex website. This website consisted of seven major sections, each owned by different brand teams and agencies and each with a slightly different visual language. Unfortunately, we only had creative files for a small portion of the website since the others were designed by other agencies. Since we couldn't access their assets, we had to recreate dozens of pages of content within a very limited time frame.
Process: By embracing the Atomic Design paradigm, we shifted our focus from designing entire pages to creating modular components. This approach, which draws inspiration from Brad Frost's Atomic Design concept, has enabled us to streamline both the Figma layout design process and the way we build pages within the Adobe Experience Manager dev environment.
Design Decisions: We prioritized the manuscript over the layout as the true source of content, ensuring flexibility and responsiveness. Our design system became a bridge between traditional branding models and contemporary digital needs, and added enormous efficiency to the total website timeframe.
Implementation:
We created a modular set of components based on a limited set of styles all connecting to the brand look and feel in a dedicated Figma library and a parallel collection of CSS styles and components within our CMS. This allows each design snippet to be easily accessed within the dev environment, enabling the rapid creation of new content. These pages seamlessly integrate with the look and feel of the website, requiring minimal effort from the design and development teams enabling more agility for the client with minimal pressure on their budgets.
We have developed a set of modular components that are based on a limited set of styles. These components are designed to align with the brand's look and feel and are stored in a dedicated Figma library. Additionally, we have created the same collection of styles and components prebuilt from CSS inside the content management system (CMS). This approach allows designers and developers to easily access and use design snippets both as design flats in Figma and in the development environment, facilitating the rapid creation of new content.
Furthermore, these pages seamlessly integrate with the overall look and feel of the website. This integration requires minimal effort from the design and development teams, resulting in increased agility for the client while keeping their budgets under minimal pressure.
Collaboration: Collaboration played a pivotal role, involving teams from creative, development, account management, UX, SEO, strategy and the client. The transition from a layout-centric to a manuscript-centric approach required interdisciplinary coordination.
Results: Quantify the Impact
Metrics and KPIs: The design system led to a substantial reduction in review cycles, significantly cutting down time and labor costs. Quantifiable improvements included enhanced design integrity and faster page development.
User Feedback: Positive feedback from users and stakeholders acknowledged the improved user experience and design consistency.
9 Challenges and Lessons Learned:
1. Complicated Content, Limited Time
One of the initial challenges we faced was dealing with intricate scientific content within tight deadlines. Conveying complex research studies at a glance to HCPs who may not have a high degree of scientific literacy was our biggest hurdle. Instead of succumbing to the pressure, we leveraged it as an opportunity to streamline our processes, fostering a more efficient and focused approach to content creation.
2. Aligning Client Approval with Templates
Aligning multiple brand teams, each with their own section of a website and different design patterns, with a single set of pre-built templates was initially challenging. However, it led us to reevaluate our approach and taught us a valuable lesson in client collaboration. It underscored the significance of proactive communication and ensuring alignment at every stage of the project.
3. Learning a New Process and Team Collaboration
The introduction of a new process and team collaboration dynamics presented a learning curve. Embracing this challenge positively, we seized the opportunity to define ownership roles more clearly, fostering a stronger sense of accountability and synergy within the team.
4. Adapting to Figma
Previously, our team primarily used Sketch and Photoshop for design projects, occasionally utilizing Adobe XD and Illustrator. However, we made the decision to switch to Figma due to its advancements in cloud collaboration, component constraints, and autolayouts. While this adjustment came with its challenges, we saw it as an opportunity to broaden our skill set and embrace the innovative features that Figma offers.
5. Rethinking the Layout Approach
Reflecting on the initial decision to forgo traditional layouts, we viewed it as a crucial moment to reassess our strategy. This led to a collaborative exploration, pushing us to find alternative methods for delivering content and design direction to the development team. This guided us towards a more effective and customized approach.
Delivering content to an offshore development team with only component suggestions carried some risk, as it placed a lot of design decision-making in their hands. We adapted to an approach of "see what we get, then tweak it," allowing us to build most of the site without design intervention. Later on, we identified the pages that truly required a designer's input.
6. Managing Expectations and Personal Challenges
Navigating personal challenges, including anxiety and discomfort outside our comfort zones, became an unexpected facet of the project. However, this provided an opportunity for personal growth and resilience. Overcoming these challenges became a testament to our team's adaptability and determination.
7. Client Communication
When faced with client confusion, we turned it into a chance for transparent communication. We addressed their concerns openly, turning moments of ambiguity into opportunities for collaboration and refining our deliverables.
8. Embracing Failure as a Step Towards Success
The fear of failure transformed into an understanding that setbacks are inherent in innovation. By letting the initial approach fail gracefully, we gained insights that led us to a more robust and refined solution.
9. Collective Team Belief
Despite personal doubts, the team's collective belief in the new process became a driving force. This unity propelled us forward, reinforcing our commitment to making the project a success and showcasing the resilience of our team culture.
Lessons Learned
In retrospect, the hurdles we faced became stepping stones to a more resilient and adaptive workflow. The anxiety and challenges were not roadblocks but rather catalysts for growth, strengthening our team dynamics and enhancing our problem-solving capabilities.
Our design system represents a milestone in our approach to website development. It's not merely a change in methodology but a transformation that aligns with contemporary digital needs, fostering efficiency, consistency, and a superior user experience.
As we continue to navigate the digital landscape, this case study stands as a testament to our commitment to innovation. The journey doesn't end here; it informs and inspires our future work in delivering exceptional digital experiences.
Designs by Ruxandra Nastase.