UX Design Notes: Requirement Analysis 1st Draft

Bel­low is the 1st draft of the Require­ment Analy­sis report.


Class

  • Lec­ture about use cases and user interviews
  • Pre­sen­ta­tion: Revery

Feed­back

  • Rules about com­par­a­tive analy­sis, why we should do it and inspi­ra­tions from it.

Due Next Week

  • Use Cases
  • User Inter­views

Visual Design Notes: Moodboards 2nd Draft

Mood­boards — 2nd Draft

Vintage

Vin­tage

Whimsical

Whim­si­cal

Minimalist

Min­i­mal­ist


Class Feed­back

  • Try dif­fer­ent type­faces for the logo on the mood­boards: Museo, Museo Sans, Klavika, Meta Black, Vester or Vestra.
  • Show some kind of grid lay­out on the min­i­mal­ist moodboard.
  • Add type sam­ples to the mood­board instead of pre­sent­ing them sep­a­rately. Include head­lings, body­text, field labels, fields, maybe a but­ton with type in it.

Due Next Week

  • 3rd Draft and Final Moodboards
  • 2–3 logo options fol­low­ing mood­board styles
  • Font List — Head­lines, Form Labels, and Body Copy
  • Color palettes

UX Design Notes: Executive Summary

Exec­u­tive Summary

Overview

Keyzz​.com will be a web appli­ca­tion to find and list short term rentals, as well as man­age the book­ing and main­te­nance of any prop­er­ties that are rented on a short term basis. Ini­tially the web­site will be avail­able for own­ers or man­agers of prop­er­ties located in Amsterdam.

My goal is to develop a user cen­tered inter­face that is as sim­ple and intu­itive as pos­si­ble. The design’s visual and copy will be affir­ma­tive and engag­ing in order to make the user feel con­fi­dent and com­fort­able with the ser­vice being provided.

The users who are look­ing to rent one of this prop­er­ties will be able to search for dif­fer­ent kinds of accom­mo­da­tions in Ams­ter­dam includ­ing apart­ments, stu­dios, house­boats, and guest houses. Amongst other things, they will be able to check the spe­cific fea­tures of each accom­mo­da­tion as well as its avail­abil­ity. They will be able to write reviews and include images or videos in those reviews.

Prop­erty own­ers and/or man­agers will have at their dis­posal a vari­ety of tools includ­ing the abil­ity to auto­mat­i­cally list their prop­er­ties in dif­fer­ent estab­lished list­ing web­sites such as Craigslist and Oodle. They will also have a mobile app where they can man­age new and exist­ing book­ings as well as cre­ate new main­te­nance issues and email pic­tures of main­te­nance prob­lems directly to their favorite main­te­nance ser­vice providers.

The back end struc­ture of the appli­ca­tion will allow future expan­sion to other cities and the cre­ation of other front end designs that can use the same database.

I intend to have the web appli­ca­tion live as well as a work­ing pro­to­type of the mobile appli­ca­tion by the end of the MFA pro­gram at the Acad­emy of Art Uni­ver­sity in the Fall of 2011.

 

Ini­tial Concepts

 

VRBO

VRBO stands for Vaca­tion Rental By Owner and it is a com­mon acronym used when refer­ring to prop­er­ties that can be rented for short peri­ods of time. Many times these prop­er­ties are not man­aged by their owner but by prop­erty man­agers. How­ever they are always cozily fur­nished which gives them a warm and homely feel­ing, as opposed to the corporate-like and cold expe­ri­ence that one usu­ally have when stay­ing at a hotel.

Vaca­tion rentals have an advan­tage over hotels if the traveler’s pri­or­i­ties are pri­vacy and cost per guest. It is spe­cially advan­ta­geous if the renter has an spe­cific neigh­bor­hood in mind.

 

Ams­ter­dam

Ams­ter­dam is one of the biggest trav­el­ing des­ti­na­tions in Europe and it attracts peo­ple of all ages and back­grounds. The hotel infra­struc­ture in the City Cen­tre is very lim­ited and the vaca­tion rental indus­try has devel­oped to sup­ply the demand for short term accom­mo­da­tions. The city was cho­sen as the start point for Keyzz​.com because of its lib­eral and sophis­ti­cated aura as well as its friend­li­ness towards the P2P ideology.

The web­site will focus on Ams­ter­dam at first but even­tu­ally it will be scaled up to enclose other cities, pos­si­bly San Francisco.

 

Peer to Peer (P2P)

Peer-to-peer (P2P) is a term that orig­i­nated from the pop­u­lar con­cept of peer-to-peer com­puter appli­ca­tion design, pop­u­lar­ized by the large dis­trib­uted file shar­ing sys­tems, such as Nap­ster, the first of its kind in the late 1990’s. The con­cept has inspired new struc­tures and philoso­phies in other areas of human inter­ac­tion. In this con­text it refers to the meme of egal­i­tar­ian social net­work­ing that is cur­rently emerg­ing through­out soci­ety, enabled by Inter­net technologies.

 

Tourist ver­sus Traveller

Whether you travel across the world, or to a part of a city that you never have vis­ited before, there’s some­thing impor­tant and mag­i­cal about find­ing new sit­u­a­tions and see­ing new sights. While travel is often an obser­va­tional expe­ri­ence, many trav­el­ers specif­i­cally travel to par­tic­i­pate in the action.

There’s def­i­nitely a dif­fer­ence between trav­el­ing and tour­ing. The for­mer requires an authen­tic inter­est in new things and an open­ness and will­ing­ness to expe­ri­ence them. The lat­ter is usu­ally lim­ited to “see­ing” the sights — often through the lens of a photo or video cam­era. Tourists tend to grav­i­tate to the famil­iar for meals and com­pan­ion­ship while trav­el­ers abhor both, instead going out of their way to meet new people.

 

Tar­get Audience

There are two pri­mary tar­get audiences:

  • Prop­erty Managers
  • VRBO Users

Prop­erty man­agers can be:

Prop­erty own­ers of one or more prop­er­ties who want to rent them out for short peri­ods of time and need an online venue to adver­tise the prop­er­ties’ avail­abil­ity and fea­tures, as well as man­age­ment tools. Prop­erty own­ers usu­ally man­age no more than 3 or 4 properties.

Pro­fes­sional prop­erty man­agers of short term rental accom­mo­da­tions who need a venue online to adver­tise the uni­ties’ fea­tures as well as effi­cient man­age­ment tools. Pro­fes­sional prop­erty man­agers can man­age many prop­er­ties at the same time.

VRBO users can be:

Pro­fes­sion­als trav­el­ing on busi­ness who need a place to stay for short peri­ods of time and con­sider value, pri­vacy, and loca­tion impor­tant req­ui­sites when mak­ing a deci­sion about where to stay.

Stu­dents or group of stu­dents from out of town who need a place to stay for short peri­ods of time and con­sider value and loca­tion impor­tant req­ui­sites when mak­ing a deci­sion about where to stay.

Tourists and trav­el­ers look­ing for enter­tain­ment and in need of a place to stay on a short term basis who con­sider pri­vacy, safety, and value impor­tant require­ments on an accom­mo­da­tion. Trav­el­ers are tourists who are inter­ested in more than just enter­tain­ment. They are seek­ing the whole expe­ri­ence of stay­ing at a real home in the city where they are vis­it­ing. This group is the pri­mary tar­get audi­ence and they con­sider pri­vacy, safety, and loca­tion impor­tant require­ments when mak­ing a deci­sion about where to stay.

 

User Cen­tered Design Process Status

 

Require­ments Analysis

Most of the Require­ment Analy­sis is done but need small adjustments.

 

Func­tional Analy­sis and Specification

User needs is almost com­plete but need small adjust­ments. There are three crit­i­cal usage sce­nar­ios ready but a few oth­ers need to be devel­oped. There are no task analy­sis done.

 

Con­cep­tual

There are a few mind maps done includ­ing the first draft of a site map. I intend to use these mind maps to help on the design of the final infor­ma­tion architecture.

 

Nav­i­ga­tion & Input/Output Mechanisms

Is not done and I have not started it yet.

 

Wire­frames

The first draft of the wire­frames for three user case sce­nar­ios were done for the mid­point pre­sen­ta­tion but they have to be improved and more wire­frames need to be done.

 

Mockups/Prototypes

There are no mock­ups or pro­to­types done.

 

Usabil­ity Testing

No form of usabil­ity test­ing was con­ducted so far other than the mid­point review where the pro­posal for this project was pre­sented and approved.

 

User Cen­tered Design Process Goals

 

I intend to develop the fol­low­ing deliv­er­ables by the end of this group directed study:

 

  • Tar­get audi­ence: personas
  • Fea­ture list & con­tent inventory
  • Sce­nar­ios & task inventory
  • Dataflow dia­grams
  • Task analy­sis
  • Infor­ma­tion archi­tec­ture includ­ing out­lines and wireframes.

 

My main goal is to have a work­ing pro­to­type con­tain­ing as many of the crit­i­cal user sce­nar­ios as pos­si­ble. That way I can con­duct heuris­tic eval­u­a­tions and user test­ings in order to refine and improve the over­all appli­ca­tion. After that I intend to use the result­ing wire­frames to refine the visual design (not in this directed study) and con­duct more user tests until the project is ready to be coded.

 


Class

  • Dis­cus­sion: Require­ments Analysis
  • User per­sonas

Feed­back

  • When writ­ing a doc­u­ment for usabil­ity pur­poses, always orga­nize your thought in bul­let points rather than in prose. That way who­ever reads it will be able to scan it faster and more efficiently.

Due Next Week

  • Require­ments Analy­sis Report

Visual Design Notes: Inspiration, Naming, Tag Line

15 Week Plan
Week 1

  • Intro­duc­tion
  • Dis­cus­sion: Project Scope

Week 2

  • 15 Week Plan
  • 20 Key­words
  • Inspi­ra­tional Links
  • 1st Draft of 3 Dis­tinct Mood­boards (images)
  • Name explo­ration
  • Tag line exploration

Week 3

  • 2nd Draft of 3 Dis­tinct Mood­boards (images + type + color palletes)
  • Make a deci­sion about name
  • Make a deci­sion about tagline
  • 10 inspi­ra­tional logos
  • Revised 15 Week Plan

Week 4

  • 3rd Draft and Final Moodboards
  • 2–3 logo options fol­low­ing mood­board styles
  • Font List — Head­lines, Form Labels, and Body Copy
  • Color palettes

Week 5

  • Final Logos and Tag Line
  • Revised Font List
  • Revised Color Palettes

Week 6

  • Rough Wire­frames of user sce­nar­ios: one web and one mobile.
  • Iden­tify Main ele­ments on web appli­ca­tion and on iphone appli­ca­tion that need spe­cial styling such as maps, form ele­ments, menus, but­tons, etc.
  • Ana­lyze nav­i­ga­tion options: icons vs text but­tons, drop down menu, etc.

Week 7

  • Revised wire­frames: grid decisions.
  • Report on hier­ar­chy of ele­ments and tasks, and how it is related to type, color choice, size and lay­out position.

Week 8

  • Web App Design 1st Draft

Week 9

  • Web App Design 2nd Draft

Week 10

  • Web App Design Devel­op­ment (more user tasks)

Week 11

  • Web App Design Fur­ther Devel­op­ment (even more user tasks)
  • 1st Draft of How it works’ sto­ry­board (I’m not sure if it will be an instruc­tional video or if it will be a screen with step by step instructions)
  • Fav­i­con Desing

Week 12

  • Web App Design Fur­ther Devel­op­ment (last user tasks)
  • 2nd Draft of How it works’ sto­ry­board (I’m not sure if it will be an instruc­tional video or if it will be a screen with step by step instructions)
  • 1st Draft of Style Guide
  • Begin plan­ning prototype(choose user tasks and soft­ware options for build­ing it)

Week 13

  • Web App Design Devel­op­ment (refinements)
  • Final comp of How it Works storyboard
  • 2nd Draft of Style Guide
  • Start build­ing prototype

Week 14

  • Web App Design Devel­op­ment (refinement)
  • Final How it Works motion graph­ics or sce­nario design.
  • Final Ver­sion of Style Guide
  • Present rough ver­sion of prototype

Week 15

  • Final Pre­sen­ta­tion of:
  • Web Appli­ca­tion Prototype
  • Web Appli­ca­tion Design
  • Style Guide
  • How it Works Motion Graph­ics or Step by Step Instructions.

10 Key­words for Project’s Look and Feel
What it is
Intu­itive, clear, focused, apple​.com, sophis­ti­cated, warm, invit­ing, whim­si­cal, vibrant, reliable.

What it is not
Clut­tered, chaotic, con­fus­ing, ama​zon​.com, yahoo​.com, elit­ist, too cool, bor­ing, for­mal, flaky.


Inspi­ra­tional links
Only In San Fran­cisco
I like the size of this map on the page.

Aflac
I like the design and look and feel of Aflac’s web­site. It’s casual, vibrant, whim­si­cal, and inviting.

Trip-Journal
Good brand­ing. Great vin­tage look and feel with­out being clut­tered and chaotic.

Digi­glass
Nice clean sophis­ti­cated look and feel.

MobileMe
MobileMe Log In page is a good exam­ple of a clean min­i­mal­ist web appli­ca­tion look and feel. The inte­rior of the appli­ca­tion is also a good exam­ple or min­i­mal­ist intu­itive look and feel.

Mint​.com
Great whim­si­cal look and feel. Great use of inter­ac­tive info­graph­ics, hier­ar­chy, not so great typog­ra­phy. Intu­itive and reliable.

Day­tum
Day­tum has a great look and feel. Great typog­ra­phy and color palette. Look and feel is on the cold and min­i­mal­ist side.

Awe­some Notes
Awe­some Note has a great design, a whim­si­cal and very intu­itive app interface.


Name explo­ration
keyzz​.com
key​to​let​.com
let​zzz​.com
keyzzzone​.com
doorzzz​.com
map​keyzzz​.com
rentspin​ner​.com
keyn​der​.com
let​men​tor​.com
let4all​.com
2let4all​.com
fin​d​an​dlet​.com
letnstay​.com


Tagline explo­ration

  • Find your next vaca­tion rental here.
  • All about vaca­tion rentals.
  • Vaca­tion rentals? We can help.

1st Draft of 3 Dis­tinct Mood­board Styles (images)

Whimsical

Whim­si­cal

 

Vintage

Vin­tage

Minimalist

Min­i­mal­ist

Minimalist II

Min­i­mal­ist II


Class Feed­back

  • Sug­gested Fonts: Din, Gotham, Meta, Optima, TheMix.
  • Min­i­mal­ist mood­board should have a clear grid.
  • Whim­si­cal mood­board is good.
  • Vin­tage is too clut­tered. I should add a vin­tage tex­ture and lay the images in an orga­nized way.
  • In gen­eral the mood­boards should not be just a col­lage of images but an mean­in­full orga­nized image.
  • Add the inspi­ra­tional logos to the mood­boards. Also add keyzz​.com logo to each mood­board try­ing to fol­low the style.

Due next week

  • 2nd Draft of 3 Dis­tinct Mood­boards (images + type + color palletes)
  • Make a deci­sion about name
  • Make a deci­sion about tagline
  • 10 inspi­ra­tional logos
  • Revised 15 Week Plan

UX Design Notes: Group Directed Studies with Tom Brinck

Class

  • Intro­duc­tion
  • Dis­cus­sion : What is usabil­ity?, Wish List

Due Next Week

  • Final Project Assess­ment Form
  • Project Exec­u­tive Summary
Wish List: 

  • On the map inter­face where the tourist can see the results of his search he can also type an address or the name of an area or attrac­tion and see the accom­mo­da­tions avail­able around that point. This is just another way to refine the search, along with price, num­ber of guests, ameni­ties, etc.
  • When the prop­erty man­ager adds a main­te­nance provider he can search on a map for providers around an address and asso­ciate that provider with cer­tain properties.
  • There will be another sec­tion of the web­site ded­i­cated to ser­vice providers. In that sec­tion ser­vice providers like plumbers, elec­tri­cians, clean­ing com­pa­nies, insur­ance bro­kers, etc, will be able to be sign into a net­work of providers so that when­ever a prop­erty man­ager searches for providers around a cer­tain prop­erty these providers will show first on the search results.
  • Providers who are part of the Keyzz​.com net­work will be able to com­mu­ni­cate with prop­erty man­agers through the web­site and also be able to send invoices and receive work orders through the website.
  • When a provider that is not part of the net­work is cho­sen he will auto­mat­i­cally receive an invi­ta­tion to cre­ate a provider pro­file on keyzz​.com and that way bet­ter com­mu­ni­cate with the prop­erty man­ager and prop­erty owner.
  • On the “add a prop­erty” wiz­ard, the length of the wiz­ard is a prob­lem. Pos­si­ble solu­tions include cut­ting down the steps of the wiz­ard and give an option to the user to con­tinue later. The same thing that LinkedIn does to its users. Cre­ate a “List­ing Com­plete­ness” sec­tion for each prop­erty listed where the sys­tem makes sug­ges­tions on what to do next and what to do to improve the list­ing and what is missing.
  • When a guest starts a search he can start adding prop­er­ties to the shop­ping cart… once he’s ready he presses a but­ton and the book­ing request form appears bel­low the shop­ping cart so the user can fill it out and send. After he sends the form keeps filled out so the user can adds more prop­er­ties and send again.
  • Cre­ate another wire­frame set where the user can select the cri­te­ria he wants to use to search a prop­erty. Some­thing like “What is impor­tant to you?” and “What else?”. The user will choose two dif­fer­ent cri­te­ria and input check in and check out dates and click on search. In the search results page the refine­ment search menu will be on the top hor­i­zon­tally and as the user chooses one cri­te­ria the search results refresh with­out reload­ing the page. Only when the user is sat­is­fied he can choose the view mode: list, gallery, map.
  • When look­ing at search results on a map, the user can click on a accom­mo­da­tion pin and a win­dow opens with the name of the accom­mo­da­tion, price per night, etc. and a pic­ture. When the user hov­ers over the image it auto­mat­i­cally starts a small slide show of the pic­tures of that property.