A half page width cover photo for Sonder, the app.

SONDER

SONDER, an app designed to connect those who are affected by cancer with tattoo artists through the medium of tattoos.

After interviewing tattoo artists and those affected by cancer we saw a need for cancer patients to express and empower themselves during and after surgery and to be connected to caring artists. Sonder is an app that meets the needs of both cancer patients and caring tattoo artists.

We tested the prototype with tattoo artists, cancer patients and design professionals. The feedback helped guide and refine our app into its most recent iteration. A video capturing the main features of the app is included below.

ROLE:

FIELD:

App Design

YEAR:

Aug 2016

TEAM:

  • Vanessa Liu
  • Jasmyn Marasigan
  • Iris Wong
  • Quinn Kim
  • Allison Chen

DISCOVERY

After interviewing tattoo artists and those affected by cancer we saw a need for cancer patients to express and empower themselves during and after surgery and to be connected to caring artists.

OPPORTUNITY

We took this opportunity to provide a memorable experience for cancer patients to find caring tattoo artists through the convenience of an app.

A gif animating the interactions of viewing a story.
A gif animating the interactions of viewing a story.

MESSAGING ★

My role in interactive prototyping was creating the messaging portion of the app. This gif animation illustrates the interactions I worked on.

Once a tattoo artist and a client both hit match they can begin messaging each other preliminary ideas and sketches before booking a consultation.

STORIES

An important part of the experience was client story making. It serves as a journal of their journey that they can look back on as well as sharing with the community.

Each story has multiple chapters and the option of multiple contributors.

Users simply swipe up on a story tile to read more or save as inspiration

A gif animating the interactions of viewing a story.
A gif animating the interactions of setting a reminder.

REMINDER ★

After the initial consultation the app will remind the user to complete their story to publish and share with the community.

They have the option of setting a reminder for a later date, making the banner disappear.

IPAD FIRST

We wanted our users to take their time in crafting their stories, and to browse artist profiles. We felt that a mobile version would be too cramped for looking at small details, and a desktop version would be too formal. So we decided to design for iPad first.

An example of Sonder on an ipad

PROCESS

An interview photo with Allison (me) and two tattoo artists in their parlour.

USER RESEARCH ★

I interviewed the majority of the tattoo artists at their parlours. Their most memorable moments are with clients who get tattoos to cover up scars, recreate areolas, or who wanted meaningful tattoos.

OPPORTUNITY

Their input and feednback was crucial in our decision to focus our project on cancer patiences and caring tattoo artists.

WIREFRAMES TO MOCKUP

Greybox wireframe of an idea board.
An arrow pointing right.
Full color mockup of the home or explore page.

The 3 column style of the tiles were too tight so we decided to move to a 2 column grid which felt more welcoming.

Greybox wireframe of a profile.
An arrow pointing right.
Full color mockup of an artist profile.

We incorporated more items to make the client story page more polished. Such as the match button, timeline of their story and their artists.

An gif of animating into a full bleed image.

DESIGN DETAILS

From user tests we found that the asymmetric tiles were a bit jarring so we changed the images to fill the entire width of the tile.

CHALLENGES

Focusing on cancer patients and empowering them was important to us so we made sure to have checks throughout development - from copywrite to image selection - we made sure the tone was calming and respectful.

A gif showing two picture styles.

OTHER WORK

Explore some of my other work.

Fire Information Request

An online service for Surrey citizens to request Fire Department related information - such as structure fires, vehicle fires, vehicle accidents and more on the MySurrey Portal.

This project is currently in development with a release date of early February 2019, a test link can be found here.

ROLE:

  • Product Designer
  • Interface Designer
  • User Researcher
View Project

FIELD:

Web Application Design

YEAR:

Feb 2019

Fire Information Request desktop image