logo small new

 

 

work    |    about

LISNEN-HERO-LOGO

L!SNEN

iOS & Android App Design

 

 

Project Overview

__________

Lisnen is a form of assistive technology for those who are deaf or hard of hearing (DHH). Our task was to create an app that detects important environmental sounds as they occur, and alerts individuals through the phone’s vibration and flashing light.

Lisnen is a form of assistive technology for those who are deaf or hard of hearing (DHH). Our task was to create an app that detects important environmental sounds as they occur, and alerts individuals through the phone’s vibration and flashing light.

Client: Lisnen

Product: Native app for iOS and Android

Design Sprint: 3 weeks

UX Tools: Figma and Principle

The Team: Me: UX & icon animation, Jamil: UX and icon animation, Rayisa: UX, Gerald: UI & Logo design

Client: Lisnen

Product: Native app for iOS and Android

The Team:

Client: Lisnen

Product: Native app for iOS and Android

The Team:

Design Sprint: 3 weeks

UX Tools: Figma and Principle

Design Sprint: 3 weeks

UX Tools: Figma and Principle

team-me
team-jamil
team-rayisa
team-gerald

Me

UX Design & Icon Animation

UX Design & Icon Animation

Rayisa

UX Design

UI & Logo Design

Research

Research

__________

Research Methods

Research Methods

Our UX team surveyed 16 people and interviewed 6 people with moderate to profound hearing loss. Through our research we were able to get a greater understanding of the lives of the DHH community and how they overcome obstacles related to living in a hearing world.

In addition, we did a competitive analysis to look at the current solutions people are using. Current solutions were not meeting the needs of the community.  We realized that there is a gap in the market for a functional, well designed alerting app.

Getting to know our users

Getting to know our users

From our surveys and interviews, we realized that we had 2 similar but distinct users: our younger user Sara, and our older user Jack.

With both users in mind, we were able to pinpoint the main qualities our they would want to see in an app:

- Reliability

- The app should blend seamlessly into their lives and habits

- Ability to customize alerts (more important for our younger, tech savy user)

- Intuitive and easy to use (more important for our older, tech challenged user)

From our surveys and interviews, we realized that we had 2 similar but distinct users: our younger user Sara, and our older user Jack.

With both users in mind, we were able to pinpoint the main qualities our they would want to see in an app:

- Reliability

- The app should blend seamlessly into their lives and habits

- Ability to customize alerts (more important for our younger, tech savy user)

- Intuitive and easy to use (more important for our older, tech challenged user)

lisnen-lersona-with-shadow

Development

Development

__________

What Do Our Users Want?

What Would Jack and Sara Want?

We did a whiteboard exercise to look at which features were essential to our app, and which features our users could do without.  We included all of our must-have features in the app, and also decided to include one nice-to-have: the setup tutorial. This would make the app easier to understand for our older user, Jack.

 

lisnen-features

Design Iterations

We went through 5 versions of mid fidelity wireframes and 3 rounds of prototype testing before we landed on a final version we were happy with.  This customer journey map shows our improvements from V1 to V5.  Our most significant improvement was in onboarding.

V1 users felt that the billing screen was off-putting, as this was the first time they were made aware of the subscription based model. We created a smoother introduction to payment, and gave users a reason to subscribe before asking for their card details.

See detailed improvements in the full case study.

lisnen journey

Technical Roadblocks

Technical Roadblocks

During the testing phase, we were struck by many technical questions we hadn’t previously considered. This was a major road block in our work. With Android, alerts would be able to take over the phone’s screen and vibration however iOS has a strict operating system which would restrict some functions. These limitations threatened Lisnen’s ability to function as we had imagined.

 

In all honesty, we started to panic. We thought there was no way this was going to work as an iOS app — which would be a big problem as half of our users are on iOS. After a lot of technical research and consulting our local app development expert, we were able to come up with a functional solution that would allow Lisnen to fulfil it’s purpose for iOS.

Creative Solutions

Creative Solutions

ios vs android2

 

Lisnen’s alert for iOS would come in the form of a phone call. When a sound is detected, the Lisnen app would send feedback to their server, which would then place a phone call to the user’s phone. This would allow a full screen take-over and would keep alerting the user until the phone call is picked up.

The downside: this solution doesn’t work when the phone is offline. When the phone is offline, it will receive a push notification with 30 seconds of vibration. Although not ideal, this is only a minor hinderance; research indicated that users would mainly use Lisnen in their home where people tend to be connected to wifi.

 

 

The Final Product

The Final Product

________

final product screens

Animations

Animations

After Gerald, our UI designer, worked his magic on the wireframes, Jamil and I began working on the high-fi prototype.  Using Principle, we added animations to bring the app to life.

I animated the sound wave so that it appears to be picking up environmental sound. Once the app is developed, the sound wave will move in real-time, reacting to actual sounds.

Jamil animated the onboarding characters which gave the app a welcoming and friendly personality.

Learnings

Learnings

When I first started working on the Lisnen app I was focussed on the visual appeal and user interactions, but when I reflect back on the project, our greatest acomplishment had been understanding and overcoming the technical constraints of the operating systems. The experience really made me realize that, as a UX designer, I can't always take the client's word for it - I need to make sure I have done my own technical research to know that the technology will work as intended.

If I could do it all again, I would have looked into the technical considerations earlier on avoided our scare mid-way through the project. I am very happy with our Android app and, although our iOS solution isn’t ideal, it is still a functional solution to assist the DHH community.

 

footer-linkedin
footer-medium
email white