UX/UI Process Book by Nathan Wong

UX/UI Process Book

Nathan Wong

Nathan Wong 2

TABLE OF CONTENTS

JOURNALING APP: THE GALLERY

SUPPORT GROUP APP: SOLACE

Nathan Wong 3

JOURNALING APP: THE GALLERY Chemotherapy Patients

Group Members: Umar, Brian, Nathan, Marvin

Nathan Wong 4

THE GALLERY

Nathan Wong 5 Brian L. | Marvin J. | Nathan W. | Umar H.

Having cancer is a life changing endevor that affects many people and their loved ones. The symptoms, side effects of the disease, and treatment can cause certain long lasting physical, mental, and emotion traumas. Our group decided to create an app that will help with coping and understanding oneself through art. We hope that engaging in the expressive process everyday will bring along an improved mental and physical state over time.

Nathan Wong 6

INITIAL INSIGHTS:

- A simplified and cohesive design makes for a better user experience. - Identifying and implementing key interaction that were consistent throughout the application - Many applications exist for chemotherapy and cancer patients, however little to none that use art as a means of coping and expression. - Art is typically done in the traditional sense, but can become costly, intimidating, and to time intensive for a unpredictable schedule.

Nathan Wong 7

PROJECT BRIEF Create a Journaling app for patients who have been diagnosed with cancer.

Nathan Wong 8

Why Journal?

Journaling has many benefits in physical and mental health for the patient. -Journaling is a form is a form of expression that allows chemotherapy patients a means of confronting and taking back control.

Improved physique

Builds up a consistent schedule

Coping with feelings

Stress Relief

Recording History

Tracking Medication

Nathan Wong 9

Patients may face:

-different feelings come and go both during and after treatment -daily routines as they go to appointments and through treatment -affected work life -affliction -confusion -overwhelmed -denial -anger -fear and worry -hope -stress and anxiety -sadness and depression -guilt -loneliness -gratitude

Nathan Wong 10

The Power of Art

-Art is another fun and expressive outlet to help patients cope. -Art can be soothing and stress reducing, all while making it easier, personal, and private for patients to express themselves freely without the restrain of words.

Nathan Wong 11

STORYBOARDS

Our storyboards explored potential settings this app might be used in. There is an exploration in features, ones that make it unique from other journaling apps that are currently on the market.

Nathan Wong 12

RAYMOND

o~óã ç å Ç

Raymond is going through radiation therapy. During his treatments, he has trouble keeping track of his emtional state, and this app helps him track his feeling in the

Taking pictures with tags for emotion as he walks into treatment.

Keeping a visual representation of his support community open helps him stay positive.

During long treatments, he can take time to check in with himself and make an expression.

Keeping in touch with other patients through this support network gives Raymond other things to talk about

He can even work with friends to make combined expressions.

Raymond can even attach friends images to their contact to build his support network further.

At the end of the day, Raymond looks at his emotions and can make sense of his experiences.

With long treatments, this app helps Raymond stay connected and stay self aware.

Nathan Wong 13

DERRICK

a Éê ê á Åâ

Derrick is going through Infusion at home. He has trouble staying connected and likes to remind himself

In the morning, his alarm reminds him

Derrick sets a visual picture and a

the day.

a good day.

Derrick likes to set his phone with an

Before treatment and during his daily activities, he and his fellow patients

If he feels down or needs to reconnect quickly to replay his and his support groups messages.

Nathan Wong 14

Journaling and connecting with his emotions is about connecting with the right message for Derrick, and this app helps him get there.

Quick Post

Event 1. User has a thought or reflection they want to put down.

2. Two choices are available: Quick post for short messages, and Event for longer postings.

3. User takes a picture for Quick Post

4. Smilies are used to show what mood they are in.

“I wish I could have a chance to...”

Name: Bill

“Check out my profile!”

Name: Susan “I love photography!”

5. Uploading the post or picture makes it public.

6. Others who have felt the same in the last week are recommended. Their profiles can be viewed and commented on.

“Today

was such a great day, I was able to walk around and go outside with...”

7. A combination of their friend’s feed and their own posts create a collage.

Nathan Wong

Nathan Wong 15

My name is:

WELCOME

Kate

My recent post:

“Reflective thoughts”

Kate’s Journal Today, I found out that doing small exercises after I woke up in the morning helped me become more attentive during the day. I’ll try it again tomorrow to see if it helps.

1. Welcome screen shows recent updates and other topics of interest.

2. Clicking into one of the areas opens up a larger image of the content.

3. User can scroll through the other person’s journal and see their content.

4. Posts can be categorized by type. User can add their own categories.

My Journal

5. A simple drawing interface makes it easy and fun to add new entries.

Nathan Wong 16

6. Recommended colors are shown. User can choose these to make their posts look nice without effort.

7. This is displayed in their own journal, where others can also see what they are posting.

Nathan Wong

Sarah’s doctor recommends she keep a journal to keep help aid in managing her inner thoughts, feelings and to cope with stress. Sarah was referred to download “my journey” a free mobile app dedicated to the cancer community, it is a multi social media journal that acts as therapy by engaing the user through expressive art and writing.

SARAH BY Marvin Javier

This is a family that just found out their daughter is diagnosed with cancer.

The girl’s name is Sarah and she makes frequent visits to see her doctor.

Sarah can use the app during time of reflecting. (bed.public.desk.)

The journal allows Sarah to capture great times during her jouney.

This is the main menu. Its simple the user can either (capture moments, reflect, or explore.

Reflection page with keyboard and title.

Public wall in random order.

Hand gesture to swipe between reflections and art boards.

Mood options before you post.

Artboard with rainbow color tool and brush sets. Nathan Wong 17

CONCEPT MAP

Our Conecpt map shows a brief map of how the interactions all link together. Our main idea focuses around the SNAP EXPRESSION page, where the user inputs their art and entries. The PERSONAL WALL is where their own artwork is archived. The GROUP PAGE is a collective gallery where images from all kinds of users are shown so that others can gain insight and inspiration.

Nathan Wong 18

Nathan Wong 19

FLOW CHART

Our Flow Chart organized out Concept Map in a more structural way. This prepared us for the wireframing by allowing us to see what was extraneous and unecessary. Our goal was to have a focused app, one that would allow the user to make art easily, and nothing else. There is a social aspect, but it does not allow for much interaction. We believed that dedicated existing social media apps such as Facebook would perform that job well already.

Nathan Wong 20

Nathan Wong Brian Lanier Marvin Javier Umar Hay

Nathan Wong 21

TASK FLOW

The Task flow shows every function our app has and how they are connected. Our pages are separate from each other, and therefore each have a separate set of commands. The most complex part is in the canvas section, where there are commands in choosing different brushes, colors, and presets.

Nathan Wong 22

Enter App

Not logged on Info

Llogged on

Splash Page

Settings

Settings Menue

Name Email

Gallery

Grow Slowly Shrinks

Gesture interaction

Shrink Pinch

Springs back

Stretch

Throw

Shoots off

Studio

Action button Grow Draw

Short Term

Grab

Favorite Goes to Studio

Canvas Action button

Gesture interaction

Shrink Pinch

Stretch

Draw

Throw

Favorite

Erase/ edit groupings and structures

Shoots off

Springs back

ReEdit

gets grouped with like kind

Action Button

Stays Long Term

Public

spits you out to Gallery

Private

Drag

Publish Color

Hold drag to pick size Use

Drag

Texture

Hold drag to pick teture and intensity spin outside to pick filter Use

Reaction Hold drag to pick reaction and intensity spin outside to pick filter Use

Nathan Wong 23

WIREFRAME

This is the layout of our wireframe. Everything is pretty straightforward, with the exception that we wanted to reduce the number of buttons within the app. Most of the navigation is performed by swiping the finger left and right across the screen to jump between different pages.

Collage Page Collage Page

Setting block Setting block 1 1

WELCOME WELCOME Sign Sign in in

Collage Page Collage Page

Snap Expression Snap Expression

Setting block Setting block 2 2

Snap Expression Snap Expression

SettingSetting SettingSetting SettingSetting 1 2 block 1block block 2blockblock 3block 3

Collage Collage PagePage

Images Images

Comment Comment +1 +1

Snap Expression Snap Expression

Explore Explore

Setting block Setting block 3 3

My My WallWall

My Wall My Wall

Setting block Setting block 4 4

Explore Explore

Images Images

Text Text

Setting Setting Setting Setting Setting Setting block 1 1 block 2 2 blockblock 3 3 block block

My Wall My Wall TextText

TextText

report

ImagesImages ImagesImages

Images Images

Nathan Wong 24

report

ImagesIm

Images Images

Wall MyMy Wall

ImagesIm

ImagesImages

ImagesIm ImagesImages

ImagesImages

Collage Page

Setting block 1

Setting block 2

Setting block 3

Images

Collage Page

Setting block 1

WELCOME Sign in

Collage Page

Snap Expression

Setting block 2

Snap Expression

My Wall

Setting block 3

My Wall

Explore

Setting block 4

Explore

Images Images Images

Images

Setting block 1

Setting block 2

Setting block 3

My Wall Text

Images

Text

text

report

Image Text

Images

Text

mages Images

mages

Text text

Text

Text Image

Nathan Wong 25

VISUAL IDEATION

Our ideas for the visual language included bright colors and exciting visual imagery. We wanted the environment to be inspirational to the user so that they would be motivated to express themselves.

WELCOME

MY PAGE DRAW ANYTHING!

Nathan Wong 26

The Gallery on the Ipad

Nathan Wong 27

COLOR INSPIRATION

A consistent aesthetic and style is imperative to creating an app that looks unified and complete. We gathered several types of bakcgrounds that were aesthetically appropriate. These backgrounds reflect the actual pieces of art that the user can create within the app.

Nathan Wong 28

Nathan Wong 29

FINAL AESTHETIC

T HE G A LLER Y

user name password

Nathan Wong 30

GALLERY

STUDIO

G A LLER Y

ST UDIO

CANVAS

C A N VA S

LOGO

Nathan Wong 31

FINAL CANVAS

This is the final canvas page without the background. Pressing on the small square expands a larger menu with several options. Clicking on one of the sides gives even more addition options such as paint tool, patterns, undo, redo, color, and bucket tool. Once not in use, the menu is non-obstrusive to the art piece.

Nathan Wong 32

CANVAS

Nathan Wong 33

FINAL DESIGN

The Gallery is an app where one can express themselves without judgement or critique. The user is free to do whatever they want to express their feelings. This is all an important part of overcoming cancer and finding solitude in something enjoyable.

THE GALLERY

Username Password Forgot Password?

Nathan Wong 34

Hi Annie!

Settings Privacy Preferences Account Help Log out

Nathan Wong 35

STUDIO

Nathan Wong 36

STUDIO

CANVAS

The Canvas

THE CANVAS

Tap the Fab to activate

Hold drag to select active component, then use it 1) Tap the Square to activate Continue tapping flip through tools 2) Holdto drag to select active Rotate filters with drag tothen allignuse with component, it desired texture element 3) Continue tapping to flip through tools 4) Rotate filters with drag to allign with desired texture element

Nathan Wong 37

SUPPORT GROUP APP: SOLACE Chemotherapy Patients

Group Members: David, Fariba, Nathan

Nathan Wong 38

Nathan Wong 39

Going through cancer is a difficult process for the patient, mentally and physcially. Doctors highly recommend having a support network available. However, this also puts a strain for the caretaker since they have to make adjustments to their own life and make time to care and look after them. SOLACE provides the infrastructure for creating a close bond with their family and friends. This results in more time being spent in other areas and a happy patient that can have their social and psychological needs fulfilled.

Nathan Wong 40

WHY SOLACE?

The definition of solace is comfort or consolation in a time of distress or sadness. Finding one’s own “happy place” in times of stress will improve the overall morale, vigor, and strength of the patient. Happiness is contagious, and the support group directly affects the core of the patient.

Nathan Wong 41

RESEARCH INTERVIEWS

We interviewed several people who have great experience with the whole cancer process. Each person gave us a different perspective, allowing us to complete an entire picture of what goes on in the Hospital from walking into the doorway until they arrive home. Kay gave us insights on the nurse and patient dynamics. She takes care on average 5-10 patients at once depending on the time of day. Her concerns include the Hospital being occasionally understaffed. Yassier gave us insights on problems she encountered during her chemotherapy sessions. Her main concern when she was undergoing treatment was that it would get lonely at times. Kathleen told us about patterns she saw at her clinic over her many years as an oncologist. She asserted that technology is always welcome in the health industry and there is much to be improved throughout the process. We also worked with the Seattle Cancer Care Alliance and talked with their employees to figure out troublesome points in the clinic. We gained a lot of information regarding space layouts and the entire process of how patients are checked in and out.

Nathan Wong 42

Kay Husler, Nursing Student

N. Yassier, Cancer Survivor

Dr. Kathleen, Oncologist

SCCA, Cancer Hospital

Nathan Wong 43

PATIENT PROVIDER RELATIONSHIP

Intimate relationships. The nurse knows the patientâ&#x20AC;&#x2122;s routines, preferences, & special needs. Some of the nurses and patients are extremely close and have many years, in some cases decades between each other. They treat each other just like a family. The patient also gives feedback to the nurse. In the downtime, they seek distraction methods.

Nathan Wong 44

STEP BY STEP PROCESS

These are the steps the patient takes in a typical clinical visit. This process can last from anywhere to 2 hours and up to several days. Sessions can be in blocks and varies depending on the overall health and age of the patient.

Leave Hospital

Wait for Room

Blood Test

Vital Check Inside Room

Wait for Medicine

Finish Infusion

Check in Hospital

Vital Check Leave Home

Medicine Test

Start Infusion

Nathan Wong 45

ITEMS

We paid great attention to what patients were bringing in into the clinic and what was often packed. The main objects were extra clothes and electronics to keep the patient warm and to pass the time respectively.

Nathan Wong 46

Nathan Wong 47

KEY FINDINGS

From the information gathered, we decided to focus more on these 7 points which define the overall experience for the patient.

1. Nurses can provide support, patients may need it more consistently 2. Family & friends play an enormous role in providing positive energy throughout the chemotherapy and recovery process. 3. Distraction methods help during chemotherapy. Find a “Happy Place” 4. Family & friends want to “be there” for the patient. May not be possible due to schedules, location, or work. 5. Newer infusion pumps can connect via Bluetooth 6. Cancer patients can have weak hands & sensitive eyesight 7. Patients love meeting role models/celebrities

Nathan Wong 48

PURPOSE

This leads us to the 3 main points that define our app.

1. Connect patients with family & friends during sessions 2. Enable family & friends to â&#x20AC;&#x153;be thereâ&#x20AC;? for the patient 3. Keep family & friends informed on appointment schedules

Nathan Wong 49

INSPIRATION

We looked at methods apps used to calm patients. We wanted to replicate it so that looking at the app would become a stress reliever. Many of them used very calming colors similar to water or the sunset.

Nathan Wong 50

Nathan Wong 51

IDEATION POST-ITS

We went through multiple rounds of ideation before arriving at our current concept.

Nathan Wong 52

Nathan Wong 53

CONCEPT MODEL

INFUSION SESSION APP

Guided Imagery

Taste Touch

Words

Passage of time

Cancer Battle

Processing the cancer treatment

Patient

Sound

Meditation Smell

Support

Other patients

Hospital

Surviving Patients In Session

Family/ Friend

Nathan Wong 54

is nv i e ipat artic p y l i fam Friends and

CONTROL HIERARCHY DATA ELEMENTS

COMMUNICATIONS

-Contacts info -Appointments + Schedule -Input -Personal Info -Email -Password -Connection to pump by bluetooth

-Invite friends -Notify friends start of session -In â&#x20AC;&#x153;Journeyâ&#x20AC;? messaging -Record and text messages -Status changes of patient -Notifying friends at the end of session -Remind upcoming appointments (Both friends and patients) -Pump settings

PLACES Home / Places other than hospital: -Search upcoming appointments from both user and support network. -See when sessions end (For friends)

-Appointments adding and deleting -Patients the support user is following -Adding friends -Deleting and inviting users -Maintaining a support network.

CONTROL HIERARCHY

Hospital: -Waiting room preparation -Chemo session room (visual experience)

ORGANIZATION

HOME

HOSPITAL

SENSES

-Send notifications -Adding or removing support -Starting the application -Joining an invited journey -Enhancing the relationship between long distances

-Preparing during the wait -Adding and deleting friends -Managing appointments -Changing appointments if necessary -Notifying family and support -Chemo session connects with pump and support -Visual expression -Communication through sound, touch and feedback from app

-Buttons -Sounds -Tactile feedback -Mood lighting -Visual imagery -Session duration -Visual during chemotherapy -Sounds from the environment and avatar -Tactile feelings -Colors that change

Nathan Wong 55

LEXICON

Nathan Wong 56

SOLACE: The Interactive portion the user goes into to communicate with others Notification: Patient sends notification to support group as to when his or her session will start. Friends: Add or delete members in your support group. Calendar: Change your appointment dates, viewable by support group. My Hero: Request to meet a celebrity or athlete.

Nathan Wong 57

VISUAL PROTOTYPES

Select All

Notifications Bill@gmail.com

Fariba@gmail.com

David@gmail.com

Nathan@gmail.com Jake@gmail.com

Notify in

Nathan Wong 58

minutes

USER VS SUPPORT

Both sides use the same app. The interface is different depending on who you log in as. The supporters are able to see everything that is happening on the patients screen except for their friends list.

Nathan Wong 59

WIREFRAME USER

Nathan Wong 60

This is the Home screen where users can choose where to go. Options include friends list, calendar, notifications, and my Hero.

Nathan Wong 61

SOLACE

Nathan Wong 62

FRIENDS AND CALENDAR

Nathan Wong 63

MY HERO

Nathan Wong 64

In collaboration with Make A Wish Foundation, it is possible for the patients role model or celebrity to send them a personalized message through the app. It is much more accessible than any other social media outlet.

Nathan Wong 65

WIREFRAME SUPPORT

Nathan Wong 66

Nathan Wong 67

FINAL

Nathan Wong 68

Brightness

Nadia

Sound

David Fariba

Background

Glow

Nathan Mahin Nadia Reza Parisa

Voice Recording

Reza Parisa Nadia

Done

Delete Reza

Nathan Wong 69

SOLACE is a better alternative to social media applications because it offers a focused,close, and personal environment with no outside distractions. Everything happens in realtime, just as if their family and friends were sitting right next to them.

HISTORY John Cena Dwayne Wade Roger Federer

Nathan Wong 70

Calender

Friends list

September 2015 MON

TUE

WED

THU

FRI

SAT

Mahin

SUN

Marjan N Nadia Noshin Nathan

SATURDAY SEPTEMBER 8

Reza O Oskool Olagh

Nathan Wong 71