Hippocrates Technologies

Using a Design System in Digital Health Mobile Applications

In the domain of mobile app development, particularly within the digital health sector, the importance of a cohesive and well-structured design system cannot be overstated. A design system and a customizable user interface (UI) component library offer a standardized approach to UI/UX design, enabling developers to create consistent, user-friendly interfaces efficiently.

Hippocrates Technologies’ TheraForge MagicBox is a customizable low-code and no-code template app that exemplifies this concept by providing a powerful framework for rapid digital health app development.

MagicBox leverages the TheraForge ToolBox frameworks and the TheraForge CloudBox server-less offline-first cloud service (BaaS) to offer a seamless end-to-end development experience.

By integrating pre-made components and a comprehensive design system, MagicBox empowers developers to focus on functionality and user experience without getting bogged down by intricate design details.

For those who prefer visual learning, check out the OTFStyle tutorial video which provides a walkthrough of the styling concepts discussed in this article:

You can get started with TheraForge on GitHub here.

The Importance of Using a Design System

Imagine you are building a digital health app from scratch. Every design decision, from color schemes to button styles, can be time-consuming and prone to inconsistencies. This is where a design system comes in handy.

What is a Design System?

A design system is a collection of guidelines and assets that ensures a digital product’s look and feel remain consistent. It includes detailed instructions on typography, colors, components and the overall tone of the product’s branding.

The basic components that a design system may contain are:

  • Typography: Defines typefaces, text styles, and usage instructions.
  • Colors: Sets a limited palette and specifies color usage logic.
  • Grid and Spacing: Provides logic for component sizes and spacing across different screens.
  • Buttons: Lists all button types with styles, sizes, and behaviors.
  • Icons: Ensures consistency in icon design and functionality across different sizes.
  • Component Library: Stores reusable UI elements for consistency in design and code.

Key Elements of a Design System

A robust design system typically includes these core elements, which play a crucial role in achieving the primary goals of the design system:

  • Design Principles: Fundamental guidelines that inform design decisions, ensuring the product aligns with the brand’s vision and values
  • UI Components: Reusable components, such as buttons, forms, cards and modals, which serve as building blocks for the application’s UI, since they can be easily integrated into various parts of the app
  • Patterns: Common solutions for recurring design problems, such as data display and navigation patterns throughout the app
  • Style Guide: Documentation of the visual and interactive aspects of an app, including color palettes, typography, spacing and iconography

By applying the guidelines described above, a design system can be a powerful tool for a development team, as it can bring many benefits when developing applications, such as:

  • Scalability: As your app grows, a design system ensures that new features remain consistent with the existing design by allowing you to reuse your design tokens (colors, typography, constraints…) into your new updates
  • Efficiency: A design system is responsible for providing reusable components, reducing redundancy and allowing developers to focus more time on developing new functionalities rather than redesigning existing elements
  • Collaboration: Design systems foster better collaboration between designers and developers. Both teams end up working together more effectively to build a common reference point
  • Consistency: A design system ensures a uniform look and feel across the entire application. By providing a consistent design across visual components, the different features across the app can have a more familiar and intuitive user experience
  • Quality Assurance: By standardizing components and design practices, a design system helps maintain high quality throughout the app. This standardization reduces the chances of design errors and inconsistencies, leading to a polished and professional product.

When developing a digital health app, speed and efficiency are crucial. Pre-made components are indispensable for rapid application development because they are pre-tested, optimized, and ready to integrate. This not only saves time but also ensures consistency and quality across the app.

Consider a scenario where you need to implement a new feature quickly. With a library of pre-made components, you can focus on the functionality rather than the design details. These components, adhering to a unified design language, make it easy to maintain a consistent look and feel across the app.

TheraForge ToolBox’s OTFDesignSystem

Hippocrates Technologies has developed a design system framework called OTFDesignSystem, which is part of TheraForge ToolBox. This framework provides a set of UI components and utilities for creating cohesive and visually appealing user interfaces in TheraForge-based applications.

TheraForge ToolBox is based on and augments Apple’s open-source CareKit framework.

CareKit, launched by Apple in 2016, is an open-source framework designed to help developers create health-focused apps. Its main purpose is to assist users in managing their health and wellness. CareKit provides customizable modules for monitoring medical conditions, adhering to treatment plans, and sharing health data with healthcare providers and the HealthKit framework.

CareKit includes the CareKitUI module, which provides a list of pre-built UI elements, like task cards and charts, designed for health and wellness apps, as shown below:

CareKitUI Task Cards
CareKit Task Cards
CareKitUI Chart Cards
CareKit Chart Cards

(For more details on CareKit, please refer to its documentation.)

Building upon the CareKit technology, OTFDesignSystem facilitates the creation of visually consistent and user-friendly iOS applications. It offers a collection of SwiftUI UI components and utilities, allowing developers to build interfaces with ease and maintain a unified design and styling across the application.

OTFDesignSystem includes several components that are essential for building a consistent UI, such as the ones listed in the following:

Button Styles

The framework provides three custom button styles—Primary, Secondary, and Tertiary—that can be applied to SwiftUI’s Button struct.

OTFPrimaryButtonStyle: A solid background button style for important actions. OTFSecondaryButtonStyle: A subtle background button style for less prominent actions. OTFTertiaryButtonStyle: A minimal button style for low-emphasis actions. OTFMediaButtonStyle: A specialized button style for media playback controls.

TheraForge Design System iOS Button Styles
TheraForge Design System Button Styles

OTFInfoCard

OTFInfoCard is a versatile component for presenting information with optional actions. It allows customization of the title, description, and action buttons, making it suitable for various scenarios as shown in the figure below.

TheraForge Design System iOS Info Card Styles
TheraForge Design System Info Card Styles

OTFSurveyCard

OTFSurveyCard is a SwiftUI view designed to display surveys within an app. It offers a customizable card layout with a title, a call-to-action button, and an indication of whether the survey has been completed.

TheraForge Design System iOS Survey Card
TheraForge Design System Survey Card

CareKit’s Styling: Standardizing Health App Design

One of the features of CareKitUI is the OCKStyler protocol, which contains visual properties that are applied to the library’s components, and can also be customized to your liking.

Here’s an example of how to customize a CareKit component using OCKStyler:

class CustomCareKitStyle: OCKStyler {
    class ColorStyler: OCKColorStyler {
        var label: UIColor = .blue
        var secondaryLabel: UIColor = .gray
        var customBackground: UIColor = .white
    }
    var color: ColorStyler {
        ColorStyler()
    }
}
let taskView = OCKInstructionsTaskView()
taskView.customStyle = CustomCareKitStyle()

The results of the above styling changes are shown below:

CareKit Style
CareKit Styling

One nice point about OCKStyler is that, once it’s applied to a CareKit component, it’s also automatically applied to all CareKit views contained inside it. However, you may also want to be able to apply the same styling to other custom components in your project.

In MagicBox, we have developed a solution that allows teams to create custom styles that work with both CareKitUI and TheraForge Design System components.

TheraForge OTFStyle: Marrying Custom Styles with CareKitUI Components

OTFStyle is a custom styling protocol designed to work seamlessly with CareKit’s styling protocol. It acts as a single source of truth for styling parameters for both CareKitUI and TheraForge Design System components, while also being extendable to other custom components.

Developers can customize the appearance of these components through the AppSysParameter, a YAML file within the project that acts as a low-code hub for customizing various aspects of the application.

You can define a new custom style to be used in the app by adding a new entry to the styles array in the AppSysParamter file like so:

 styles:
  - name: "CustomStyle"
      backgroundColor: "systemBackground"
      textColor: "label"
      separatorColor: "black"
      cellbackgroundColor: "secondarySystemGroupedBackground"
      buttonTextColor: "systemGreen"
      # ... 

To apply this new custom style in the app, update the selectedStyle field in the same YAML file like so:

 selectedStyle: "CustomStyle" 

The selected custom style using systemGreen as button text color is then applied across the app using the appStyle modifier, leveraging the attributes defined in the YAML file to create instances of styling protocols for both the CareKit and the TheraForge Design System components, as shown in the MagicBox screenshots below:

 

MagicBox UI Styling
MagicBox UI Styling: Example 1
MagicBox UI Styling
MagicBox UI Styling: Example 2
MagicBox UI Styling
MagicBox UI Styling: Example 3

Applying Styles to Components

In order to apply a style to both CareKitUI and TheraForge’s components, TheraForge supports a modifier that takes the design properties described in the selected style from the AppSysParameter file and converts them to styling protocols for both frameworks.

By applying this modifier, the selected properties will be automatically applied to all views that follow either of the styling protocols automatically:

 class CustomDesignSystemStyle: OTFDesignStyler {
    var color: any OTFDesignSystem.OTFDesignStylerColor {
        return ColorStyler()
    }
    class ColorStyler: OTFDesignSystem.OTFDesignStylerColor {
        var label: Color = .blue
        var secondaryLabel: Color = .gray
        var customBackground: Color = .white
        var primaryButton: Color = .blue
    }
}
HStack(spacing: 20) {
    // Component from CareKitUI  
    InstructionsTaskView(
        title: Text("Doxylamine"),
        detail: Text("7:30 AM to 8:30 AM"),
        instructions: Text("Take the tablet with a full glass of water.")
    ) {
        Button("Mark as Completed") {}
            .buttonStyle(.otfPrimary)
            .padding()
    }
    // Componenet from OTFDesignSystem
    OTFInfoCard(
        title: "Skin Care Basics",
        description: "Discover routines and treatments for healthy, glowing skin.",
        actions: [
            .init(label: "Explore Tips", style: .primary),
            .init(label: "Book a Consultation", style: .secondary),
        ]
    )
}
.otfStyle(CustomDesignSystemStyle())
 

 

The figure below shows the application of the same style to both CareKitUI and TheraForge UI elements:

App Component Styling
App Component Styling

You can even make use of applied style properties in any custom views you may develop to be used inside MagicBox, by making use of the otfdsStyle environment value provided by the TheraForge design system. This enables you to access the properties of the style and to apply them to the child views that make up your component, allowing it to blend seamlessly alongside other components being used in the app:

 struct CustomDropdown: View {
    let title: String
    let shortDescription: String
    let longDescription: String
    let actionLabel: String
    let action: () -> Void
    // Environment value to access a custom style properties
    @Environment(.otfdsStyle) var style: OTFDesignStyler?
    @State private var isExpanded: Bool = false
    var body: some View {
        DisclosureGroup(isExpanded: $isExpanded) {
            VStack(alignment: .leading) {
                Text(longDescription)
                    .padding(.bottom, 10)
                    .foregroundColor(style?.color.label) // Applying style properties to child views
                Button(action: action) {
                    Text(actionLabel)
                        .font(.headline)
                }
                .buttonStyle(.otfPrimary)
                .foregroundColor(style?.color.primaryButton)
            }
            .padding()
        } label: {
            VStack(alignment: .leading) {
                Text(title)
                    .font(.headline)
                    .foregroundColor(style?.color.label)
                Text(shortDescription)
                    .font(.subheadline)
                    .foregroundColor(style?.color.secondaryLabel)
            }
            .padding()
        }
        .background(Color(.systemGray6))
        .cornerRadius(8)
        .shadow(radius: 2)
        .padding(.horizontal)
    }
}
CustomDropdown(
    title: "Skin Care Basics",
    shortDescription: "Discover routines and treatments for healthy, glowing skin.",
    longDescription: "Explore effective skincare routines, treatments for common skin issues, and the latest in dermatology research.",
    actionLabel: "Explore Tips",
    action: {}
)
.otfStyle(CustomDesignSystemStyle()) 

The figure below shows the results of the custom styling:

Styling of a Custom Component
Styling of a Custom Component

By creating a single styling structure compatible with different frameworks, TheraForge achieves the following benefits:

  • Centralized Control: All styles are defined in one place, simplifying management and updates.
  • Enhanced Customization: Provides more detailed and specific customization options.
  • Consistency: Ensures a uniform look and feel across all components and screens.
  • Efficiency: Saves time by reducing the need to manually apply styles to each component.

Comparison: CareKitStyle vs. CustomStyle

To illustrate the differences, let’s compare two ready-made TheraForge styles, careKitStyle and customStyle, applied to the same component:

CareKitStyle

 - name: "careKitStyle"
      backgroundColor: "systemBackground"
      textColor: "label"
      separatorColor: "separator"
      cellbackgroundColor: "secondarySystemGroupedBackground"
      buttonTextColor: "Teal"
      borderColor: "Black"
      headerColor: "label"
      screenTitleFont: "Header"
      screenTitleWeight: ""
      headerTitleFont: "HeaderInherited"
      headerTitleWeight: "Bold"
      textWeight: ""
      textFont: "Inherited"
      appTitleSize: "Large Title" 
Application of the Ready-made careKitStyle
Application of the Ready-Made careKitStyle

CustomStyle

 - name: "customStyle"
      backgroundColor: "systemBackground"
      textColor: "systemOrange"
      separatorColor: "separator"
      cellbackgroundColor: "secondarySystemGroupedBackground"
      textColor: "systemOrange"
      borderColor: "Black"
      headerColor: "label"
      screenTitleFont: "Header"
      screenTitleWeight: ""
      headerTitleFont: "HeaderInherited"
      headerTitleWeight: "Bold"
      textWeight: ""
      textFont: "Inherited"
      appTitleSize: "Large Title" 
Application of the Ready-made customStyle
Application of the Ready-made customStyle

As seen in the screenshots, the different styles provide distinct visual presentations while maintaining consistency and ease of implementation through the design system.

Conclusion

A well-structured design system is crucial for developing scalable, efficient, and consistent digital health applications. TheraForge MagicBox, with its integration of CareKit and custom OTFStyle protocols, offers a powerful solution for developers. By utilizing pre-made components and centralized styling configurations, developers can focus on creating functional and user-friendly health apps with ease.

For a detailed walkthrough on implementing these concepts, check out the OTFStyle tutorial video.

In summary, adopting a design system streamlines your development process and enhances the user experience, ensuring your digital health app stands out in a competitive market.