User experience

User Experience Portfolio

Man Yan Yik

Content Barnes & Nobles Self-checkout Stand

2

4

Pin-it

10

Capsule

22

Feed The Meter

34

Self-checkout Machine Study

Barnes & Nobles Self-checkout Stand This is a group project to understand regulations, advantages and disadvantages to current self-checkout stands. Using the information collected we developed a new potential design for a self-checkout stand that is better suited to the requirements of the retail market.

Group Members: Audrey Yik, Farbia Rahimian, Umar Hay, Dvir Maltzman, Daniel Chang, Kha Phi

The group observed different self-checkout machines, finding the six basic functions of the machine. Not all of these parts are ergonomically designed,and most users are confused while interacting with these components.

1. Lane light / store attendant call Shows available machines and alerts store staff when users need assistance 2. Touch-screen monitor Displays scanned items and guides users through the payment process.

3. Basket stand Area for putting shopping baskets during unloading.

4. Barcode scanner and scale Area to scan items for purchase 5. Payment module Area to dispense cash and receipt 6. ATM PIN pad Area for processing credit and debit payments

4

Ideation Development

Audrey Yik

6

User Interface

All the members in the group explored different directions for the design of the self-check out machine. Some tended toward the traditional self-check out machine, and some toward slim and modern designs. All designs are based on the identity of Barns & Nobles, in order to promote the store brand.

The interface design is a small part of this project. We decided to design a user-friendly interface for the check-out machine, and we drew inspiration from the Barnes & Noble website.

Dvir Maltzman

Audrey Yik

Graphic by Kha Phi

Final Model

Model built by Daniel Chang

8

The final model provides a private check-out space for users, as well as an adjustable table for people of different heights. There are also four shelves built around the check-out machine, so the store can promote magazines or membership cards in these areas.

Pin-it

A Journal App for Chemotherapy patients This is a one-month interface design practise, as well as the first interface design project my group and I developed.

Pin-it is a journal app that allows chemotherapy patients share their thoughts and provide advice to other patients. Our goal is to improve chemotherapy patients’ recovery experiences, and also solidify their bonds to family members, friends, and other cancer patients.

Group Member: Audrey Yik, Brendan Ngo, Matthew Allen, Nick Falgiano

10

Cancer Sucks Chemotherapy is a medical treatment to cure cancer and control its growth, however it may cause permanent damage to your brain, liver, hearing, and reproductive organs, and destroys your immune system.

Here are some side effects that chemo-patients normally experience: Physical

Emotional

Exhausted Sad Chills and sweats Scared Sore throat or a mouth sore Anxious Stiff neck Nausea Diarrhea Angry Vomiting Depressed Onset of pain Changes in skin Hair loss Weight loss/ gain Problems with thinking, concentration, memory - chemo brain

Patient Needs

Development Process At the beginning of the project, we did a task flow and story boards to discover task design opportunities for the app. These also helped us to think through how users are going to use the app and in what situations they will use it. We also filter some tasks that are not focused on our core concept, and either take those tasks away or make them less emphasized in the app. During this process, we also researched existing journal apps and developed the aesthetic design of “Pin-it”.

Chemo-Patients Most patients are frustrated with the healing process, and they frequently seek help and support either from professionals or other patients.

Distraction Being distracted can highly reduce patients’ side-effect symptoms and improve their performances during chemotherapy 12

Goals Setting goals can help patients to have hope and motivation in their lives. It’s a positive influence to patients.

Expression

Support

Expressing up and downs can help patients to be more positive about life.

Support from family members, friends or other patients can help a patient to be confident and positive about his/her future life.

Concept Model Story Boards At the beginning of the project, my team developed different scenarios for using the app and turned them into story boards. This activity helped us to discover opportunity areas for tasks in the app.

The Concept Model allows us to explore different relationships between users and tasks in the app. It also helps us to find a task to focus on and design around. The concept model shows how patients are able to connect with community members through the app, and the relationship between those tasks.

Public/ Community Members Matthew Allen

Patient

Nick Falgiano

Interaction

Give

SHARING THE JOURNAL ENTRY

Matthew Allen

Nick Falgiano

Share to Public

Support Love Care

The patient is now writing into his journal

Private

Write Journals

As the patient review his journal entry he then uses his stylus to scroll down.

New Journal Review Journal

Share to Public This shows the patient using his stylus to swipe down on his journal entry.

After scrolling down, the option to share Here the patient decides that he among different social media platforms wants to share it to Facebook, or within the App’s community. where it will automatically share on his wall.

Brendan Ngo Brendan Ngo

14

Emotional Release Support Reminder

Private Annoymous Comments

Patient is going through the chemotherapy process

Need

Writing Props

Achivements

Pre-set Achivements

New Achivement

Input

Completed Achivement

Audrey Yik

Cloud Service

Audrey Yik

Task chart

16

Wire Frame

The task chart was to explore the fluency of the flow and connections between tasks. It also helped my team to discover what tasks were missing or disconnected from the focus of the app.

Audrey Yik

The wire frame explains the different routes of different tasks. It introduces the direction of each functional button, where it goes, and where it ends.

Nick Falgiano

Mock ups Pin-it

+

Life Feed

Pin-it

12 JAN, 2016

12 JAN, 2016

I feel happy today, because my wife ... ...

Not a good day ... ...

New Journal Date: 25 Jan, 2016 Title:

T

Tt 10 JAN, 2016

9 JAN, 2016

I’m going to finish my chemotherapy soon!!! ... ...

A Wonderful Experience! ... ...

8 JAN, 2016

8 JAN, 2016

Ben came to me and bougt me my favorite chinese food! I feel so happy! I’ve been feeling stressed after I started my first chemotherapy. I want to finish my therapy soon, so I can enjoy food again.

Tag: #food #firsttimechemo #happy #beingpositive Comment:

T Jane bougt me some flowers today! ... ...

My first time using this app! It feels amazing! I will ... ...

Cheer up!

Tag: 7 JAN, 2016 I don’t know ... ...

Live Feed

LIVEFEED Live Feed

Journal Entry

JOURNAL ENTRY Journal Entry

COMMENTING ON POST Comment

Brendan Ngo

6 JAN, 2016 Maybe I should start writing ... ...

Live Feed

Life Feed

Brendan Ngo

I tried this burrito near the center and it’s very good!

Like & Comment

Life Feed

Comment Matthew Allen

18

Private

Journal Entry

Journal Entry

Brendan Ngo

Date: 10 Feb 2016 Title: Be HAPPY! This is my first journal and today is also my first visit in the infusion center ... ...

Log In

Public

Live Feed

Journal Entry

Feed LifeLiveFeed

Comment Matthew Allen

11 JAN Title: 2016 ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ ____________________________ Public

Delete

Post

Comment

CommentAudrey Yik

This is my first journal and today is also my first visit in the infusion center ... ...

I tried this burrito near the center and it’s very good!

Like & Comment I tried that burrito too, and it’s awesome!

Private

Journal Entry Journal Entry

Comment Comment Audrey Yik

Different design directions were approached in order to find the best solution to create a casual, personal and also somewhat shareable journal App. Two mock ups were chosen to have further developments because of their aesthetic and task presentation.

Final Design The final design filters all the pros and cons and unitizes the design from the mock-ups. The design uses less literal icons and graphics to increase usability and readability for users.

Life Feed 12 JAN, 2016 Not a good day ... ...

New Life Feed Post Life Feed

New Post New Post 8 JAN, 2016

Date: 25 Jan, 2016 12 JAN, 12 JAN, 2016 2016 Title: a good Not aNot good day day ... ... ... ...

T 10 JAN, 2016 I’m going to finish my chemotherapy soon!!! ... ...

9 JAN, 2016 A Wonderful Experience! ... ...

10 JAN, 9 JAN, 10 JAN, 2016 2016 9 JAN, 2016 2016 I’m going to A Wonderful I’m going to A Wonderful Experience! finish finish my my Experience! chemotherapy ... ... ... ... chemotherapy soon!!! soon!!! ... ... ... ...

I feel so happy! I’ve been Date: 25 Jan, Date: 25 Jan, 20162016 feeling stressed after I startTitle: Title: ed my first chemotherapy. I want to finish my therapy soon, so I can enjoy food T again.

8 JAN, 2016 8 JAN, 2016

T

I feel so happy! been I feel so happy!

I’veI’ve been feeling stressed after I startfeeling stressed after I started first my first chemotherapy.

I ed my chemotherapy.

I want to finish my therapy want to finish my therapy soon, I can enjoy food soon, so I so can enjoy food again. again.

Tag: #food #firsttimechemo #happy #beingpositive

#food #firsttimechemo Tag:Tag: #food #firsttimechemo #happy #beingpositive #happy #beingpositive

Comment:

Comment: Comment:

T 8 JAN, 2016 Jane bougt me some flowers today! ... ...

8 JAN, 2016 My first time!

This app feels amazing! I will ... ...

8 JAN, 8 JAN, 2016 2016 8 JAN, 8 JAN, 2016 2016 Jane Jane bougtbougt me me My first Mytime! first time! flowers somesome flowers This feels app feels This app today! today! ... ... ... ... amazing!

I will ... amazing!

I will ... ... ...

Tag: 7 JAN, 2016 I don’t know ... ...

6 JAN, 2016 Maybe I should start writing ... ...

Life Feed Life Feed

20

T T

7 JAN, 7 JAN, 2016 2016 Public I don’t I don’t knowknow ... ... ... ...

Tag: up!

Tag: Cheer 6 JAN, 6 JAN, 2016 2016 Private Maybe I should Maybe I should start writing start writing ... ... ... ...

Journal LifeFeed Feed Entry Life

Back Public Public

Cheer Cheer up! up!

Post Private Private

Journal Comment Entry Journal Entry Journal Entry

Back Back

PostPost

Comment Comment Comment

Problem Statement

Cancer and chemotherapy are always negative words for most people, especially for cancer patients. Happiness seems far away from those patients.

Our goals is to bring happiness back to cancer patients through “Capsule�, a gaming app, while encouraging and reminding them to continue their chemotherapy.

Capsule

A Gaming App for Chemotherapy patients This is a gaming app using card collection elements to provide distraction and encouragement for patients, so they can be less focused on side effects and depression during chemotherapy. The goal of this app is to bring positive energy and happiness to chemotherapy patients, while reminding them to track their medications.

Group Member: Audrey Yik, Gabriel Contreras, Emily Chen

Cancer

22

Capsule

Happiness

Concept Model

Capsule allows patients to engage with entertainment/games, so they can be less focused on the side effects they are encountering. The app also allows patients to track their medications by transferring the medications to in-game cards.

Wire Frame Mock up My team explored different tasks and the flow through the wire frame mock up. We discovered some transitional screens were missing and some tasks and task flows were confusing. This information helped us to develop a better and more clear wire frame.

Providers

Provide/ Promote Sign up

Pass Time Positive Distraction

Control Nausea

“Capsule�

Game/ Entertainment Scan Medication

Provide

Link

Collect Cards

Card Stores Card List

Engage

Provide Medication Education

Provide

Clan/ Card Donation

App Name

Educate Patients

Patients

Bring Patients Together

Link

Sense of Community

Daily Boss

Boss Battles Infusion Boss

24

Audrey Yik

Audrey Yik, Gabriel Contreras, Emily Chen

Beginning Store Card List Battle Clan Setting

Wire Frame Final The final wire frame fixed all problems we discovered in the mock up. We also invited people outside of the major to test the wire frame, in order to make sure everything is clear and easy to understand.

26

Audrey Yik

Visual Design Mock-ups In this phase, we explored different colors, textures, and graphics for the app. We tried to match the frame of the app to the land / character designs. Different fonts and icons locations were also tested in order to delivery the best gaming experiences to users.

Emily Chen

Gabriel Contreras

Gabriel Contreras

Audrey Yik

Audrey Yik

28

Final Design The final design featured a textured background but very minimal menu bar, as the team wanted users to focus on the graphics and gaming content.

We also did not want to overload the app with complex graphics, because chemo patients already have many things to process every day.

30

32

Problem Statement

Parking meters are a constant problem in today’s world; never having change, broken card readers, running back to add more time, and worst of all tickets. We wanted a solution that would allow people to pay their meters responsibly while not interrupting their lives

Feed The Meter

A civic app that makes your life easier This is an app my team created during a 12-hour competition. The goal was to create a solution to solve an existing civic issue in the bay area.

The competition was held by San Jose State University and sponsored by Microsoft and TechShop. Our team placed won first place in the competition, winning in design, business planning, and coding.

Group Member: Audrey Yik, Joshua Beisiegel, Tony Liu, John Lai

34

http://media.jrn.com/images/2000*1331/parking+meter4

Solution

Feed the Meter uses an app interface to create a simulated cell phone call which has an automated touch tone system to pay for your parking with minimal effort.

Competitor Research

Currently the only competitors are two limited release apps, which are used in minimal locations with limited functionality. These apps have clunky interfaces and are not widely used by the population, even in cities they have been implemented in.

Some comments about these apps: “ I’m glad that I can pay for my parking spot from home before I’m even at the lot. However, its user experience needs some improvement.”

Input parking information

“Good idea (I can’t stand carrying cash and anything I can do to avoid it is a good thing) but I find this app to look / feel amateurish and is generally inferior to the “ParkMobile” app in look / feel / function.”

“Confusing No instructions, difficult to tell whether parking is current or not. The UI is very difficult from other parking apps, I find it unclear and unnecessarily complicated. I don’t trust that I will not come back to find a parking ticket. I would not recommend this app.”

Phone Notification

(based on reviews from the apple app store.)

Meter Time Ends

Feed The Meter App

The app calls the meter

36

Business Plan

The business plan presented a completely advertising supported model, which would generate considerable revenue due to utilizing hyperlocal targeted advertising. This advertising will focus on highly relevant ads which charge at a much higher rate than traditional mobile advertisements.

Advertising Revenue: Three Ads Displayed Per Use, $3/1000 Impressions - .003/ad 5% Click Through Rate @ $2/Click, 2.00*0.05 = .10/ad .103/ad * 3 ads/use = .309 revenue per use 10,000 users @ .309/day * 3/week =$9,270 revenue per week Future Growth: Garage Integration Server-side calling Contract with cities, reduce fees and simplify process Tailored promotional campaigns International Expansion

38

App Demo My team also used “swift� to build up a demo and show how the app works in the real scenario. The demo shows how the user input all the data and the data will be transferred through a phone call and pay the parking meter.

EEDMTETER HEFM ETER FEED TFHE EED THE METER

FEED THE METER FEED THE MM ETER FEED THE ETER

Interface Design

0

The color of the interface design was inspired by the current signage on San Jose parking meters. Our team has spread information across six screens, which allows users to easily understand what data they need to input to pay the meter. Advertising space is also considered within the app, in order to generate revenue for building and maintaining the app.

0 0

0

0

0

0

FEED THE METER

FEEDFEED THE TM HEETER METER

Josh B.

PaymentPayment

Payment

Josh B. Vehicle Vehicle

0

0 0 0

0

LOG IN

4

NEXT NEXT

04Zone 8 0 84

SIGN UPNEXT NEXT

San Jose

Street Sweeping!

Street Sweeping!

Street Sweeping!

Space

No Parking No Parking No Parking 5

NEXT

NEXT

NEXTNEXT

8:00 a.m.

- 8:00 -a.m.

- 8:00 a.m.

NEXT 6:00 a.m.

6:006:00 a.m.a.m.

- 8:00 - 8:00 a.m. - 8:00 a.m.a.m.

DONE DONE

FEED METER FEED THETHE METER

HourlyHourly Rate Rate Hourly Rate 00 $ 2. $ 2.

00$ 2.Rate 00 Rate Hourly Rate Hourly Hourly $ 2. $ 2. 00 $ 2.

0000 Add Time Add Time Add Time min hour hourAdd Add Time 1Add 01 min Time Time 0hourmin 0 min hour0 0min 1 hour 0 minNEXT 1 1hour NEXT NEXT NEXT NEXT

THE METER EED THE METER FEED THEFEED METER FEED THE METER FEED THE METER FEED HEFETER METER FEED THE METER FEED THETM

FEED THE METER

HE METER FEEDFEED THE TM ETER

FEED THE METER

6:00 a.m. is Parking

- 8:00 a.m.

Free!

DONE

NEXTDONE

FEED THEFM ETER THE METER FEED THE METER EED THEFEED METER

THE METER FEED FTEED HE M ETER

FEED THE METER

0

PAY

PAY

PAY

PAY

1

hour

0

PAYPAY NEXT

min

Remind Me Me Me minutes minutes Free!

5 minutes 5 Remind 5 Remind minutes minutes 5Remaining 5 5 minutes Remaining Remaining

DONE DONE DONE Remaining Remaining Remaining DONE DONE

FEED THE METER

EED HE METER FEED TFHE MTETER

FEED THE METER

Total Fee Total FeeTotal Fee Hourly Rate Time Remaining Total Fee Time Remaining Time Remaining Time Remaining Time Remaining Time Remaining Time Remaining Today Your meter has 5 min $Fee 2. 00 is : Remaining Total Total Fee Total Fee remaining! 5 9 : 5 8 Time Remaining Time Time Remaining : : Time $ 2.500 5 9 5 59 8 5589 5 8 Time Remaining Time Remaining : $ 2. 00$ 2. 00 $ 2. 00 : : 5 9 5 8 9 5 5 9 5 8 8Remaining Holiday! : 5Remind :9 : 5 8 5Remind 9Me 8 5 95 2.Add 00 Time Remind $ 2. 00 $ 2.$ 00 8 Me 5 9 : 5 8 5 95: 95 :8 5Remind Me Me 5 8 Remind Me Remind Me Remind Me Parking is

DONE

0

5 Remind minutes minutes Me Me Me 5 minutes 5 Remind 5 Remind

PAY

minutes

Time Remaining

5 9 : 5 8 Remind Me

5

minutes

Remaining minutes Remaining Remaining minutes 5Remaining 5 5minutes

Remaining

DONE DONE DONE RemainingDONE Remaining Remaining

DONE

DONE

DONE DONE

Notification Bar 40

is NoHoliday!

Parking

Reminder for Parking

THE METER FEED THEFEED METER FEED THE METER

NEXT

Street Today Sweeping!

DONE

Home Screen

1

0 1 1

No Parking Noa.m.

Parking Noa.m.

Parking 6:00 a.m.

6:00 6:00

NEXT

FEED THE METER

Parking Restriction

Payment

Vehicle 0 Zone 8 ZoneCurrent Location 4Restriction 0 8 Parking Restriction Parking Restriction Parking Street Sweeping!

Street Sweeping!

Street Log out Sweeping!

NEXT

SIGN SIGN UPUP

FEED THE METER

Parking Restriction Parking Restriction Parking RestrictionZone

0 1 1 5 50 01 11 1

5

FEED THE METER

MTETER FEED TFHE EED HE METER

Josh B.

05 Space 1 0 1 15 10 Space 1 Space 1

LOG IN

NEXT NEXT

NEXT

FEED THE METER

Zone

Vehicle Vehicle 4 0 8 Space 4 40 08 8 Space Space Log out Log out

5

NEXT

THE METER METER FEED THE METER FEED THE METER FEED THE METER FEED THEFEED

FEEDFTEED HE M ETER THE METER

B. B. Vehicle Josh Josh 0 Log outPayment Payment

Vehicle San Jose San Jose San Jose Current LocationCurrent Location Current Location Log out

SanSan Jose Jose

FEED THE METER

Zone Zone

0

Location CurrentCurrent Location Current Location Log out Log outPayment

SIGNINUP SIGN UP SIGN UP LOG LOG LOG IN IN

SIGN UP

Josh B.

Josh B.

San Jose LOG INLOG IN

THE METER THEFEED METER FEED THE METER FEED THEFEED METER

THE METER FEED THEFEED METER FEED THE METER

Advertisement

Thank you.