Bellow is a PDF file of what was presented in the second week of the Group Directed Study in User Experience Design (with instructor Tom Brinck).
Monthly Archives: September 2010
Visual Design Notes: Moodboards, Logo Options, Color Palettes, Font List
Moodboards — 3rd Draft
Logo Options
Color Palettes
Font List

Class Feedback
- Refine the logos in general.
- Explore the logo with the whole key.
- Add screenshots of full screens for inspiration on the moodboards.
Due Next Week
- Refine Logos
- Rough Wireframes for one use case (3 or 4 screens) in two directions.
UX Design Notes: Requirement Analysis 1st Draft
Bellow is the 1st draft of the Requirement Analysis report.
Class
- Lecture about use cases and user interviews
- Presentation: Revery
Feedback
- Rules about comparative analysis, why we should do it and inspirations from it.
Due Next Week
- Use Cases
- User Interviews
Visual Design Notes: Moodboards 2nd Draft
Moodboards — 2nd Draft
Class Feedback
- Try different typefaces for the logo on the moodboards: Museo, Museo Sans, Klavika, Meta Black, Vester or Vestra.
- Show some kind of grid layout on the minimalist moodboard.
- Add type samples to the moodboard instead of presenting them separately. Include headlings, bodytext, field labels, fields, maybe a button with type in it.
Due Next Week
- 3rd Draft and Final Moodboards
- 2–3 logo options following moodboard styles
- Font List — Headlines, Form Labels, and Body Copy
- Color palettes
UX Design Notes: Executive Summary
Executive Summary
Overview
Keyzz.com will be a web application to find and list short term rentals, as well as manage the booking and maintenance of any properties that are rented on a short term basis. Initially the website will be available for owners or managers of properties located in Amsterdam.
My goal is to develop a user centered interface that is as simple and intuitive as possible. The design’s visual and copy will be affirmative and engaging in order to make the user feel confident and comfortable with the service being provided.
The users who are looking to rent one of this properties will be able to search for different kinds of accommodations in Amsterdam including apartments, studios, houseboats, and guest houses. Amongst other things, they will be able to check the specific features of each accommodation as well as its availability. They will be able to write reviews and include images or videos in those reviews.
Property owners and/or managers will have at their disposal a variety of tools including the ability to automatically list their properties in different established listing websites such as Craigslist and Oodle. They will also have a mobile app where they can manage new and existing bookings as well as create new maintenance issues and email pictures of maintenance problems directly to their favorite maintenance service providers.
The back end structure of the application will allow future expansion to other cities and the creation of other front end designs that can use the same database.
I intend to have the web application live as well as a working prototype of the mobile application by the end of the MFA program at the Academy of Art University in the Fall of 2011.
Initial Concepts
VRBO
VRBO stands for Vacation Rental By Owner and it is a common acronym used when referring to properties that can be rented for short periods of time. Many times these properties are not managed by their owner but by property managers. However they are always cozily furnished which gives them a warm and homely feeling, as opposed to the corporate-like and cold experience that one usually have when staying at a hotel.
Vacation rentals have an advantage over hotels if the traveler’s priorities are privacy and cost per guest. It is specially advantageous if the renter has an specific neighborhood in mind.
Amsterdam
Amsterdam is one of the biggest traveling destinations in Europe and it attracts people of all ages and backgrounds. The hotel infrastructure in the City Centre is very limited and the vacation rental industry has developed to supply the demand for short term accommodations. The city was chosen as the start point for Keyzz.com because of its liberal and sophisticated aura as well as its friendliness towards the P2P ideology.
The website will focus on Amsterdam at first but eventually it will be scaled up to enclose other cities, possibly San Francisco.
Peer to Peer (P2P)
Peer-to-peer (P2P) is a term that originated from the popular concept of peer-to-peer computer application design, popularized by the large distributed file sharing systems, such as Napster, the first of its kind in the late 1990’s. The concept has inspired new structures and philosophies in other areas of human interaction. In this context it refers to the meme of egalitarian social networking that is currently emerging throughout society, enabled by Internet technologies.
Tourist versus Traveller
Whether you travel across the world, or to a part of a city that you never have visited before, there’s something important and magical about finding new situations and seeing new sights. While travel is often an observational experience, many travelers specifically travel to participate in the action.
There’s definitely a difference between traveling and touring. The former requires an authentic interest in new things and an openness and willingness to experience them. The latter is usually limited to “seeing” the sights — often through the lens of a photo or video camera. Tourists tend to gravitate to the familiar for meals and companionship while travelers abhor both, instead going out of their way to meet new people.
Target Audience
There are two primary target audiences:
- Property Managers
- VRBO Users
Property managers can be:
Property owners of one or more properties who want to rent them out for short periods of time and need an online venue to advertise the properties’ availability and features, as well as management tools. Property owners usually manage no more than 3 or 4 properties.
Professional property managers of short term rental accommodations who need a venue online to advertise the unities’ features as well as efficient management tools. Professional property managers can manage many properties at the same time.
VRBO users can be:
Professionals traveling on business who need a place to stay for short periods of time and consider value, privacy, and location important requisites when making a decision about where to stay.
Students or group of students from out of town who need a place to stay for short periods of time and consider value and location important requisites when making a decision about where to stay.
Tourists and travelers looking for entertainment and in need of a place to stay on a short term basis who consider privacy, safety, and value important requirements on an accommodation. Travelers are tourists who are interested in more than just entertainment. They are seeking the whole experience of staying at a real home in the city where they are visiting. This group is the primary target audience and they consider privacy, safety, and location important requirements when making a decision about where to stay.
User Centered Design Process Status
Requirements Analysis
Most of the Requirement Analysis is done but need small adjustments.
Functional Analysis and Specification
User needs is almost complete but need small adjustments. There are three critical usage scenarios ready but a few others need to be developed. There are no task analysis done.
Conceptual
There are a few mind maps done including the first draft of a site map. I intend to use these mind maps to help on the design of the final information architecture.
Navigation & Input/Output Mechanisms
Is not done and I have not started it yet.
Wireframes
The first draft of the wireframes for three user case scenarios were done for the midpoint presentation but they have to be improved and more wireframes need to be done.
Mockups/Prototypes
There are no mockups or prototypes done.
Usability Testing
No form of usability testing was conducted so far other than the midpoint review where the proposal for this project was presented and approved.
User Centered Design Process Goals
I intend to develop the following deliverables by the end of this group directed study:
- Target audience: personas
- Feature list & content inventory
- Scenarios & task inventory
- Dataflow diagrams
- Task analysis
- Information architecture including outlines and wireframes.
My main goal is to have a working prototype containing as many of the critical user scenarios as possible. That way I can conduct heuristic evaluations and user testings in order to refine and improve the overall application. After that I intend to use the resulting wireframes to refine the visual design (not in this directed study) and conduct more user tests until the project is ready to be coded.
Class
- Discussion: Requirements Analysis
- User personas
Feedback
- When writing a document for usability purposes, always organize your thought in bullet points rather than in prose. That way whoever reads it will be able to scan it faster and more efficiently.
Due Next Week
- Requirements Analysis Report
Visual Design Notes: Inspiration, Naming, Tag Line
15 Week Plan
Week 1
- Introduction
- Discussion: Project Scope
Week 2
- 15 Week Plan
- 20 Keywords
- Inspirational Links
- 1st Draft of 3 Distinct Moodboards (images)
- Name exploration
- Tag line exploration
Week 3
- 2nd Draft of 3 Distinct Moodboards (images + type + color palletes)
- Make a decision about name
- Make a decision about tagline
- 10 inspirational logos
- Revised 15 Week Plan
Week 4
- 3rd Draft and Final Moodboards
- 2–3 logo options following moodboard styles
- Font List — Headlines, Form Labels, and Body Copy
- Color palettes
Week 5
- Final Logos and Tag Line
- Revised Font List
- Revised Color Palettes
Week 6
- Rough Wireframes of user scenarios: one web and one mobile.
- Identify Main elements on web application and on iphone application that need special styling such as maps, form elements, menus, buttons, etc.
- Analyze navigation options: icons vs text buttons, drop down menu, etc.
Week 7
- Revised wireframes: grid decisions.
- Report on hierarchy of elements and tasks, and how it is related to type, color choice, size and layout position.
Week 8
- Web App Design 1st Draft
Week 9
- Web App Design 2nd Draft
Week 10
- Web App Design Development (more user tasks)
Week 11
- Web App Design Further Development (even more user tasks)
- 1st Draft of How it works’ storyboard (I’m not sure if it will be an instructional video or if it will be a screen with step by step instructions)
- Favicon Desing
Week 12
- Web App Design Further Development (last user tasks)
- 2nd Draft of How it works’ storyboard (I’m not sure if it will be an instructional video or if it will be a screen with step by step instructions)
- 1st Draft of Style Guide
- Begin planning prototype(choose user tasks and software options for building it)
Week 13
- Web App Design Development (refinements)
- Final comp of How it Works storyboard
- 2nd Draft of Style Guide
- Start building prototype
Week 14
- Web App Design Development (refinement)
- Final How it Works motion graphics or scenario design.
- Final Version of Style Guide
- Present rough version of prototype
Week 15
- Final Presentation of:
- Web Application Prototype
- Web Application Design
- Style Guide
- How it Works Motion Graphics or Step by Step Instructions.
10 Keywords for Project’s Look and Feel
What it is
Intuitive, clear, focused, apple.com, sophisticated, warm, inviting, whimsical, vibrant, reliable.
What it is not
Cluttered, chaotic, confusing, amazon.com, yahoo.com, elitist, too cool, boring, formal, flaky.
Inspirational links
Only In San Francisco
I like the size of this map on the page.
Aflac
I like the design and look and feel of Aflac’s website. It’s casual, vibrant, whimsical, and inviting.
Trip-Journal
Good branding. Great vintage look and feel without being cluttered and chaotic.
Digiglass
Nice clean sophisticated look and feel.
MobileMe
MobileMe Log In page is a good example of a clean minimalist web application look and feel. The interior of the application is also a good example or minimalist intuitive look and feel.
Mint.com
Great whimsical look and feel. Great use of interactive infographics, hierarchy, not so great typography. Intuitive and reliable.
Daytum
Daytum has a great look and feel. Great typography and color palette. Look and feel is on the cold and minimalist side.
Awesome Notes
Awesome Note has a great design, a whimsical and very intuitive app interface.
Name exploration
keyzz.com
keytolet.com
letzzz.com
keyzzzone.com
doorzzz.com
mapkeyzzz.com
rentspinner.com
keynder.com
letmentor.com
let4all.com
2let4all.com
findandlet.com
letnstay.com
Tagline exploration
- Find your next vacation rental here.
- All about vacation rentals.
- Vacation rentals? We can help.
1st Draft of 3 Distinct Moodboard Styles (images)
Class Feedback
- Suggested Fonts: Din, Gotham, Meta, Optima, TheMix.
- Minimalist moodboard should have a clear grid.
- Whimsical moodboard is good.
- Vintage is too cluttered. I should add a vintage texture and lay the images in an organized way.
- In general the moodboards should not be just a collage of images but an meaninfull organized image.
- Add the inspirational logos to the moodboards. Also add keyzz.com logo to each moodboard trying to follow the style.
Due next week
- 2nd Draft of 3 Distinct Moodboards (images + type + color palletes)
- Make a decision about name
- Make a decision about tagline
- 10 inspirational logos
- Revised 15 Week Plan
UX Design Notes: Group Directed Studies with Tom Brinck
Class
- Introduction
- Discussion : What is usability?, Wish List
Due Next Week
- Final Project Assessment Form
- Project Executive Summary
- On the map interface where the tourist can see the results of his search he can also type an address or the name of an area or attraction and see the accommodations available around that point. This is just another way to refine the search, along with price, number of guests, amenities, etc.
- When the property manager adds a maintenance provider he can search on a map for providers around an address and associate that provider with certain properties.
- There will be another section of the website dedicated to service providers. In that section service providers like plumbers, electricians, cleaning companies, insurance brokers, etc, will be able to be sign into a network of providers so that whenever a property manager searches for providers around a certain property these providers will show first on the search results.
- Providers who are part of the Keyzz.com network will be able to communicate with property managers through the website and also be able to send invoices and receive work orders through the website.
- When a provider that is not part of the network is chosen he will automatically receive an invitation to create a provider profile on keyzz.com and that way better communicate with the property manager and property owner.
- On the “add a property” wizard, the length of the wizard is a problem. Possible solutions include cutting down the steps of the wizard and give an option to the user to continue later. The same thing that LinkedIn does to its users. Create a “Listing Completeness” section for each property listed where the system makes suggestions on what to do next and what to do to improve the listing and what is missing.
- When a guest starts a search he can start adding properties to the shopping cart… once he’s ready he presses a button and the booking request form appears bellow the shopping cart so the user can fill it out and send. After he sends the form keeps filled out so the user can adds more properties and send again.
- Create another wireframe set where the user can select the criteria he wants to use to search a property. Something like “What is important to you?” and “What else?”. The user will choose two different criteria and input check in and check out dates and click on search. In the search results page the refinement search menu will be on the top horizontally and as the user chooses one criteria the search results refresh without reloading the page. Only when the user is satisfied he can choose the view mode: list, gallery, map.
- When looking at search results on a map, the user can click on a accommodation pin and a window opens with the name of the accommodation, price per night, etc. and a picture. When the user hovers over the image it automatically starts a small slide show of the pictures of that property.
Visual Design Notes: Group Direct Studies with Ryan Madeiros
Class
- Introduction
- Discussion: Project Scope
Due next week
- 15 Week Plan
- 20 Keywords
- Inspirational Links
- Name exploration
- Tag line exploration
- 1st Draft of 3 Distinct Moodboards (images)
Logo Lounge
READING NOW
Logo Lounge Series by Catharine Fishel & Bill Gardner















