top of page
Silvertree Header.jpg

Silvertree Internship Project Case Study

Testing a reimagined app onboarding flow for older adult users

2 month UX Design internship at Silvertree Labs

UI/ UX Design | Figma Variables | Usability Testing

Our goal was to increase product retention by encouraging older adult users to activate the product through a redesign of the accompanying app's onboarding, focusing on improving the product education and setup experience.
MY TEAM

Meghan Gagne (Head of Product at Silvertree)

​

Ryan Wexler (Senior Mechanical Engineer)

MY ROLE

UI/ UX Designer

Outreach Coordinator

TOOLS

Figma (+ variables)

FigJam

Canva

"Live independently with the Silvertree Reach"

Silvertree is a Cambridge-based startup whose mission is to help active older adults and their loved ones feel secure, confident, and connected by enabling collaborative care during emergency situations and thereby affording its customers peace of mind.

The Silvertree Reach is a wrist-worn safety device that pairs with the Silvertree app and allows users to create a network of family, friends, and neighbors — called the Care Team — who get alerted when the device is triggered, either manually with an SOS button or via built-in fall detection.

What happens in an emergency?
How the Silvertree Reach and app provide assistance in an emergency

INTERNSHIP OVERVIEW

Over the course of 6 weeks, I played a key role in running the startup's first in-person usability testing study, collaborating with senior leadership in Product, Customer Experience, and Engineering.

My project's focus was on the new Onboarding flow of the Silvertree app.

1. Clickable Prototypes

  • Mapped User Journeys​

  • Utilized new Variables feature to create complex high fidelity prototypes on Figma

  • Designed function-oriented onboarding for older adults

2. Outreach

  • Designed flyers and product brochures on Canva

  • Recruited participants for study

  • Formed valuable connections within the AgeTech community

  • Managed communications

3. Usability Testing

  • Designed study protocol

  • Ran study with Meg & Wex

  • Documented cognitive walkthrough and interview

  • Refined mockups based on participant feedback

PROBLEM

Business Goal: Increase product retention

Customers are likely to return products whose value they never experience.

For Silvertree customers to benefit from the product's assistance in emergency situations, they must activate the product, i.e., set up the Reach and Care Team.

Inactive users miss out on key features!

Higher user activation rates typically predict higher product retention.

Key activation points for Silvertree customers:

  1. Create an account on the Silvertree app

  2. Invite loved ones to join their Care Team

  3. Pair the Reach with their phone

SOLUTION

Design a function-oriented onboarding that walks older adult users through each activation step and evaluate its effectiveness by testing with real users.

A well-designed onboarding process is crucial to facilitating user activation, especially for a user base of older adults. While tech-savvy users are willing to dive straight into an app and try to figure out how it works on their own, most older adults prefer to follow step-by-step instructions to do so.​

Design objectives

  1. Offer clear step-by step instructions to achieve activation

  2. Emphasize significance of completing activation steps

  3. Indicate activation status clearly

  4. Maintain user autonomy by offering the choice to skip steps

  5. Communicate key information concisely and efficiently

Our new app-onboarding flow "nudges" users to complete set up.

Clickable Prototypes

To gather meaningful feedback on the new onboarding design, I spent 3 weeks building an interactive testing prototype for our participants to click through. By using advanced prototyping in Figma, I was able to consolidate all possible testing scenarios into a single sophisticated prototype that could simulate various user paths and accommodate different user choices, closely resembling the real app experience.

User Journeys

Broad Scenarios:

  • Initiator: User plans to initiate a new Care Team

  • Invitee: User has an email invite to join an existing Care Team

​

Key decision points:

  • Build Care Team

  • Assign Reach to intended wearer's account

  • Set up Reach

​

End point:

  • Dashboard with "Care Team" and "Device" information cards, reflecting user's decisions and role on the Care Team​

Initiator Scenario

The user's role (Reach Wearer vs. Care Partner) is unknown at first and has to be inferred from their decisions, as do the final activation statuses of the device and the Care Team.

Invitee Scenario

The user's role on the Care Team has already been assigned by the initiator. If the initiator did not set up the Reach, this user can choose to complete or skip device setup.

Variables & Complex Conditionals in Figma Prototyping

In June 2023, Figma introduced Variables as a beta feature. Variables let me "think like a developer" and create a single sophisticated interactive prototype with consistent, flexible, and efficient designs that accounted for all possible user paths. Without Variables, my team would have been forced to use 'paper prototyping' for usability testing, as the following were otherwise not possible in Figma:

1. Consolidating distinct user scenarios using complex conditionals

Before Variables, one "next" button could only be prototyped to navigate to one fixed next screen.

With Variables and if/else conditionals, I could prototype the "next" button to lead users down distinct paths that aligned with their Scenario. For example, while an Initiator should navigate to a screen that prompts them to build a new Care Team, an Invitee would skip that step as their Care Team already exists.

2. Recording user's decisions and reflecting them on later screens

I used Variables to keep track of whether users chose to complete or skip activation steps throughout the onboarding. By linking those Variables to the contents of later screens (like the Dashboard), I was able to prototype single screens to swap in different information accordingly, eliminating the redundancy of creating copies with minor differences.

Components, Variables, and Instance Properties

The Dashboard displays information and setup statuses for the Care Team and Device, requiring distinct designs based on the user's role and decisions.  

Care Team Card variants

Device Card variants

Care Team and Device Card variant designs on Figma

Before Variables, each combination of the variants above would have required its own static Dashboard wireframe. Using Variables, I could create a single Dashboard screen with placeholder cards that would automatically be replaced by the appropriate variants.

Dashboard showing 4 Device Card variants
Device Card component variables
Text Variables

Before Reach setup, the user can assign the Reach to themself (Dan) or to a loved one (Ryan).

Email Text Variable based on user selection

To confirm their selection in a realistic manner, I used an "Email" Text Variable that updated the text on the second screen to reflect the user's selection.

3. Requiring an action before continuing on the user path
Permissions Screen with overlays requiring user to enable all permissions

Permissions Screen: I used conditional logic with Number Variables to ensure that the user could proceed only after enabling all 3 permissions. Variables tracked whether the user fell short, with different overlays either prompting them or letting them progress.

Usability Testing

To evaluate the effectiveness of our onboarding design, I recruited a pair of participants for the startup's first ever in-person usability testing study. Conducting a cognitive walkthrough with the clickable prototype, we observed user interactions and identified key themes that validated our design and guided our refinement stage.

Study Protocol

After a thorough brainstorming session, I collaborated with Wex to write a comprehensive study protocol. To validate and refine our approach, we did a mock run with Leanna, the Head of Customer Experience at Silvertree, and incorporated her feedback into our final protocol.

Brainstorming board for the Study Protocol

Three Key Components:

  1. Pre-test Questions

  2. Cognitive Walkthrough

  3. Follow-up Interview

Cognitive Walkthrough

Configuration Screen

Setup

For the first part of the prototype, I used Variables to create an interactive Configuration screen on which we could easily preset distinct user contexts that we wanted to test before commencing the cognitive walkthrough with each participant.

My Role

I led the participants through the prototype for the cognitive walkthrough and took notes on their feedback and decisions, while Wex facilitated the study and Meg observed.

Configuration Screen
Testing Scenarios

Test 1: Reach Wearer (RW) as the Initiator

Participant: Bertha, 85+ years old, tech-savvy

Test 1 Variable Set

"You are Dan, and you bought the Silvertree Reach for yourself."

Test 2: Care Partner (CP) as the Invitee

Participant: Cora, Bertha's daughter-in-law

Test 2 Variable Set

"You are Dan, and you received an email invite to join Ryan's Care Team."

Note: Given their tech proficiency, our participants (names changed) were outliers in Silvertree's user base.

Feedback and Insights

Duration: Participants found the length of the onboarding process appropriate, but desired an indicator for progress tracking.

​

Activation: Both participants chose to complete activation steps, finding them intuitive and understanding the motivation behind each of them.

​

Education: While Bertha (RW) found the Education screens highly informative, Kate (CP) desired more tailored guidance for her role as a Care Partner.

​

Language Clarity: Participants noted occasional confusion with certain phrases, emphasizing the need for clearer communication.

​

Aesthetic Consistency: Participants had positive feedback on consistent UI for older adults, with a few suggestions for improvement.

Alternative Mockups

My final task for the internship was to make recommendations for design changes and build on participant feedback through mockups of alternative screens and flows. I made UI changes to a few screens to increase their accessibility and intuitiveness and proposed new sets of role-specific Education screens.

User Interface Improvements

New Toggle Button for Feature Settings

dual function buttons (select and navigate) with excessive, confusing text​

Original

Original Settings toggle design

Alternative

New Settings Toggle design

separate toggle, with colors, icons, and large buttons

single navigation button, and user has time to process their selection

Care Team Card on Dashboard

button instead of card

unclear how to "Send a Hug" and to whom

Original

Original Care Team Card on Dashboard

Alternative

New Care Team Card on Dashboard

consistent card design

collapsible list for easy access to list of Care Partners, intuitive action for sending Hugs

Emergency Call Center Contact Card

Original

Original Emergency Contact Screen

rephrased page heading and content to clarify Emergency Call Center information

added Contact Card for clarity

Alternative

New Emergency Contact Mockup

Education Screens

  • Added a transition screen at the beginning of the Education flow, briefly introducing the user to the terms "Reach" and "Care Team".

  • Created two role-specific sets of Education screens catering to user's role in an emergency.

  • Modified the phrasing of the Education headings and content for clarity.

  • Prototyped a progress bar as a visual indicator of progress through the Education flow.

Reflections and Takeaways

How I contextualized the problem when I started my internship:

​​

  • Observation: Over Zoom, I observed an older adult go through the Reach and Care Team setup process with her sister and then asked follow up questions. I recorded task completion times, identified points of confusion, and documented her feedback on preferences, expectations, and pain points as she set up the Reach and invited her sister to join her Care Team. My notes challenged my assumptions about designing for older adults: for example, while my peers and I would likely skip through Onboarding screens and instructions, older adults tend to read them carefully.

​

  • Cross-functional collaboration: To gain a holistic understanding of the problem, I talked to members from various teams, from Customer Experience to Marketing to Product. I learned about customer interactions and recurring points of confusion for callers, insights from previous beta programs, the collection of backend data like clicks, dwell time, setup status, return time and stated reason, and the implications of trends in the data.

Designing for older adults

​​

  • User-Focused language: Older adults have varying levels of familiarity with tech-related terms, like "force-stopping" an app, or "Bluetooth pairing", so any information or instructions must be phrased with that spectrum in mind.

​

  • Simplicity: Older adults prefer simple UI without frills, and easy navigation with no complex gestures.

​

  • Clear instructions: To ensure that older adult users get the most out of a product, a well-designed function-oriented onboarding process with education about product features and step-by-step instructions for setup is crucial. While we might be comfortable poking around to learn to use an app, older adults tend to prefer more guidance. 

Figma prototyping

​​

  • Finding workarounds: While Figma's Variables and Conditionals were a game-changer for my prototyping process, this new feature had some limitations. For example, it does not allow for nested conditionals and is restricted to the if/else structure, lacking the capability for more complex scenarios with more than two cases.

​

  • Component library: Maintaining a good component library was crucial to using Variables effectively in my prototype.

​

  • Pseudocode: By mapping user journeys and identifying key variables and decision points, I could plan out how I wanted to implement conditionals throughout the prototype.

bottom of page