Salutemp

Salutemp

How Might We… ensure the viability of medications under strict conditions like temperature, light, and humidity, especially during periods of absence or unexpected events such as power outages?

View Prototype

View Prototype

ROLE

Design Lead for Generate Product Development Studio

SKILLS USED
SKILLS USED

Branding & Identity

UI/UX

Product Management

Prototyping

TIMELINE
TIMELINE

3 months

September - December 2023

Salutemp is developing affordable and easy-to-use hospital-grade technology for patients at home to promote medication adherence and safety.

The Salutemp app connects with the Salutemp case to actively monitor data related to a user’s medication. It provides warnings and feedback, advising and enabling the user to make informed decisions regarding their medication’s condition and viability.

Goal: To create a welcoming yet clean MVP that is seamlessly intuitive for the user to navigate.
My Role

As Design Lead at Generate Product Development, I managed a team of designers from the initial concept to the final UI design. I guided all design decisions, conducted weekly critiques, and provided technical skill training for the team. Additionally, I developed a design system to ensure consistency and coherence across the platform.

Background Research

Our research for this project consisted of:

  • Benchmarking existing products that include:

    • Health applications on the App Store

    • Other tracking and management applications

  • Finding out use cases for the Salutemp app through peer interviews and design reviews

  • Analyzing market research and other information provided by the client

User Personas

Our primary persona is represented by Harold. Harold is a stressed and disorganized 33-year-old accountant from Portland, OR, who struggles to manage his high blood pressure and his diabetic dog's medication due to his busy and irregular work schedule.

Key Features

Home Screen Design with Medication Status Quick View

Purpose

Provide an easy to use and navigate home screen for users to access all features of the app quickly and efficiently. Users will have to complete login/sign up to gain access to this view.

Design Process

Our home screen design, based on the client's Figma designs, retains the list of medications and navigation bar. We updated the color scheme, styles, and font while adding color-coordinated medication cards for quick status checks without extra clicks.

Design Process

Our home screen design, based on the client's Figma designs, retains the list of medications and navigation bar. We updated the color scheme, styles, and font while adding color-coordinated medication cards for quick status checks without extra clicks.

Personalized Medication Entry with Customization & Verification Options

Purpose

Allow a user to add a new medication to their account using barcode scanning or manual entry.

Design Process

From the start, we knew this flow needed multiple customization options for users to add specific medication details. Research and user feedback helped us identify essential fields: medication photo or icon, name, nickname, type, expiration date, min and max storage conditions for temperature, light, humidity, and a notes section.


A medication photo makes it easily identifiable on the home screen, with customizable icons and nicknames as an alternative for long medication names. We included a pill-shaped tab switcher for scanning or manual entry. Scanned data would then be verified on the manual entry page.

Design Process

From the start, we knew this flow needed multiple customization options for users to add specific medication details. Research and user feedback helped us identify essential fields: medication photo or icon, name, nickname, type, expiration date, min and max storage conditions for temperature, light, humidity, and a notes section.

A medication photo makes it easily identifiable on the home screen, with customizable icons and nicknames as an alternative for long medication names. We included a pill-shaped tab switcher for scanning or manual entry. Scanned data would then be verified on the manual entry page.

Status-Indicating Medication View

Purpose

Allow the user to see the current and historical conditions of a specific medication they have logged as well as a notes section. These conditions include temperature, humidity, and light readings.

Design Process

This view, showcasing most of the app's functionality, was our primary focus. We iterated extensively, consistently featuring a large status indicator for each medication. Inspired by task management apps, the indicator provided visual information at a glance, with the design featuring medication name, status indicator, and details for temperature, light, and humidity.


User testing led us to separate key conditions into smaller cards, each with a status-indicating background color. For instance, a red temperature card signals an issue, while green cards for light and humidity indicate normal conditions. Clicking a card opens a modal with current readings and a historical graph of the last 48 hours. The modal's color matches the status, and a progress bar shows current conditions compared to allowed ranges.

Design Process

This view, showcasing most of the app's functionality, was our primary focus. We iterated extensively, consistently featuring a large status indicator for each medication. Inspired by task management apps, the indicator provided visual information at a glance, with the design featuring medication name, status indicator, and details for temperature, light, and humidity.


User testing led us to separate key conditions into smaller cards, each with a status-indicating background color. For instance, a red temperature card signals an issue, while green cards for light and humidity indicate normal conditions. Clicking a card opens a modal with current readings and a historical graph of the last 48 hours. The modal's color matches the status, and a progress bar shows current conditions compared to allowed ranges.

Streamlined Notification and Reminder Management for Medication Tracking

Purpose

Allow timely urgent push notifications when a medication is nearing or completely outside of its recommended storage conditions. Dosage reminders can be scheduled to send a push notification on a schedule to remind a user to take their medication.

Design Process

Initially, notifications and reminders had separate pages in the bottom navigation bar. To avoid overcrowding, we moved dosage reminders to their own page and added a notification bell on the home screen for urgent condition alerts.

Urgent notifications display previous alerts, which also appear on the phone's notification view. Clicking the bell shows a scrollable card with the past 24 hours of notifications, allowing users to mark them as read individually or all at once, keeping them informed about their medication's history.

The reminders view evolved from a schedule/calendar layout to a date-selectable view. Users pick a date at the top, with reminders appearing as cards below. Clicking a card marks it as completed, moving it to the bottom. When adding a reminder, users can choose dosage amount, repetition days, and multiple reminders per day. Reminder cards are linked to their medications, displaying the same photo/icon and nickname for easy identification, as on the home screen.

Design Process


Initially, notifications and reminders had separate pages in the bottom navigation bar. To avoid overcrowding, we moved dosage reminders to their own page and added a notification bell on the home screen for urgent condition alerts.

Urgent notifications display previous alerts, which also appear on the phone's notification view. Clicking the bell shows a scrollable card with the past 24 hours of notifications, allowing users to mark them as read individually or all at once, keeping them informed about their medication's history.


The reminders view evolved from a schedule/calendar layout to a date-selectable view. Users pick a date at the top, with reminders appearing as cards below. Clicking a card marks it as completed, moving it to the bottom. When adding a reminder, users can choose dosage amount, repetition days, and multiple reminders per day. Reminder cards are linked to their medications, displaying the same photo/icon and nickname for easy identification, as on the home screen.

Brand Refresh

Recognizing the need for a visually appealing and relevant brand, we decided to refresh the Salutemp brand. Through diligent research and several design iterations, we developed a modern visual language that connects with our target audience and reflects the evolving nature of our product. This refresh infused our visual assets with renewed energy and consistency, enhancing our brand perception. Additionally, we compiled a brand book for the Salutemp team, including updated colors, typography, logo, and visual elements.

Color

Defined by simplicity, empathy, dependability, and quality, Salutemp’s brand strives to convey these attributes. Using shades of blue, Salutemp’s brand seamlessly fits into the healthcare space while making users feel comfortable and secure. Penguin, Moonstone, and Pigeon serve as the official brand colors, while Salutemp Black and Pebble are neutrals that ground the palette.

Type

Typography for Salutemp was selected for its accessibility and readability. Given the application's complexity, we prioritized an easy-to-read font and carefully chosen type styles to establish a clear hierarchy. This ensures the app is easily understood and navigated.


Full Brand Book
Wins:
  • Successfully created a high-fidelity mobile prototype that accurately represents the final product's user experience and functionality.
  • Enhanced brand recognition by refreshing the logo and visual elements to better align with target audience perceptions.
  • Established a component library that enhances reusability, reducing the time and effort required for design and development.

Wins:

  • Successfully created a high-fidelity mobile prototype that accurately represents the final product's user experience and functionality.

  • Enhanced brand recognition by refreshing the logo and visual elements to better align with target audience perceptions.

  • Established a component library that enhances reusability, reducing the time and effort required for design and development.

Next Steps

One area we couldn’t address was the device pairing screen, due to technological issues and tight deadlines, which led to its exclusion from this semester’s development.

User testing is another aspect we could not complete due to time limitations. We suggest testing the app's usability for older users. While middle-aged users might navigate the app with ease, older users could find form-filling tedious. Gaining insight into how different age groups interact with the app would be valuable. An initial tutorial on account creation might help alleviate this potential issue.

Work

Art

Photo

About Me