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.