Revamping the Circle App: Creating a healthcare ecosystem

Designing a master healthcare app - from exploring new product offerings to reading health insights created by our scientists and physicians.

Company : Prenetics
Title : Senior Product Manager (Direct report to CEO)
Role : Owner of the Business Unit Circle Snapshot & Circle DNA

Table of content

Background

When I embarked on this project, my objective was to create "Circle SnapShot," a user-friendly at-home blood test consumable product, along with its accompanying digital platform for displaying lab reports. As the project progressed, the initial plan to design a web application shifted towards revamping our existing "CircleDNA" app, which was originally used for DNA testing. The revamped app not only focuses on enhancing core product features but also prioritizes future scalability and alignment with the overarching product strategy known as the "Circle Ecosystem."

The concept of the Circle Ecosystem, a company-wide strategy, came to fruition as I defined the product strategy for "Circle SnapShot."

Like many digital healthcare companies, Prenetics has been expanding its product and service offerings both horizontally and vertically. While initially focused on DNA testing, we have now ventured into COVID-19 diagnostics through at-home blood lab tests. However, our current product offerings were developed independently, resulting in a fragmented cross-platform experience and limited flexibility to iterate, customize, or bundle products. Feedback gathered from focus groups and research during the project scoping phase highlighted that customers highly value digital healthcare companies that not only provide actionable insights but also offer treatments and telemedicine.

Reframing the Challenge

The vision for the Circle Ecosystem is centered around creating a seamless and cohesive customer experience by integrating all tests and services into a unified journey across web and app platforms. This approach allows us to provide hyper-personalized offerings while maintaining a comprehensive view of each customer. By consolidating code bases and capturing cross-product synergies, we can streamline our efforts and maximize our business potential.

Image 1: Circle as the master brand for the Ecosystem

The Vision for the App

A ‘virtual clinic’ to educate and empower customers to take their first test, monitor results, and improve their health.

Key Objectives for 2022

  • To increase the customer lifetime value, i.e., LTV of our customers
  • Elevate the healthcare experience by expanding into more products and services like tele-consultations

Defining the scope of work

Understanding the bigger premise of such undertaking, I defined shorter-term goals and the scope of work that can set direction for my team to focus on the “How” - launching the revamped App in five months. They are:

  1. Restructure existing CircleDNA App to allow integration of other products & customer journeys
  2. Improve customer satisfaction by enhancing the existing user experience for DNA testing
  3. Adopt a new Circle master brand visual identity

My role

  • I led the design and development of the entire revamp of the Circle App within a 5-month time frame, from Nov 2021 and Mar 2022.
  • I managed two product owners, a UI/UX designer and a visual designer, to create illustrations needed for the application.
  • I worked very closely with the Engineering team, including the group CTO, engineering lead and the QA lead of the scrum team.

However, in the middle of the project, the decision was made to launch the Circle App in EMEA countries. This led to the expansion of my team to include two additional product managers, a UI/UX designer, and a VP of Product from the UK office. We grew from 1.5 engineers to 10 engineers by the end of March 2022. As the Product Lead, my role evolved to oversee the delivery of the Circle App, taking into account global features while prioritizing localized needs for both the UK and HK product engineering teams.

The Research

Auditing the existing application

To lay the foundation for building new features on top of an existing platform, I initiated a thorough audit of the entire application. Collaborating with two Product Owners (POs), we identified and addressed usability issues that could hinder the team's ability to add new features and offerings. To gather valuable feedback, we engaged a group of friends to explore the app, resulting in a consolidated set of insights.

Image 2: Comments and feedback received on the journey and each screen

User Research

To generate new product ideas for the existing app, I organized a brainstorming session involving the Product and Design Team. Together, we developed innovative concepts based on our target persona. These ideas were categorized for easier analysis, helping us identify key missing features that were highly demanded by our target audience.

Image 3: Summary of the brainstorming exercise with ideas categorized for different persona

Market & Competitors Research

To gain a deeper understanding of the digital healthcare landscape, I researched various healthcare apps and analyzed how they integrated multiple features into a comprehensive solution. Drawing from my past experiences with wellness apps, I realized that delivering an ideal customer experience would require a revamp of the existing application's navigation.

Image 4: Research on the design of Super Apps (Uber + Uber Eat) & healthcare apps

User Persona and Journey Mapping

Studying other digital platforms and user journeys for at-home test kits, I mapped out the customer journey to identify common engagement features and establish a connection between health journeys and app functionalities. By analyzing reviews and feedback from platforms like Trustpilot and app stores, we gained insights into current pain points experienced by customers in their healthcare journeys. This process enabled us to define key value offerings and functions, paving the way for creating a conceptual design.

Image 5:  User journeys we have mapped for one of our competitors

Image 6: End-to-end customer journey mapping of similar products, including pain points, emotions and actions.

Design: Conceptual design to the refined UI UX design

Taking inspiration from successful digital lifestyle health apps, I created wireframes and an information architecture (IA) design for the team. These designs underwent three rounds of usability tests involving over 50 users, allowing us to gather qualitative feedback, understand user preferences, and refine the overall design. The feedback informed the definition of key features and priorities, such as onboarding, kit activation, home tab, and report tab. Concurrently, we conducted usability tests for each feature and journey, iteratively improving the app's design system.

Image 8: Circle App Conceptual Design Framework

Adopting the learnings in our design

Throughout the research study, we conducted navigation tests, preference tests, and interviews with users.

The approach of our usability test

  • First, we asked users to perform different prototype App tasks including; locating the report, sharing the report, book consultation, editing profile, switching profile, and reading test-specific content.
  • Next, we provided options for component designs to understand the preferred layout of the ‘Reports’ tab, which addresses the usability issue.
  • Finally, we interviewed testers about their likelihood of clicking on the different features and content on the ‘Home’ tab to further understand their intents and interests when navigating a new digital healthcare App for the first time.

These tests helped us refine the design and uncover valuable insights. We learned that users preferred the new 'Home' tab and found it easier to perform actions, including booking consultations. Users could easily locate and navigate DNA reports, and we received suggestions to include a search bar for better information retrieval. We can enhance the user experience by integrating snapshot reports and grouping all reports into a single view. These findings guided our navigation experiences and informed the design details and content on key screens.

Deep dive into screen-by-screen UI UX design

Leading a junior team with limited experience in product and UI/UX design, I provided extensive support and guidance. I mapped out user scenarios, drew user flows, and set clear guidelines for the UI/UX deliverables. Additionally, I conducted knowledge transfer sessions to ensure effective design and development sprints.

Image 12: Mock-Up user flows in Figma

Agile & iterative design & delivery process

The project implementation and delivery process encountered challenges that provided valuable insights and learnings. The existing app had significant technical debt and an inflexible infrastructure, necessitating the development of a new codebase for version 2.0. Despite a limited timeline, we successfully launched the Circle App globally.

Image 14: Country selection designed to allow localisation of offerings

Furthermore, we adapted to additional requirements for the UK market, which involved revisiting the visual identity and achieving global alignment.

To address these localization needs, we implemented a forced update function as part of the app upgrade. This required existing customers to update their location information, re-accept local terms of use and privacy policy, and update their passwords for enhanced security. By enforcing these updates, we ensured that users had the most relevant and personalized experience based on their location while maintaining a high level of data protection and compliance with local regulations.

Image 14: Country selection designed to allow localisation of offerings

The Result:

Redefining the app is a key learning for this research purpose and has resulted in the creation of key features such as the “Home” tab and the “Reports” tab. With this addition, we equally outlined some key metrics to continuously monitor the result and findings of this change in our Apps analytics platform. The top-line metric I've defined for the App platform is Monthly Active Users (MAU) because the usage of the App at this point in time is still low.

‘Home Screen’

Other primary and secondary metrics are tracked to understand the implementation of the new features on the Home Screen.

We believe that there will be a higher engagement on the App if we add more content on the Home page.

  • Time on screen
  • Clicks per engagement feature (share report, read report, explore "popular tests")

We believe that we can increase the conversion rate in the App by changing the placements of the upsell banner.

  • Conversion Rate%
  • In-App purchases
Image 14: UI of the key tabs of the App

Report Screen

We also look at the following metrics to measure usability of the revamped App. For example, we analyses and compare the following metrics with the old app to understand if users who bought DNA tests can find DNA sub-reports easily with the new updated UI.

Product Release

We successfully launched the Circle App globally during the week of April 19th.

Post-launch, we remained vigilant by closely monitoring data through tools like Sentry and Mixpanel. One notable discovery was that many users attempted to log in using email addresses that were not registered with us. Subsequently, some of these users clicked on the "Forgot password" option and ended up giving us negative app ratings. Upon investigation, we found that these users were trying to log in with the email addresses they had used for guest checkouts on our e-commerce platform. This prompted us to enhance the onboarding experience within the app and implement account creation on the web after the checkout process.

Another interesting finding was that customers were activating test kits by scanning incorrect barcodes. This issue stemmed from a design flaw in the paper instructions, which was misleading to users. We promptly shared these findings with the relevant team to address the problem.

Overall, the post-launch monitoring and analysis of user data allowed us to identify and address these issues, ensuring a smoother user experience and enabling us to continuously improve the app's functionality.

What's Next?

The launch of Circle App 2.0 is just the beginning. The objective for release 2.0 is to ensure we have the structure ready to start building a healthcare ecosystem and customer healthcare journey within the App. We will continue onboarding new DTC test kits into Circle App one at a time in a monthly interval.

  1. Increase engagement: Personalize content based on activated test kits, health goals, and interests.
  2. Develop a seamless cross-platform experience: ensuring a smooth transition from purchase on the web to fulfillment in the app.
  3. Increase in-app revenue: Implement in-app subscriptions and offer sample reports for users to discover the value of our services. Enable direct payment within the app, with the option to save payment information on the web during checkout.

Conclusion:

As we increase offerings that are inherently used repeatedly, the frequency differs based on the product's nature. We believe that offering subscriptions for end users can help us create a competitive moat and lock in a recurring revenue while proactively engaging in providing innovative next-generation health solutions. We look forward to having more users maximally experience digital lifestyle healthcare while making progressive efforts to live better lives. Health is a marathon and not a sprint. It starts with you activating to be better.