THE APP FOR
ROOMMATES
SHU O-CHU N CHU EH (Chelsea ) 03300357 F ian l Review 2014.12.12 02:30 P M 1 s t Submission We b De s i g n & N ew Med ia D epartm e nt
A c adem y o f A rt U niv e rsity
03 Elevator Pitch 04 Autobiography 05 RĂŠsumĂŠ 06 Statement of Interest 07 Project Description
Proof of Concept 09 Concept Video Link 10 Prototype Link 11
Information Architecture
12 Tasks 1-4
strategic Process 22 Thesis Ideas Survey 23 Target Audience Population Structure 24 Compatitive Analysis / Matrix 30 Unique Positioning Statement 31 Inspiration 33 Mind Mapping 34 Content Map 35 Business Model 36 Experience Map 37 Target Audience Description / Personas
04 05 06 07
UX Process 44
User Testing Information
45
Testing Plan
47
Testing Results
54
User Flow
55
Information Architecture Process
56
Key Words Exercise
Visual Design Process 58
Mood Board
59
Logo Desgin
61
Design Specification - Color & Type
63
Visual Design Guildelines
64
Sketches
Techinical Process 67 Technical Specification
Analysis & Conclusion 70
Conclusion
71
Portfolio
72
Direct Study Journal Highlights
75
Biblography
Table of Contents
01 02 03
Overview
001
Roomies
Table of Contents
002
Roomies
01 . Overview
Elevator Pitch
Elevator Pitch
003
Roomies is a responsive web application optimized for iOS devices that often arise when people live together in a shared space. It provides an effective communication channel to mediate conversations about household chores with fairness and accountability. Roommates using this app can plan a housework schedule together-and to ensure that the chore assignments are fair for everyone, users have to log their own progress after completing their chores every month or week. This accountability feature keeps users motivated to use this application while they create a peaceful, organized living space.
Roomies
can be used by roommates who want to solve the kind of issues that
I am a Taiwanese girl with a male’s Mandarin name, Shuo-Chun
Before I came to the USA, I had some part-time jobs. I took on
Chueh. It means large, big and decent. I got this name because
a month-long position with Design Popular Imagination (DPI)
when I was born, my parents took me to a fortuneteller who said
magazine as an executive art design assistant. A year later, having
that I will become a tough businesswoman. The fortuneteller gave
just graduated, I worked briefly as an artist for Common Wealth
me a masculine name to ensure that I can be successful in the
Magazine, a well-known and respected business magazine in
future. However, I grew up into a different person as what the
Taiwan, designing interfaces for iPad e-books. I was also an art
fortuneteller predicted.
teacher teaching 3-5 year-old children at the same time.
Autobiography
Autobiography
I was always the shortest girl in my classes. I aways loved art and
On my leisure time, I like shopping, origami, playing piano, drawing,
music without any ideas of finance. I was always good at painting
and hanging out with friends. Also, I like wasting my time on beautiful
during my childhood, especially on the faces of my family members
things such as writing diaries with a cup of milk tea, and cleaning
and on the walls of our home. Therefore I took art classes in junior
my room until there’s no dust anywhere. Living in a foreign city
and senior high school, and majored in visual communication of
far away from my hometown has allowed me to have a chance to
design and minored in graphic communication arts when I was in
absorb the new cultural elements around me and integrate them
college.
into my design. The knowledge I have learned from Academy of Art University gave me a sense of accomplishment in my designs.
I moved from Taiwan to San Francisco two years ago to continue
In the future, I hope to focus not only on learning about aesthetics
my education at the Academy of Art University to pursue my dream
but also improving my technical skills. I am looking forward to do
of becoming a successful designer—a path to success that has
my best with my thesis project with all my passion.
always felt truth to me.
Roomies
004
Résumé Uversity,Inc. San francisco (Sep, 2014- Present)
CHELSEA CHEUEH
Design Intern
To become an UX/UI designer.
OTTO2, Taipei City (Nov. 2010 – Jan. 2011) Children's Art Teacher (part-time)
Contact Information
Web chelseachueh.com
-Teaching drawing and painting to three to five-year-old students
E-mail c17ttw@gmail.com Tel 415.728.5660
Common Wealth Magazine, Taipei City (2010-2011 )
Address 616 Broadway St. Apt #2, San Francisco, CA, 94133
Artist (part-time, irregularly scheduled) -Laying out pages for publication
Education
Acafemy of Art University, MFA (Jun 2011 – Present)
-Interface design for e-books
Major: Web Design & New Media
Design Popular Imagination (DPI) Magazine, Taipei City (Jul. 2009 – Sep. 2009)
Skills
National Taiwan University of Arts, BFA (Sep 2006 – Jun 2010)
Executive Art Design Assistant
Major: Visual Communication of Design
-Laying out pages to ensure most suitable graphics and photographs are used
Minor: Graphic Communication of Arts
-Undertook and completed internship
Ai Id Ae Fl W
Activities
Taipei Fine Arts Museum (2007) Volunteer Guide
Photoshop, Illustrator, Indesign, AfterEffect, Flash, Microsoft Office
Language Basic HTML, CSS, Javascript
SEEDS Iceland (Jul. 2010 – Aug. 2010) International Volunteer
漢 En 台 Maderin, English, Taiwanese
Résumé
Objective
Work Experience
005
Roomies
SHUO CHUN CHUEH
Maya Angelou
I have a long experience living with roommates. I slept in a bunk
live together with different backgrounds and habits, it can easily
bed with my older sister when I was a child, moved into a college
lead to conflict and arguments. Wouldn’t it be great if there were
dorm with three other classmates, and even made my bed on the
a communication channel among roommates and housemates
floor of a classroom at an elementary school with 15 people when I
to prevent the awkward situations which inevitably occur? With
was a volunteer in Iceland. Today I live in an apartment with my two
Roomies I hope to offer a viable solution.
sweet roomies in San Francisco. I have wonderful memories about living with roommates. Roommates provide us companionship,
This thesis project has also given me the opportunity to sharpen my
connection, cooperation and a lot of fun.
skills with an emphasis on usability, user experience design and user interface design. I hope to become an UX/UI designer in my future
However, living with people is not only about sharing bills and happy times together, but also housework and space. When people
career.
006
Roomies
If you don't like something, change it.
Statement of Interest
Statement of Interest
Category: Productivity Roomies is a responsive web app that can be used by roommates
Chores are also weighted with difficulty points. Each home member
to solve housework issues. There are many things that could
needs to earn a certain amount of points every week or every month.
cause conflict in a home, not only about rent and bills, but also the
This keeps the chores assignment fair and the users motivated to
assignment of household chores. This app provides an effective
use this application to create a peaceful, organized living space.
Project Description
Project Description
communication channel to solve this problem and avoid awkward conversations or arguments.
The target audience for this app is young people, 17-28 years old,
007
who live in a city with someone else. They might be students and might also work part time or low- to medium-income jobs.
by logging in to a Home Profile. Users can set up a chores list together with weekly chores and monthly chores. When one member of a
Through this project, I have increased my knowledge of developing
Home group claims a chore, it is added to their individual to-do list.
a real-world app and my understanding of the UX/UI design process
There they can set up alarms as reminders to get their chores done
from beginning to end. It has given me vital experience and broader
on time.
perspective as I perpare to join a real design firm.
Set up chores
Users claim chores
Finish chores and get points to achieve
also set up the points (Difficulty) of each chores
from the chores list
personal monthly progress
Roomies
When a group of roommates decides to use Roomies, they will start
Proof of Concept
008
Roomies
02.
Concept Video Link
Roomies
009
https://vimeo.com/114215156
Prototype Link
LOG IN
Please use Xcode ios simulator to open the prototype with the following settings: Hardware: iPhone 6 Add it to your home screen with safari browser and then open it from home screen.
010
Roomies
LAUNCH PROTOTYPE
Information Architecture
First-time users only
My Chores
Introduction
Chores List
To-Do
Chores to be claimed
Done
Add chores
Personal Progress
Default choices Add a cutome chore
Sign Up
Home Profile
Progress Progress infographics of each members
Details of each home member’s progress
Settings Edit personal profile
011
Edit home profile
Roomies
Home
Schedule Your
Make Your
LET’S GET STA RT ED
Houseworks
Chores Assignment
Fast and Simple
Fair and Efficient
Three steps to get your house chores organized.
Proof of Concept
Task 1 - Create an account and connect with roommates
1 CREATE ACCOUNT WITH FB
012 slide left
slide left
slide left
2
click go
LOG IN
Set up your chores list from default selections. Each home members can claim the chores from the list.
Finish the chores to get the points and complete the progress bar each week/mon.
3
CHO R ES S CHE D U L E
GO !
HOME
INTRODUCTION
HOME: Users can click on the LOG
How to use the application
IN button or slide left to see more information.
User clicks on the "GO" button to start the applicaiton
Roomies
ㄋ S ET UP HOM ㄍ E PROFILE
Task 1 - Create an account and get connected with roommates
First-time User - A In the first scenario, no one in the user’s household has used the application before.
LET’S GET STARTED 2
1
LET’S GET STARTED 3
1
YOUR ACCOUNT
2
LE T ’S GE T STA RT E D 3
1
3
6 16 HO M E Add a home member
Add a home member Enter account name or e-mail to search
Password click button
JOIN
click create
3
GET CONNECT ED
Name of Your Home
Email or Phone
2
1
GET CONNECTED
WHERE YOU BELONG ＷㄊWelcome! Please join a home profile or create a new one.
SIGN UP W ITH FB
2
LE T ’S GE T STARTED
Enter account name or e-mail to search input info
013
Chelsea C. chelseac729@gmail.com click Done
nancymail@gmail.com
Micky H. mickyemai@gmail.com
CREATE DONE
SIGN UP
CREATE HOME PROFILE
Users can sign up with her Facebook
After creating a new Home Profile User A can invite her roommates to joinㄡ ㄡ .
account.
DONE
Roomies
Nancy K.
Task 1 - Create an account and get connected with roommates
First-time User - B
First-time User - C
User B's roommate has used the application and created a home profile.
User C's roommate has used the application and sent an invitation to the user.
1
2
LET’S GET STARTED 3
GET CO NNECTED Name of Your Home
2
1
GET CONNECTED
LET’S GET STARTED 3
2
1
3
YOU’VE GOT INVITED You’ve been invited from the following
616
Home Profile. Please confirm and join.
616 HOME
616 HOME
014
MEMBERS MEMBERS
616 SUTTER
Chelsea C. chelseac729@gmail.com
MEMBERS
616 HOUSE
Nancy K. nancymail@gmail.com
MEMBERS
Micky H. mickyemai@gmail.com
JOIN
JOIN
SKIP STEPS WHEN USERS GET INVITATIONS User A invites her roommates to download the application and join her Home Profile. When her roommates start to use Roomies, they can join her Home Profile directly, without setting up a new one.
Roomies
LET’S GET STARTED
L ET ’ S GET STA RT E D 2
CHO RES L I ST
SORT BY
3
SPACE Let’s
SORT BY
sPOINTS t a r t w itTIME h
SPACE
a d d ing c h o r e s t o t h e
TH E C HO R E S S C H E DU LE
ADD NEW CHORE
Ooops! You currently have no c h o r e s l is t ! chores on the list.
DIFFICULTY
TIME
Ooops! You currently have no chores on the list.
Take out garbage KITCHEN / 7 Days
Add chores to the chores list ㄊㄟwith your roomies
Shop Groceries KITCHEN / 7 Days
Claim the chores you’d like from your to-do list
click "Add Chores"
click screen
click
Water Plants LIVING ROOM / 5 Days
AD D A CUSTOM CH ORE
Finish the chores and complete the progress every month
D O NE
INTRODUCTION
ADD CHORES TO THE LIST
After a user sets up her account and gets connected witht her roommates they
Users can choose from the default
can set up their first chores list.
chores categorized by space or add a custom chore.
015
Roomies
1
C HO R E S L I ST
Proof of Concept
Task 2 - Set up the chores list
Task 2 - Set up the chores list
ADD A N E W C HOR E
A DD A N E W C HO R E Icon
A DD A NEW CHORE
I co n
I co n
Where C h o os e f ro m l i st
Where C h o os e f ro m l i st
Where C h o os e f ro m l i st
W h at Edi t t h e ti tl e of th e ch o r e
W h at Ed i t t h e t i t l e of t h e c h o r e
W h at Ed i t t h e t i t l e of t h e c hore
R e p e at
R e p e at
R e p e at
W e e kly
W e e k ly
Da i ly
Di f f i c u lty
3 Days
3
5 Days
5
Description Edi t t h e d eta i l s of th e ch o r e
W e e k ly
3
M o nt h ly
1
N o R e p e at
0
SAV E T H E CH O R E
SAV E THE C HO R E
Di f f i c u lty
SAV E THE C HORE
MORE
ADD A CUSTOM CHORE Users can add a custom chore. These screenshots show the custom chore form.
Choose an icon.
Decide if this will be a recurring chore and set the frequency.
016
Roomies
Ico n
A DD A NEW CHO RE
Set up the difficulty of the chore.
CHOR CHORES ES LIST LIST
SORT BY SPACE
CHOR ES LIST
SORT BY DIFFICULTY
TIME
SPACE
Take out garbage
SORT BY DIFFICULTY
TIME
SPACE
Take out garbage
TIME
Take out garbage
Do you want toLeft add this KITCHEN / 2 Days
KITCHEN / 2 Days Left
POINTS
KITCHEN / 2 Days Left
chore (one-time only) to your list ? Shopto-do Groceries
Shop Groceries
Shop Groceries
KITCHEN / 2 Days Left
KITCHEN / 2 Days Left
KITCHEN / 2 Days Left
Wash Dishes
Wash Dishes
Wash Dishes
KITCHEN / 1 Days Left
KITCHEN / 1 Days Left
KITCHEN / 1 Days Left
M Y C HO RES
click on "+"
Clean Toilet BATHROOM / 6 Days Left
click "YES"
Clean Toilet Take out garbage BATHROOM / 6 Days Left
KITCHEN / 2 Days Left
"MY CHORES"
Clean Toilet C HO RES BATH L IST ROOM / 6 Days Left
Clean Bathtub
Clean Bathtub
Clean Bathtub
BATHROOM / 15 Days Left
BATHROOM / 15 Days Left
BATH ROOM / 15 Days Left
CA N CE L
Water Plants LIVING ROOM / 5 Days Left
12 MORE
Water Plants
CLAIM A CHORE After setting up the Chore list
P RO G RESS
Water Plants
LIVING ROOMYES / 5 Days Left
12 MORE
LIVING ROOM / 5 Days Left
SETTIN G S
12 MORE
MENU User clicks on the "YES" button.
017
After claiming a chore, the user can
together, individual users can click
go to the MY CHORES view to see her
on the "+" button to claim a chore.
to-do list.
Roomies
C HORES LI ST
Proof of Concept
Task 3 - Claim / finish a chore and check progress
Task 3 - Claim / Finish a Ｃ C hore and Check Process
M Y C H O R ES
MY C HOR ES
SORT BY
SORT BY DIFFICULTY
TIME
SPACE
TO DO
KITCHEN 2 Days left
BATHROOM 2 Days left
DIFFICULTY
TO DO
LIVING ROOM 4 Days left
BATHROOM 2 Days left
LIVING ROOM 4 Days left
7 MORE
KITCHEN
BATHROOM
P RO G R ESS
018 7 MORE
DONE
drag
TIME
DONE
KITCHEN 2 Days left
KITCHEN
BATHROOM
PROGRESS
COMPLETE A CHORE When the user completes a chore, she can drag the chore from the “To-Do” to the “Done” area of the "MY CHORES" screen The progress bar will update on this page.
Roomies
SPACE
Task 3 - Claim / Finish a  C hore and Check Process
PPRO ROG GR RES ESSS
P RO G R ES S
Aug. 3-9
Aug. 3-9
CHELS EA C.
C H ELSEA C . 9
15
DETAILS DETAILS MY CHORES
AMY L. DETAILS
DONE
TO DO
Take out garbage
019
KITCHEN
M I CK Y H .
Wash Dishes KITCHEN
DETAILS
Water Plants PROGRESS
N A N CY K .
LIVING ROOM / 5 Days Left
DETAILS
A MY L. SE TTINGS
MIC K Y H .
Check Progress Users can also check up on anyone in the same shared home profile. This creates accountability and friendly competition. The progress bar will automatically refresh after a certain period of time. The duration can be modified under settings.
Roomies
CHORES LIST
Task 4 - Settings
SETTINGS
SETTINGS
SETTINGS
Personal Settings Chelsea C
NAME
Home Profile NAME 616 HOME
Progress Notifications When someone completes their progress.
P ER S O N A L S ET T I N G S MY CHORES
ㄏP rogress ㄏRefresh Cycle Weekely
New Chores Notifications When someone adds a new chores
020
ㄏP rogress ㄏM ax Amount 15
Reminder CHORES LIST
of the chores on my to-do list.
MEMBERS
Progress Notifications When one of the members didn’t finish their PROGRESS
H O M E P RO F I L E
progress by the end of the week/month.
LOG OUT SE TTINGS
Notifications Users will be able to set notifications when: 1. someone completes her progress 2. someone adds a new chore 3. there's only one day left to finish one of the chores on her to-do list 4. one of the members didn't finish his progress by the end of the cycle
Roomies
When there’s only one day left to finish one
Strategic Process
021
Roomies
03.
Strategic Process - Thesis Ideas Survey
%
60
Gender
18-25
26-35
M
1. Roommates App 38 people preferred An app that can be used between roommates. It would calculate the
F
Out of 48 Responses
%
50 % 50 %
transactions between roommates like how much roommates owe each other every month. Users can plan schedules and get alerts when visitors are coming in advance. 2. Lost and Found in San Francisco 29 people preferred
46 %
A website with a mobile version that users who live in San Francisco and bay
Research
79
Age
area can share their lost and found objects (e.g., stuff, pet, or person) .
Pre
fer
red
3. Taiwanese Wedding Traditions 24 people preferred
022
wedding in the 80s. The website will have some interactive contents to lead users go through the whole wedding ceremony.
Dis
4. Learning Zhuyin 24 people preferred
like
Zhuyin is a phonetic system for transcribing Mandarin. People who want to
d
learn how to speak in Chinese usually start with leaning Pinyin or Zhuyin system. This is a website that teaching people the Zhuyin system.
Top Five Ideas 1
2
3
4
5
for My Thesis Project
5. History of Typography 22 people preferred An interactive website or an e-book that teachs users the basic knowledge of the history of typography.
Source: docs.google.com/forms/d/1mFL8PmFrd0DUCNSAXPTwgxCP_u8sQWb4KaqhZdNyhmk/viewform
Roomies
A website introducing the Taiwanese wedding traditions through my parent's
Strategic Process - Research Population structure of people who live with roommates - 2010 Category: Nonfamily households - Nonrelatives present
In thousands (18,263,000). As the US census captures it, roommates fall under the category of “non family households� Source: U.S. Census Bureau, "America's Families and Living Arrangements:2010, Table A2 Family Status and Household Relationship of People 15 Years and Over.
Research
Female
Age Range 15-24 25-44 45-64 65 and over
URL: www.census.gov/compendia/statab/2012/tables/12s0071.pdf www.quora.com/How-many-people-live-with-roommates-in-the-US
023
Roomies
Male
PLATFORM
FEATURES
Zenrow By Zenrow, INC
Smartphones (iPhone)
• Calculates bills and rent
/ Website
• Shows how much each roommate has overpaid or underpaid
TARGET AUDIENCE
Price: Free
Language: English
Size: 7.9 MB
Seller: ZENROW, INC.
People who live with
Version: 2.0.1
Category: Productivity
roommates
• Ability to set up a home base profile • Provides a chore list
Competitive Analysis
Competitive Analysis - Zenrow
024
• Provides both web and app versions • Connects to Facebook and PayPal • Provides timely notifications
Cons • Icons are difficult to recognize • Limited icon choices • Cannot delete existing bills or chores • Things on the to-do list can only be assigned, not claimed • Cannot specify how expenses should be split (website version)
Roomies
Pros
PLATFORM
FEATURES
Roommat.es By Roommat.es
Smartphones (iPhone)
• Calculates bills and rent
/ Website
• Displays how much each roommate has overpaid / underpaid the rent and bills
TARGET AUDIENCE
Price: Free
Language: English, Spanish
Size: 5.5 MB
Seller: Roommat.es Inc
People who live with
Version: 1.2
Category: Lifestyle
roommates
• Ability to set up a home base profile • Provides a to-do and shopping list (independent from the chores section) and a household rules agreement
Competitive Analysis
Competitive Analysis - Roommat.es
025 • Provides both web and app versions • Connects to users’ e-mail boxes (alerts, account) • Clearly designed user interface, beautiful texture • Highly integrated features
Cons • Activity feeds are not linked • Things on the to-do list cannot be assigned or be claimed • Doesn’t show who did the chores on the to-do list and the shopping list • The product description mentioned there’s a calendar but can’t find it • Confirmation email information is not clear (The title and content of the e-mail only shows “confirmation email”) • Personal profile cannot be edited ( the web page exists but not working) • Cannot specify an expense
Roomies
Pros
PLATFORM
FEATURES
Chorma for Chores By Stephen Bennett
Smartphones (iPhone)
• Ability to organize a group activity • Provides a house work list, users can edit the details of house works and information of house members.
TARGET AUDIENCE
Price: Free
Language: English
Size: 4.3 MB
Seller: Stephen Bennett
People who live with
Version: 1.2.5
Category: Productivity
roommates / Families
• Provides claiming and rewards systems
Competitive Analysis
Competitive Analysis - Chorma
026 • Effective chores assignment system • Clear forms • Use icons to display status (to-do, claimed, and unclaimed) • The rewards system can encourage users to do their chores
Cons • Cannot set up due dates for chores • Cannot set up repeat dates for chores • No specific use for the reward points
Visaual Design The interface design is simple, clear and easy to use. The icons on the menu show the latest activities of other users. However, some icons are confusing.
Roomies
Pros
PLATFORM
FEATURES
Chore Pad By Nannek
Smartphones (iPhone) / iPad / Website
Features • Provides a chores list that parents can edit the details of each chore
Price: Free
Language: English
Size: 9.0 MB
Seller: Kevin BROWN
Version: 4.1.2
Category: Productivity
TARGET AUDIENCE Parents and their children
• Both parents and children can follow the chores list easily • Provides rewards and punishement systems
Competitive Analysis
Competitive Analysis - Chore Pad
027 • Effective household chores assignment and reward systems • Clear forms • Use icons to display users' status
Cons • The house chores and daily routines are mixed together • The interface design of the parents' interface is confusing with all the colorful icons and small texts
Visual Design Vivid colors and clear layouts but can be more clear and simple. The choice of typefaces and icons can be improved.
Roomies
Pros
PLATFORM
FEATURES
ChoreMonster / Picker By ChoreMonster
Smartphones (iPhone) / iPad / Website
Features • Provides a chores list that parents can edit the details and instructions of each chores
Price: Free
Language: 27 languages
Size: 19.9 MB
Seller: ChoreMonster
Version: 1.2.3
Category: Lifestyle
TARGET AUDIENCE Parents and their children
• Provides claiming and rewarding systems • Let children "keep monsters" when they get enough points by doing house chores
Competitive Analysis
Competitive Analysis 5 - ChoreMonster
028 • Very nice graphic illustrations and UI • Clear forms, easy to use • Interesting rewarding system • Provides different interfaces/account types for parents and children • Provides another app (Chore Monster Picker) for children to choose their chores
Cons • Parents cannot do chores with children • Reward points information is not on the list
Visual Design Great graphic and UI design. Nice choices of typefaces and colors. The characteristics of the monsters are creative and interesting.
Roomies
Pros
Blank = Not Provided
Comparison Categories Platform
Features Home Profile
Zenrow
Roommat.es
Chorma
Smartphone (iPhone)
Smartphone (iPhone)
Smartphone
Website
Website
(iPhone)
Chore Pad
Doesn't Meet
Exceeds
ChoreMonster
Roomies
Smartphone (iPhone)
Smartphone (iPhone)
Smartphone
iPad, Website
iPad (Picker), Website
(iPhone)
Competitive Analysis Matrix
Competitive Analysis Matrix
Personal Profile Due Date Settings
029
Rewarding System Household Rules Visual Design Layout Typography Graphics Readability
Roomies
Chore List
Unique Positioning Statement
Unique Positioning Statement
Most of the apps built for roommates focus on calculating rent and bills. For example, the roommat. es and Zenrow apps. Even though these apps also provide features to help users arrange their housework, problems occurred when I tried to use these apps in real life. The app does not show who did the chores or the shopping list cannot be edited.
The unique value proposition of my thesis project
030
The other apps that can help roommates arrange
people live in an organized and peace environment
household chores are mostly build for parents and
with their roommates. Users can plan housework
children. These apps, such as Chore Monster and
schedules together. Instead of developing the app
Chore Pad, use rewards and claiming systems that
for parents and children, Roomies users can have an
can only be edited by parents.
efficient communication tool to talk as equals with their roommates or housemates.
Roomies
relies on its ability to provide complete features to help
Inspiration- Google Calendar
PLATFORM Google Calendar compatible with all of your devices
Price: Free
Category: Productivity
Size: 2.2 MB
Updated: August 1, 2013
Inspiration
By Google Inc.
Version: 201306302
031
visual design: layouts, color choices, information hierachy, and icons • Calendar, event, alarm (repeat days, time settings), and task set up page and process • Settings menu and personal profile requirement information
Roomies
• Ispired by the clean and clear
Inspiration- Google Calendar
PLATFORM
FEATURES
Taasky Smartphones (iPhone) / iPad / Website
Features • focus on priority task • editable colored lists
Price: $1.99
Language: English
Size: 6.8 MB
Seller: CLEEVIO s.r.o.© 2013 CLEEVIO s.r.o.
Version: 1.4.1
Category: Productivity
• using the app is very intuitive and simple • beautiful award-winning design • new intelligent reminder
Inspiration
By Cleevio s.r.o.
• synchronization with iCloud
032
visual design: layouts, color choices, information hierachy, and icons • Inspired the left slide panel menu • Inspired user instruction when first open the application
Roomies
• Ispired by the clean and clear
Roomies
Mind Mapping
Mind Mapping
033
Roomies
Mind Mapping
Content Map
034
Key Partners -Roommates / Housemates -House/apartment owner -Grocery stores
Key Activities
Value Propositions
Customer Relationships
Customer Segments
-Plan/check the chores schedule
-Mobile
-Co-creatiors
-People who live with
-Send/get alerts when the users
-Ease of use
-Friends
roommates or housemates
need to do house chores
-Visitors ( e.g., parents, boy/girl friends, friens...)
-Use the progress system to keep
-Neighbors
the motivation of doing chores
-Pets
-Roommates / Housemates
-Solves the housohold work issues
-People who live with families -People who share office
-Solves sharing public living
places and cleaning works
spaces within a group of people living in a home
Business Model
Business Model
035
when talking about roommate
Key Resources
problems
Channels
-Smartphones (iPhones)
-App store
-System database
-Personal website
-Users / apartments / houses
-Facebook / Twitter /
-Computers / Tablets
Other social networking sites
Cost Structure -The cost of paying for the database -The cost of the equipments for developing and mataining the app such as computers -The cost of human resource to develope and matain the app
Revenue Streams -Help users living harmiously with roommates and organized -Get to know roommates/housemates more and become friends -Good App store reviews
Roomies
-Avoids awkward conversations
Communication Depress Anger
Conflicts
Arguement
Move Out
Different living habits Find Place
Find roommates
Move in
Adjusting new lifestyle
Set housework schedule
Disagreement Unhappy experience
Inefficient communication
more and more little conflicts
Move out
Argument
How to get along with my new
What are the chores should put
Why is it always me doing the
I don’t inderstand why my roommates
Chloe thinks that their problems
rommates / housemates?
on the housework list? What /
chores? Are my roommates really
are so unresonable. We are goving
can never be solved and decided to
How to manage the chores? and
When / Where / How / With
doing their part of the housework?
each other hard time and can’t have
move out.
other things (e.g., individual’sa
who to finish the work on the list?
Chloe had a few talks to her
an efficient conversation to slove the
privavcy, noise control)?
What are the living rules should
roommates about their roommate
problem.
we follow?
problems but it’s not working.
- An easy and fast way to set up
-An efficient way to set up the
-A third-party platform to help
-A conmunication channel to help
-A clear moving out to do list (e.g.,
the roommate agreement can
house chores schedule together.
Chloe and her roommates to
Chloe and her roommates to solves
get the deposit back, transfer the
help Chloe and her roommates
-An effective system that can
communicate with each other
their problems and issues.
internet/PG&E accounts....etc.)
get to know each other and make
make sure everyone doing their
without awkward atmosphere.`
sure they are on the same page
own part of the house chores.
-A progress system to keep the
- A way to keep in touch with the
motivation of doing house chores.
ex-roommates.
of the details.
Excitement
Adjusting
Experience Map
Move In
036
Roomies
OPPORTUNITY
THINKING
DOING
STAGE
Experience Map
Primary Target Audience Young people with smartphones who live with roommates or housemates, 17-28 years old and living in a city. Might be students and might also work part time in low- to medium-income jobs.
Target Audience
Target Audience Description
Secondary Target Audience
037
Roomies
Families with smartphones who spend a lot of time together in any shared space (share household chores or office-cleaning work together)
Target Audience Persona - Chloe Biography Chloe was born in Sacramento, California. She is a freshman at San Francisco State University, majoring in psychology. Chloe moved to San Francisco with three friends: Cindy, Amy and Ashley. They decided to live together in the Sunset District. This is the first time Chloe has lived with other people outside of her family. All of them are very excited about their new college life.
Motivation:
Persona
She has known her roommates for years and they have been good friends since senior year of high school.
In the beginning, when Chloe and her friends moved to their apartment, they got along very well. However, inexperienced with household chores and they have too much stuff in their small space. Their dormitory room is usually full of trash and dirty clothes. Sometimes they even get warnings from the RA and have to spend their whole weekend cleaning up the room together. Frustrated with the messy environment, Chloe starts spending more and more of her personal time picking up after her roomies. She knows in her heart
Name: Chloe
Location: San Francisco
Age: 19
Occupation: Part-time barista, cashier / Café Francisco
Gender: Female
Student / San Francisco State University
these girls are her good friends, but as her resentment builds, she has a hard time thinking of them as anything other than a bunch of slobs. Chloe wants to talk to Cindy and Ashley again but she feels it will be an awkward conversation and she worries a conversation between roommates may not work for a long time. She needs an efficient way to
ＴTech Skill
038
communicate with her roommates, delegate responsibilities and keep their room clean
S o c i a l En g a g e m e nt
Goal: • Find a way to remind roommates to clean their apartment. • Get alerts when it's her turn to cook. • Solve the home cleaning issues. • Avoid awkward conversations when talking about roommate problems.
Roomies
Our room is a wreck! We need to pull it together!
as time went by, Chloe noticed that they had some roommate problems. Chloe and her roommates are
Proof of Concept
Target Audience Persona Story Board - Chloe
Chloe and her college roommates start
Chloe and her roommates plan their chores
school dorm. Their room is usually messy.
using Roomies.
schedule together and follow through with it.
Resentments begin to fade almost
Chloe can even set reminders to stay on track.
Now, Chloe and her roommates live in a
immediately.
She begins to feel proud that her living space
peaceful, clean environment.
039
Roomies
Chloe lives with four roommates in the
is organized and clean.
Target Audience Persona - Nelson
Biography Nelson is a Taiwanese international student. After he graduated from college, he came to the USA to study fine art at the Academy of Art University. He got an internship with a small startup company last summer. southern California. Although they have different cultural backgrounds and customs, their passion for art tied them together and made them feel like brothers. Nelson feels lucky he met a few good friends in this foreign country.
Motivation: and decided to share some of their food such as office snacks and coffee in order to reduce their individual expenses. However, without a plan, Nelson observes that their informal arrangement doesn’t always work
Name: Nelson
Location: San Francisco
out. A few weeks ago Nelson and Davis both bought milk on the same day but they couldn’t finish two cartons
Age: 24
Occupation: Part-time student
of milk before the expiration date. Nelson decided they need a more efficient communication channel to
Gender: Male
ＴTech Skill S o c i a l En g a g e m e nt
Academy of Art University
040
solve this problem.
Goal: • Arrange an office-cleaning schedule with other interns. • Keep the schedule as planned.
Roomies
What’s that smell? Sour milk again!
Nelson and the other interns take turns on office-cleaning duty. They also share space in the refrigerator
Persona
He shared an office space with his two coworkers, Mark and Davis. Mark is from China and Davis is from
Proof of Concept
Target Audience Persona Story Board - Nelson
Nelson noticed that he and his coworkers
Nelson’s coworker, Davis noticed the same
Nelson and Davis both buy a box of milk and
have run out of milk.
thing on the same day.
now they have two cartons! They cannot
041
Roomies
finish it before the due date.
Nelson and Davis start using the Roomies
They can arrange their grocery shopping
Nelson and Davis are satisfied to know they
app on their smartphones.
schedule together.
are reducing waste, reducing duplication of effort and saving money..
Target Audience Persona - Emily Biography Emily was born in Richmond, Virginia. She moved to New York 5 years ago to study accounting at NYU. After graduating, she started her first job as an international account specialist at Toyota Tsusho Company. She left the school dormitory and moved in to an apartment with her new roommate, Grace. Emily gets along They are both work and enjoy reading and cooking when they have free time.
Motivation:
Persona
with Grace very well. They share daily household items such as toilet paper and they do laundry together.
Emily and Grace share the bathroom, kitchen, and living room together but Grace has a few habits that start to annoy Emily. Grace usually has to stay at the office until very late and when she comes home she always watches TV in the living room to unwind. Emily likes to go to work early but she has trouble sleeping with the noise of the TV. Another thing that bothers Emily is that Grace's boyfriend sometimes comes to visit unannounced. Emily feels her privacy is violated when a male visitor comes to their apartment without notice. She wants to
Name: Emily
Location: San New York City
establish some rules about visitors and using shared spaces. She wants to talk about these roommate issues
Age: 26
Occupation: International account specialist
with Grace but can’t find a way to avoid it being awkward.
Gender: Female
Toyota Tsusho company
Goal: ＴTech Skill
• Set up house chores schedule of her apartment and keep the schedule as planned.
S o c i a l En g a g e m e nt
• Keep the peace relationship with her roommate
Roomies
It’s awkward when I talk to my roommate about our living issues.
042
04.
Roomies
UX Process
043
UX Process - User Testing
Time
Interview
Feb 03 - Feb 09, 2014
5
N/A
Card Sorting
Mar 10 - Mar 15, 2014
7
N/A, test with post-it
Low-Fidelity Paper Prototype
Apr 14 - Apr 20, 2014 May 05 - May 11, 2014
High-Fidelity Prototype - A
Apr 28 - May 04, 2014
5
Test through Invision URL: http://invis.io/EAGFN13C
High-Fidelity Prototype - B
Apr 28 - May 04, 2014
5
Test through Invision URL: http://invis.io/9BT3IQH7
High-Fidelity Prototype - C
Aug - Sep , 2014
5
N/A, test with PDF file
Prototype
Nov. 19 , 2014
2
URL: http:chelseachueh.com/THESIS note: AAU UX Club Event
7 + 3 ( 2 versions)
UX Process
Nu m be r of P e op p le
P rototype
Pha s e
N/A, test with pencil / paper
Roomies
044
Objectives
Steps
My objectives for usability testing were:
- Open the application, read the introduction
•
Validate the steps to set up the chores list
- Sign in with FB account
•
Validate the usability of the shared chores schedule
- Select “create a new home profile” instead of join an exist home profile, input information
•
A-B Test the different layouts of chores list and calendars
- Add chores from default choices
Target Users for this Test:
Time for expert to complete: 7-10 mins
Students - Seeking college / graduate students who live with roommates Young Adults - Seeking young adults (age 22-28) who live with roommates.
Instructions for participant
Students (Dorm) - Seeking students who live with roommates in school dormitory.
This is the first time you launch Roomies. Please sign-up with your Facebook account and
UX Process
UX Process - Testing Plan
045
Use cases (Scenario & Tasks)
profile, you can keep following the steps shown on the screen.
1.
User starts to use the application, set up chores
2.
User wants to claim a chore on the chores list
Task 2 – Claim A Chore
3.
User finishes a chore and check progress
Goals / Outcomes
Task 1 – Start and Set Up
-
User is able to find a chore on the Chores List
-
User adds (claims) a chore to their To-Do List
Goals / Outcomes -
User launches the application
Inputs
-
User sets up chores
- Users click on the + button
Inputs
Steps
- Users login with their FB accounts
- User goes to Chores List section - Clicks on the “+” button on the selected chore, and confirms
Roomies
connect with your roommates. After you set up your personal account and your home
Time for expert to complete: Within 3 mins
(After User finishes) Great, now you can check your progress and your roommates' progress. For the next step, what will you do to check your roommates' progress?
Instructions for participant Now you have set up the chores schedule. Please start using the schedule by claiming a
Task 3 – Finish A Chore & Check Progress Goals / Outcomes -
User is able to find a chore on the My Chores section
-
User claims a finished chore on My Chores List
-
User is able to check progress
Inputs
UX Process
chore on the chores list to add the chore to your to-do list.
046
Steps - User goes to My Chores section - User drags the finished chore drom the To-Do part to the Done part -Confirms - User goes to Progress section -Checks progress Time for expert to complete: Within 5 mins Instructions for participant Now, let's pretend that you have finished doing the chore “Take out the trash” in the kitchen. What will you do next?
Roomies
- Users drag the finished chore from the “To-Do” area to the “Done” area
UX / UI Process - Testing Results
My Roomie Book
My Roomie Book
Added a progress bar to let users YOUR HOME PROFILE Join a Home
1
2
track their progress W H ER E YOU B EL ON G
Welcme to join My Roomie Book! Please join an exist home profile or create a new one.
Ｗ ㄊ Welcome! Please join a home profile or create a new one.
JOIN
JOIN
Changed design style and refined the New Home Profile
tutorial. CREATE
3
CREATE
047
Roomies
L E T ’S GE T STA RT E D
UX Process
FINAL VERSION
PREVIOUS VERSIONS
UX / UI Process - Testing Results
Revised the naming conventions throughout the application and its pages
My Roomie Book 1
LET’S SET UP A CHORE SCHEDULE! Step 1 Add chores to your the schedule and set up the reward points for each chores.
Step 2 Add some rewards and redeem them after you get enough reward points.
2
T H E C HO R E S S C H E D U L E
Add chores to the chores list ㄊㄟwith your roomies
Added a progress bar to let users track their progress
AC COUN T
H O M E P RO F I L E
S CH ED U L E
1
2
3
Claim the chores you’d like to do your to-do list
Finish the chores and complete the progress every month
START
3
Added icons and links for each step, Users can skip steps if their roommates have set up a Home Profile
048
Roomies
L ET ’ S GET STA RT E D
UX Process
FINAL VERSION
PREVIOUS VERSION
UX / UI Process - Testing Results
UX Process
FINAL VERSION
L E T ’ S G E T STA RT E D
Create a Home Profile 2
1 Name of Your Home
WELCOME!
Happy Home Add a roommate
Here’s your new Home Profile!
616 HOME Enter account name or e-mail to search
Chloe Smith
chloe1257@gmail.com
MEMBERS
Chelsea C.
chelseac729@gmail.com
Emily Brown
MINDY W.
eb880329s@gmail.com
eb880329s@gmail.com
Amy Jones
MICKY H.
emaililala@gmail.com
Nancy Taylor
emaililala@gmail.com
DONE
3
emaililala@gmail.com
Nancy K.
emaililala@gmail.com
NEXT
Simplify the process of setting up a Home Profile. After the first user in
049
a household has created a Profile, her roommates can join it directly.
Roomies
PREVIOUS VERSIONS
UX / UI Process - Testing Results
Added the "Add Chores" button
C H O R ES L I ST SORT BY
chores don't have to be finished on
SPACE
J ul . 2013
a certain date. Sun
Mon
Tue
1 7
DIFFICULTY
Take out garbage KITCHEN / 2 Days Left
Wed
Thu
Fri
Sat
2
3
4
5
6
8
9
10
11
12
13
KITCHEN / 2 Days Left
14
15
16
17
18
19
20
Wash Dishes
21
22
23
24
25
26
27
28
29
30
31
Revised the style of the chores list.
Shop Groceries
BATHROOM / 6 Days Left
Clean Bathtub
Thr.
BATHROOM / 15 Days Left
Cooking lunch Claimed by AMY
Water Plants LIVING ROOM / 5 Days Left
Agreement My Chores
All Chores
Rewards
Statistics
Revised the style of the filter.
050
KITCHEN / 1 Days Left
Clean Toilet
Emptying trash
TIME
12 MORE
Roomies
My Roomie Book
Removed the calendar. Some
UX Process
FINAL VERSION
PREVIOUS VERSIONS
UX / UI Process - Testing Results FINAL VERSION
PREVIOUS VERSIONS
Revised the "My Chores" section
KITCHEN
into two parts: To-Do and Done.
OT H E R PLACES
HARD
MY CHORES L I V I N G RO O M
My Roomie Book
SORT BY
user's to-do chores and only one
SPACE
Sun
Mon
Tue
1 7
TIME
TO DO
Jul. 2013
click can input the finished chores.
DIFFICULTY
Wed
Thu
Fri
Sat
2
3
4
5
6
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
BAT H RO O M
Experimented the colore use for chores location and the difficulty of each chores.
KITCHEN 2 Days left
BATHROOM 2 Days left
7 MORE
DONE
Thr.
Experimented thestyle of the KITCHEN
BATHROOM
PRO G R ES S All Chores
Rewards
Statistics
051
LIVING ROOM 4 Days left
Emptying trash
Agreement My Chores
EASY
Roomies
Reduce the steps of checking
progress bar:
UX / UI Process - Testing Results PREVIOUS VERSIONS
FINAL VERSION
Revised the "Add Chores" process. Instead of clicking on the "add"
ADD NEW CHORE
Add Chores
button everytime when adding a
Add Chores
Categorized the default chores by
Add Rewards
location. Users can add custom
users to select all the default
chores if they cannot find a match
selections as a group. Cook Lunch M. T. W. T. F.
ADD
Take out garbage
ChoreTitle M. W. F.
5
KITCHEN / 7 Days
5
Shop Groceries
default setting for their chore.
052
KITCHEN / 7 Days
ChoreTitle M.
7
T YP E
Water Plants
ChoreTitle M.
LIVING ROOM / 5 Days
7
D AT E
PLACE
DONE
A D D A CU STO M CHO R E
WHO
DONE
Roomies
new chore, the new design allows
UX / UI Process - Testing Results FINAL VERSION
PREVIOUS VERSIONS
Revised the menu style and the
C H O R ES L IST
You have
102
My Roomie Book
points
Re w a rds
100
POINTS
250
POINTS
SPACE
Bills Subletting
DIFFICULTY
Waive $25 in Groceries
REDEEM
REDEEM
M e m be r s ’ R e wa rd s Waive $10 in Groceries
Guests Each roommate is responsible for the behavior of his or her guests. Guests shall not unreasonably disturb other roommates. Guests must stay in the bedroom of the roommate who invited them, unless all other roommates agree that the guest may stay in a shared area. Do guests need permission to stay overnight?
Kate / 2013.07.07
Yes
Yes
Rewards
Statistics
Agreement My Chores
053
Shop Groceries KITCHEN / 2 Days Left MY C H O R ES
Wash Dishes KITCHEN / 1 Days Left
Clean Toilet C H O R ES BATH L IST ROOM / 6 Days Left
Days
Clean Bathtub BATH ROOM / 15 Days Left PRO G R ESS
Water Plants LIVING ROOM / 5 Days Left
All Chores
Previous versions:
No
Are there a maximum number of days a guest may stay?
Agreement My Chores
TIME
Take out garbage KITCHEN / 2 Days Left
Waive $10 in Groceries
use of menu icons.
SORT BY
Roomies
My Roomie Book
All Chores
Rewards
Statistics SE TTIN G S
12 MORE
Previous versions:
UX Process - User Flow
Set up chores / rewards
Claim chores
Finish & get reward points
Accumulate reward points
Get rewards
UX Process
PREVIOUS VERSION
Roomies
054
FINAL VERSION
Set up chores list also set up the points (Difficulty) of each chores
Users claim chores from the chores list
Finish chores and get points to achieve personal monthly progress
In order to make the chores assignment fair
Loading Page
for each home profile member, combined the rewards system and the statistics section into the progress section.
Sign up
Creat a home profile
Sign in
Join a home profile
Agreement House Agreement
Add chores
Add rewards
My Chores
All Chores
Rewards
Details of chores
Details of chores
Redeem a reward
Add a chore
Add a reward
Statistics All members
Default / New
Roommates’ rewards list
Default / New
Settings
In the final version, in order to focus on solving the chores assignment problem between roommates, I
Edit my profile
deleted the roommate agreement section.
Edit home profile
Simplify the steps for first-time users of the application. Users can skip steps when
Users will directly go to My Chores section and see
Credits
they receive an invitation from a roommate.
their to-do list right after they open the application,.
055
Roomies
PREVIOUS VERSION
Information Architecture
UX process - Information Architecture
Time: Mar. 24- Mar. 30, 2014 Number of People: 7
Harmony* , Harmonious, Understanding, Communicate, Argument Preventer, Communication, Polite, Equality* , Equal, Relationship* , Share, Peace, Friendly, Clean, Ease to Use, Duty, Responsibility* , Responsible, Awareness, Organized, Chores* , Manage, Schedule* , Solve Problem, Reminder, Task, Scheduling, Satisfaction, Persuasive, Smart, Soft Skill, Rewarding* , Motivation, Push, Warm but Professional,
UX Process - Key Words
UX Process - Key Words
Force, Fairness
Roomies
056
05.
Roomies
Visual Ddesign Process
057
Mood Board
Visual Design Process - Mood Board
Roomies
058
PREVIOUS VERSION
Logo Ideas
Midpoint Selection
Logo Design Process
Visual Design Process - Logo (Midpoint version)
Roomies
059
My Roomie Book My
RoomieBook HOUSEWORK CALENDAR
Roomie Book
R
060
Roomies
FINAL VERSION
Logo Design Process
Visual Design Process - Logo
Visual Design Specification - Color
#000000 R: 0 G: 0 B: 0 M: 0 Y: 0 K: 100 C:0 Hue:0 Saturation:0 Lightness:0 #333132 R: 51 G: 49 B: 50 M: 0 Y: 0 K: 95 C:0 Hue: 316 Saturation: 3 Lightness:20
#333132 R: 65 G: 112 B: 155 M: 53 Y: 20 K: 2 C:80 Hue: 209 Saturation: 58 Lightness:61
#CEE3C9 R: 206 G: 227 B: 201 M: 0 Y: 27 K: 0 C:33 Hue: 108 Saturation: 11 Lightness: 89
#CEE3C9 R: 123 G: 195 B: 135 M: 1 Y: 62 K: 0 C: 54 Hue: 73 Saturation: -33 Lightness: 22
#00B49E R: 0 G: 180 B: 158 M: 0 Y: 49 K: 0 C:81 Hue: 173 Saturation: 100 Lightness: 71
#00B49E R: 238 G: 104 B: 105 M: 74 Y: 51 K: 0 C: 2 Hue: 61 Saturation: 52 Lightness: 26
#CE922C R: 206 G: 146 B: 44 M: 0 Y: 0 K: 100 C:0 Hue: 38 Saturation: 79 Lightness: 81
061
#CE922C R: 246 G: 217 B: 118 M: 12 Y: 65 K: 0 C: 4 Hue: 88 Saturation: 1 Lightness: 51
Roomies
R: 0 G: 0 B: 0 M: 0 Y: 0 K: 100 C:0 Hue:0 Saturation:0 Lightness:0
#000000
Visual Design
FINAL VERSION
PREVIOUS VERSION
Visual Design Specification - Type
RALEWAY ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
Visual Design
FINAL VERSION
PREVIOUS VERSION
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
062
NUNITO ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
THIRSTY ROUGH
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Roomies
abcdefghijklmnopqrstuvwxyz
MY CHORES
30px
DIFFICULTY
25px 10px 10px 25px
SORT BY SPACE
TIME
TO DO
30px 20px
Visual Design
Visual DesignSpecification - Design Guildlines Highlights
50px
063 BATHROOM 2 Days left
LIVING ROOM 4 Days left
7 MORE
DONE
40px 15px 10px 25px
80px
KITCHEN
BATHROOM
20px 15px 15 px 5px
PRO G R ES S
40px
50px
40px
Roomies
KITCHEN 2 Days left
15px
Roomies
Sketches
Sketches
064
Roomies
Sketches
Sketches
065
06.
Roomies
Technical Process
066
Roomies is a responsive web application optimized for iOS devices. The prototype is implemented with HTML, CSS and a customized jQuery Mobile framework.
Technology Requirements -HTML, CSS, Javascript, jQuery, -Illustrator, Photoshop, InDesign-Visual Design
My main focus has been the UX and UI design of my project. The
-After Effects – Guide/Concept video
prototype is not fully functional in some technical areas.
Technical Specifications
Technical Specifications
067
Roomies
HTML5 Desktop/Laptop iOS system
CSS Users
Visual Design Javascript Mobile Devices iOS system
Technical Specifications
The prototype of Roomies has use the following resources:
http://jquery.com/
jQuery Mobile 1.4.4 http://jquerymobile.com/
jQuery UI 1.11.1
jQuery Plugins OWL Carousel http://owlgraphic.com/owlcarousel/
MixItUp https://mixitup.kunkalabs.com/
http://jqueryui.com/
jQuery UI Touch Punch http://touchpunch.furf.com/
Animate CSS http://daneden.github.io/animate.css/
Fonts
068
Raleway , Nunito https://www.google.com/fonts
Roomies
jQuery 2.1.1
07. &
Conclusion
69
Roomies
Analysis
Conclusion
Roomies provides a communication channel among the roommates
Also, the final stage - implement the prototype- is a brand new
and housemates to solve the awkward issue about housework
challenge to me. Writing code is what I’ve never learned before
assignment. The goal of it’s design concept is to bring a convenience
I enter Web Design & New Media department. The more I know
for setting up a chore schedule efficiently and offer the detail
about coding the more innovative thinking I have when I do the
information of each roommates’ progress. Through the progress
UX/UI deisgn.
system, each home member has to finish the same amount of chores in a certain time period (weekly or monthly) to achieve a fair
I am greatly appreciated for the opportunity to work on the Roomies
and equal assignment.
app as my thesis project. It is a very precious experience to apply what I have learned for the past three years in Academy of Art
I enjoy the process to solve all the difficulty of each developing
University. Thank you for my patient instructors, classmates, all
stages. The biggest challenge I had while processing the project is
the testers of my user testing. I have learned how to develop an
searching for an effective solution of the roommate problems. It has
app from searching for inspirations of the thesis topics, concept
came a long way to finally get the idea of how people can actually
developing and refining, content structure building, wireframipg,
arranging their house works with their roommates and housemates.
user interface design, prototyping with different tools/languages, and experiment with various methods of user tastings.
Roomies
70
Portfolio
Portfolio
C H E L S E AC H U EH . C O M
C 17T T W @ G M A I L. C O M
LAUNCH PDF PORTFOLIO
Roomies
71
W N M _ 8 01 _ 0 6 :
Group Directed Study: User Experience Module ０８08 Mar. 24 - Mar. 30 / 2014
Module 12 Mar 24 - Mar 30 / 2014
Goals:
Goals:
• Present midterm presentation
• Understand the method of doing low fidelity usability test
• Discuss the changes that I have made of thesis project
• Low-fidelity (paper prototype usability test
• Understand Storyboarding & wireframing
DS Journal Highlights
Direct Study Journal Highlights
Is s u e s cov e r e d / R e s p o n s e f ro m a dv i s o r :
• Share inspirations with class
• Discuss the sketches of navigation elements/systems with class
• In-class activity: paper prototype usability test
• Share inspirations with class
• Discuss the purpose of each classmates project and understand the advantage of
• Change or delete the roommate agreement section of the project. The agreement
using pen and paper to do prototype usability test
is kind of serious and text basis, which is not fit the style of your thesis project. Another solution is make it fun.
G o a l s fo r n ex t w e e k :
• Using the test plan and the low-fidelity prototype of your project to test on at least G o a l s fo r n ex t w e e k :
3 test participants. Submit a report describing your testing and describing your
• Create storyboards for your thesis project; basing them on the task analysis you
findings
did in class. • Sketch at least 3 wireframes that depict the information layout of 3 views of your current user interface design. Use paper and pencil. • Find an inspiration to share with class
• Create high-fidelity prototype of your project for the next test
72
Roomies
Is s u e s cov e r e d / R e s p o n s e f ro m a dv i s o r :
W N M _ 8 01 _ 0 5 :
Group Directed Study: Visual Design Module 10 Jul. 17 - Jul. 19 / 2014
Module １２ 12 Jul 20 - Jul 23 / 2014
Goals:
Goals:
• Refine UX research
• Refine UX research
• UI elements (list/sketches)
• UI elements (list/sketches)
• Visual Design Mock-ups of key screens (refine)
• High-fidelity prototype (start making one)
Is s u e s cov e r e d / R e s p o n s e f ro m a dv i s o r : Is s u e s cov e r e d / R e s p o n s e f ro m a dv i s o r :
common to user greem> yellow > red. It’s better use the colors to present the
The style of the progress bar now looks better. Good Instruction page. On the add
difficulties than the spaces of the chores.
chores page, add some small arrows to show each chore can still be edited. Instead of using “Edit a new chore”, it's better say “add a custom chore” and make the button align + under other default chores.
“All Chores” or “Chores List” (confused if the list includes the chores that have been claimed by other users)
For now there’s no place the uses can set up the refresh cycle of the progress bar and the amount of the numbers they have to finish each month or week.
G o a l s fo r n ex t w e e k :
• Complete Directed Study Journal
G o a l s fo r n ex t w e e k :
• Refine UX research
• Complete Directed Study Journal
• Visual Design Mock-ups of key screens (refine)
• Refine UX research • Visual Design Mock-ups of key screens (refine)
Roomies
73
The colors are hard to tell it presents the difficulties of each chores. It’s more
The filter buttons are making more sense now. Should the All Chores list be called
DS Journal Highlights
Direct Study Journal Highlights
W N M _ 8 01 _ 2 6 :
Group Directed Study: Responsive Web Module 07 Oct 20. - Oct. 27 / 2014 Goals:
• Complete Directed Study Journal • Finish all pages • MIDTERM PRESENTAIOTN Is s u e s cov e r e d / R e s p o n s e f ro m a dv i s o r :
Have you used the javascript Date object? jQuery datepicker has some useful methods, but I’m not sure it’s really useful if you don’t want to show a calendar.
You have excellent taste in visual design and high skills with ux development. I did mention that the design feels very feminine. You can change your primary target
DS Journal Highlights
Direct Study Journal Highlights
audience or you could offer a different color scheme for different users, if you want a design challenge that might take you out of your comfort zone.
74
“How to solve the unfairness” — I think you said how to solve the unfair between
https://developer.apple.com/library/ios/documentation/AppleApplications/
roommates, which is a little awkward. You could say “How to solve conflicts among
Reference/SafariWebContent/ConfiguringWebApplications/
roommates” or “How to create a balance of responsibilities,” etc.
ConfiguringWebApplications.html
Competitive analysis – can you show us the names of these apps? The review
Do your notifications do anything? Or is it just simulated? Let’s talk about how
committee will be curious. I see them on the next page, but without the icons.
to customize your functionality a little more regarding time calculation and notifications via phonegap.
Sort by space will have Kitchen, Bathroom, etc? G o a l s fo r n ex t w e e k :
When you click on the details for the progress page, you probably don’t want the
• Complete Directed Study Journal
blue outline. Maybe this is from a plugin…?
• UX testing • Refine Design / Code
Roomies
Midterm Feedback:
Biblography
Roommat.es itunes.apple.com/us/app/roommat.es/id564544651?mt=8 Zenrow itunes.apple.com/us/app/zenrow/id556398155?mt=8 Chorma ForCchores itunes.apple.com/us/app/chorma-for-chores/id590954566?mt=8 ChoreMonster tunes.apple.com/us/app/choremonster/id532344230?mt=8 ChorePicker(ChoreMonster) itunes.apple.com/us/app/chorepicker/id667008125?mt=8 Taasky https://itunes.apple.com/us/app/taasky-beautiful-task-to-do/id720309412?mt=8
jQuery 2.1.1 http://jquery.com/
jQuery Mobile 1.4.4 http://jquerymobile.com/
jQuery UI 1.11.1 http://jqueryui.com/
jQuery UI Touch Punch
Biblography
Apps References
http://touchpunch.furf.com/
Animate CSS Online Biblography
75
http://daneden.github.io/animate.css/
Part of the moodboard pics https://pinterest.com iPhone template
www.mobiletuxedo.com/collection-of-iphone-5-psd-mockup-templates
jQuery Plugins
Noun Project
thenounproject.com
OWL Carousel
Attibutes to: Krisada, Yazmin Alanis, Marc Serre
http://owlgraphic.com/owlcarousel/
MixItUp https://mixitup.kunkalabs.com/
Fonts Raleway , Nunito https://www.google.com/fonts
Roomies
Persona photos www.flickr.com/photos/jasontravis/sets/72157603258446753
Roomies
76
We b De s i g n & N ew Med ia D epartm e nt
A c adem y o f A rt U niv e rsity