Background
I was invited to lead the product design of a telemedicine solution at a Swedish healthcare startup, aiming to provide a digital-first, on-demand primary care model globally. Motivated by the global challenge of doctors' availability not meeting growing healthcare needs and a Covid-driven shift to digital health care solutions, I eagerly accepted this opportunity.
Challenge
Instead of a conventional expansion approach based on specific market needs and rolling out digital solutions market by market, the startup pursued an ambitious strategy by forming joint ventures with local partners and offering a universal white-label solution for all markets with customizable capabilities.
Impact
Through close collaboration with the product team, a scalable App solution was crafted and launched in Turkey and Greece to allow users/patients to quickly seek medical advice based on symptoms, access remote doctor consultations, and book offline appointments. It allows quick deployment with feature flags and customizable elements at different levels, enabling rapid expansion across multiple markets. The service was launched in Turkey and Greece in the beginning of 2024.
App Store review
App UI screens
Design for feature flags and flexible deployment
To execute the product strategy of white label product creation, the product team and I opted to develop the App with feature flags (configurations on three levels). This eliminates the need to maintain separate feature branches and minimizes changes to adjustable views.
When designing, I put big efforts into balancing a "decent enough" design version to facilitates efficient customization and scalability against striving for the best user experience for the specific user stories in particular markets. The majority of the user flows and UI screens were created by leveraging universal design patterns and UI elements from the best practices.
Feature flags & levels of configurations
Design handoff files: deployment specs
Improve language localisation with a design-led approach
Managing language localization for multiple markets is not straightforward, as it involves various stakeholders participating at different stages of the process. The product team faced several challenges, including frequent mismatches between the files delivered and those used in the production environment, along with a largely manual process for updating copy changes.
After testing various options, Lokalise was chosen as the solution. With its plugin and API integration, the team was able to easily sync new translations back to Figma, enabling them to start working on translations as soon as the product design was ready.
To facilitate smooth collaboration and clearly communicate how to be involved at each stage, a workflow chart was illustrated. In addition, Figma page structures and customized naming conventions were created to further enable an efficient workflow.
After testing various options, Lokalise was chosen as the solution. With its plugin and API integration, the team was able to easily sync new translations back to Figma, enabling them to start working on translations as soon as the product design was ready.
To facilitate smooth collaboration and clearly communicate how to be involved at each stage, a workflow chart was illustrated. In addition, Figma page structures and customized naming conventions were created to further enable an efficient workflow.
Language localisation workflow with Lokalise
Key naming rules and copy ownership
Lift the design consistency via component library and tokens
To enhance the consistency and quality of the UI design and accelerate the design and development process, a lean design components library with defined design tokens was crafted and continuously refined.
Design tokens and component library