Case Study
Healthcare
Frontend Development
UI/UX & Digital Experience

How Velotio helped a San Francisco-based Healthcare Provider to Revamp the Frontend of their SaaS Platform - achieving modern customisation and enhanced scalability

About This Project

A prominent San Francisco-based healthcare provider reached out to us. They wanted to leverage our engineering expertise to enhance their SaaS platform's frontend experience. The project aimed to create a modern, customizable, and cohesive user interface while ensuring exceptional SEO, UX, and scalability. Our approach involved architectural planning, component library development, Next.js implementation, and Contentful integration.

Services

Frontend Development
UI/UX & Digital Experience

Technologies

About the Client

Our Client is a San Francisco-based virtual healthcare provider that empowers people with access to high-quality and affordable care. Through their integrated mobile and web platform, members can access everyday care, pharmacy care, care at home, surgery care, and receive additional support for complex care needs like cancer and behavioral health.

Understanding the Challenge

The client’s SaaS platform offered a suite of products with diverse functionalities and harmonizing the user experience across the wide range of their products posed critical challenges. These included: 

  • Maintaining Consistency across the diverse suite of products:
    The client faced the challenge of standardizing the frontend for a diverse suite of healthcare solutions, including surgery care, live provider chat, mental health services, and telehealth, while maintaining a consistent user experience. In addition, the client wanted to ensure adherence to strict brand guidelines, and that required maintaining visual and thematic consistency across a wide range of healthcare products.
  • Customization:
    The client wanted to empower operational and product teams to customize the frontend, including altering website copy, button CTAs, page sequences, and branding elements, which posed a challenge in terms of implementation and maintaining a cohesive user interface.
  • SEO Optimization Priority:
    The high priority placed on SEO optimization presented the challenge of improving search engine rankings and visibility across the diverse healthcare services offered.
  • Balancing Scalability with Fast Loading Times:
    The challenge was to prepare for increased traffic while ensuring rapid initial page loading times, maintaining a balance between scalability and performance optimization.

"Working with Velotio was a game-changer. We were quite impressed with their expertise, especially Next.js and Contentful integration; and of course their Project Management skills. They helped us revamp our range of products and the results show that the collaboration was definitely a success.”

CTO, Healthcare Company

How We Made It Happen

Velotio initiated the project by assembling a team of Frontend Engineering experts and a Senior Frontend Architect. Our collaboration commenced with a two-week intensive discovery phase. Extensive discussions and workshops were held with the stakeholders to define and document the project's detailed architecture and execution plan, including granular estimates. This phase allowed the product stakeholders to focus on non-engineering aspects and helped us formulate a targeted Go-to-Market plan. 

1. Integrating component library and theming to ensure cohesive branding

  • Velotio's team created a customized component library leveraging Chakra UI's theming capabilities.
  • A showcase page of these customized components was developed using Storybook for product and UX teams to review and approve.
  • The component library was designed as a pluggable GitHub package, forming the foundation for frontend interfaces across the suite of products, ensuring strict adherence to branding guidelines and a consistent user experience.

2. SEO Optimization, Exceptional UX, and Scalability (Next.js Implementation)

  • Velotio leveraged its Next.js expertise to build a highly scalable application.
  • Server-side rendering and static site generation capabilities of Next.js were utilized to achieve exceptional UX and robust SEO by pre-rendering SEO-optimized pages on the server.
  • Delayed hydration techniques were applied to reduce initial load times, delivering an outstanding user experience.
  • The foundational component library, established previously, played a critical role in maintaining interface consistency.

3. Dynamic Customization (Contentful Integration)

  • Velotio addressed the unique requirement of enabling marketing and product teams to customize frontend elements.
  • Contentful, a Headless CMS tool, was integrated into the Next.js application, providing an intuitive way for operational teams to customize various frontend elements.
  • This integration facilitated swift product iterations without extensive tech release cycles.
  • Velotio's robust architecture allowed the Next.js app to dynamically fetch content configurations via the Contentful GraphQL API on server-side rendered pages, offering pre-generated static pages with content driven through Contentful's GraphQL API.

Our team successfully assisted the client in achieving a modern, highly customizable, and consistently branded frontend experience in a span of 8 months. Our approach also ensured exceptional SEO, UX, and scalability to meet the demands of anticipated high traffic.

How Velotio Made a Difference

The partnership led to the successful onboarding of more than 100 companies onto the client’s healthcare SaaS platform.

Over 10,000 users could access critical healthcare information without disruptions, enhancing the overall user experience.

The client’s operational and product teams can now customize various elements of the frontend with ease, enabling them to respond swiftly to changing market dynamics and user needs.

With Velotio, achieve breakthroughs in your product development journey.

Over 90 global customers, including NASDAQ-listed enterprises, unicorn startups, and cutting-edge product companies have trusted us for our technology expertise to deliver delightful digital products.

Talk to us

Work with modern and scalable technologies

We leverage emerging technologies to build products that are designed for scalability and better usability.

Rated 4.6/5 on Clutch

325+ highly skilled engineers

With us as your tech partners, you get access to a pool of digital strategists, engineers, architects, project managers, UI/UX designers, Cloud & DevOps experts, product analysts and QA managers.

At Velotio, we hold ourselves to sky-high standards of excellence and expect the same from our customers.