descripArtboard 5.png

Bsmart App

Adobe Creative Jam

Project type:

Design Jam

Timeframe:

5 days

Team:

Solo

Role:

Designer & Researcher

indexArtboard 1_3x.png

Preview

BSmart is a smart home app that is highly accessible for the senior population. The app utilizes voice assistant technology and spoken content to allow seniors to navigate the app more smoothly and quickly without learning. BSmart won an Honorable Mention in Adobe + Ring! Creative Jam, and scored top 10% among all 300+ participants.

Problem Statement

Design an inclusive third-party mobile app for a specific persona with special needs to help bridge the technology gap, to provide peace of mind and help senior people install, operate, or share devices and information to improve their surveillance, communication, temperature, and entertainment around the home and their neighborhood. 

Background

Many elderly are living by themselves, without access to care or transportation—or due to the pandemic, isolated from family and friends. Senior citizens and the disabled elderly can benefit from the safety and connection that smart home systems provide, but they may not understand smart home technology, nor have loved ones or tech-savvy help to install or operate connected devices

Research

 Competitor Analysis 

Given the limitation of the time frame and limit connection with the user group, I decided to do a quick desk research on competitors and accessibility. To better understand the problem and users, I begin with investigating the existing products and guidelines for designing for senior online. I observed existing smart home products like Ring Doorbell, Amazon Alexa, Apple Home, ​​SimpliSafe and paid special attention to their approach to accessibility. 

CompetitorArtboard 1_4x.png

Accessibility Research

I also conducted some research on accessibility needs for seniors. According to the Smartphone ownership in the US by Statista, over 61% of adults 65 years and older owns a cellphone and 75% of them use the internet constantly which drastically increases compared to 10 years ago. Within the group of seniors that use the internet, there is also a technology gap. Two different groups of seniors emerge. The first group who tend to be younger and affluent is more adapted to the technology, and also has a positive view of the benefits of online platforms. This subgroup of seniors, they are as capable as others in technology, so I will focus on compensating for the physiological and cognitive changes.

The other who tends to be older and less affluent is largely disconnected from the world of digital tools and services, both physically and psychologically. And considering this subgroup, I want to make sure the interaction is easy enough that does not cause confusion, and provides clear instructions.

Blurry Background

Findings

Personas

Lisa.png
James.png

Needs → Implication

How might we transfer design needs to solution?

1

Needs: Bridge the technology gap

Implication: Use simple interaction and minimize learning process

Needs: Compensation for physiological and cognitive changes

Implication: making it easier for physical frailties such as mobility challenges, or poor hearing, as well as cognition changes such as memory.

2

Needs: Helping alleviate social isolation or loneliness

Implication: Making easier connections with family and friends, or having a remote assistant

3

Ideate

Wireframe

bsmart sketch.png

Design Decision

Having a voice-activated virtual assistant button available on every screen, so users can navigate the app with ease.

Corresponding Design Implication

1, 3

bsmart sketch (2).png
bsmart sketch (1).png

After finalizing HMW from previous research, I started drawdown my ideas using Invision freehand to illustrate the key functionalities. Each sketch shows the key design decision I make and the design implication I considered.

Design Decision

Use one click to activate the main functionalities like lock, unlock, and call.

Corresponding Design Implication

1

Design Decision

Having larger text as well as tap to speak the context features to compensate the possible visual impairment

Corresponding Design Implication

2

User Flowchart

Illustrated Waves and Particles

Final Design

Key Page Design

Onboarding

Asset 5_4x.png
Asset 4_4x.png
Asset 3_4x.png
Asset 2_4x.png

Key Page Design

Help Instruction

Asset 8_4x.png
Asset 6_4x.png
Asset 7_4x.png

Key Page Design

Virtual Assistant 

(Press spacebar to speak)

Key Page Design

Room Control

Key Page Design

Home Page

Reflection

iteration Direction

Improve on Accessibility 

Pay attention to font size, color, and details that might cause accessibility issues. Do a comprehensive accessibility assessment with WCAG 2.1 and making enhancements accordingly.

What Will I do differently if given more time?

Include Real User in Design Process

With given more time, I hope to be able to do interviews with real users and walk in their shoes to understand their needs and pain points. I would also like to conduct a usability test with them to further determine direction for iteration.