Page 1

human factors design | user experience design user experience research | concept development cognitive psychology | industrial design s@designcannon.com + designcannon.com


Pool Cleaning Equipment

Ethnographic Analysis and Design

Biolab provides the swimming pool market with a wide variety of pool care equipment. From smart underwater vacuum cleaners to floating rubber duckies that distribute chlorine. They approached GTRI with the task of doing an extensive ethnography on the opening and closing of pools. The data from this research fed over 25 innovative concepts that were eventually broken down to 7 market ready designs. From ethnographic analysis through concept development and design this project covers a full and diverse design process.


12 Pools + 24 hours of Pool Cleaning

Data Analysis

User centered design focuses the design process on the immediate users of the product. In this case it was home owners, 12 of them across 3 states. In order to capture everything, from visual frustrations to unspoken product triumps it was necessary to video tape every second of the pool opening and cleaning process. Task Architect (shown opposite) was used to keep track of every tool used, procedure, question, comment, complaint, self made tools, design suggestions, design failures, etc. This was then used to produce 27 different concepts for review and redesign. The following represent two areas of focus, innovative hand tools and seasonal tool storage.


Chemical and Tool Storage

The ethnography uncovered a very dangerous and inefficient way of pool tool and chemical storage. From cardboard boxes to being left outside throughout the year poisonous chemicals were in the open and tools wore out rapidly. A central storage unit for everything was needed.

Long Handle Tool Storage Concepts


Final Concepts before Prototyping

This is an example of several concepts that went on to rapid prototyping and engineering. A curved pool pole for ease-of-brushing, tool and chemical cart, and various other brushes to aid in the cleaning of the pool.

tool storage unit secures to side of cart

Pool Poles : Current Design & New Design

long handlebar for pool hose storage

. battery powered pole attachment

large surface area extendable pole

waterproof chemical storage unit

separate and lockable dry storage

easy on/off button

chemical storage

soft rake for pool cover debris

rechargeable battery

deck / cover ` squeegee

Different Scrubbing / Cleaning Tool

ergonomic fit

power scrubbers

lockable wet storage


MUI & GUI Interface Design Georgia Tech Research Institute

Carbon Motors Corporation approached GTRI with a long list of user needs and requirements for their new purpose built police vehicle. Of these needs I was in charge of leading a 3 person design team through the design of a touchscreen navigation system layout in conjunction with the manual user interface inside the typical police cruiser. Balancing the usefulness of both the GUI and the MUI while integrating multiple systems into one was the main project objective. The process involved: User Experience Research and Analysis Visual Concept Generation and Brainstorming Usability Area Mapping MUI and GUI Importance Hierarchy Systems Integration Physical and Digital Design Prototype Fabrication Validation Testing and Observation

copyright : shelton davis 2010


MUI and GUI Interface Areas Mapping out the interior

Before we were able to dive into the user testing or interface design we needed to better understand the logical placement of interfaces in a police vehicle. Precident research was done on consumer vehicles as well as several different police department vehicle (layouts are always different) to determine typical placement of interfaces like radio, siren, laptop, and printer controls. These maps helped the design team determine where to start mocking up interface controls based on a needs heirarchy. For example, the most used interface in a police vehicle might be the siren controls. The frequency of use gives it ergonomic and visual priority over things like air conditioning controls or iPod jack. This data was then carried over into the human modeling phase to determine the minimum and maximum areas of the MUI and GUI interfaces.

copyright : shelton davis 2010


MUI & GUI Interface Design Georgia Tech Research Institute

In order to make the MUI and GUI system accessible and usable by the majority of police officers we needed to conduct user reach tests in a full size vehicle. Rather than inviting hundreds of officers into the lab we used 3D CAESAR models and a 95% representation of the officers and put them through a simulation. What resulted were a series of reach zone bubbles. From big Larry (6’6”) to petite Lucy (5’1”) we tested arm reach based on seat and steering wheel position. The overlap of these reach zones determined where items should be places. Extremes zones were avoided.

copyright : shelton davis 2010


$200,000 Foam Model

Prototyping the MUI and GUI concepts What is car design without extremely expensive prototypes? This prototype was shipped to us with none of the MUI attached or touchscreen interfaces embedded. The reach zone data helped us determine exactly where all MUI and GUI should be placed. Before carving into this giant piece of foam we laid out color paper models to help us create user scenarios, wireframes, and design templates. After all dimensions were calculated for the center console touchscreen, instruments cluster, and side screen manual button I began demolishing the model in order to make it a true working prototype. (Yes, the first chunk of foam taken out was scary.)

copyright : shelton davis 2010


Center Console Interface

Concept Generation from User Needs Based off of the Panasonic Toughbook’s interface design these mock-ups were created to reflect relevant information while keeping the needed controls within the reach of the officer. This visual design was eventually translated into a working model that could be augmented during testing. The interface’s black background and blue motif was used to reduce in cabin glare. Light issues did arise from the editable forms but these were usually completed or read when officer were stopped and not on surveillance night.

copyright : shelton davis 2010


copyright : shelton davis 2010


MUI & GUI Installed and Test Ready

Research + Industrial Design + Programming = Working Prototype After months of design iterations and back and forth negotiation with the inhouse development team we were finally able to get this working prototype up and running for a multiple precinct user test schedule. The durability of this prototype had to withstand officers hitting it with their gun, frustrated button pressing and the occasional knee to the monitor. In order to get it completely ready our team of destruction experts helped us through a brutal but necessary pilot testing. These images show exactly what the interior looked like to the police officer that was going through user testing. Lacking the bright lights and a driving simulator outside the front window, this was the final model.

copyright : shelton davis 2010


30 30

forward looking infrared main st.

LOJACK

123 Main St 500 ft total 22 mi

turn by turn directions with active compass

officer current speed

radar speed (blinks red when over the limit)

MUTE

67

MPH

proximity sensor / doors open / hood top compass?

main st.

123 Main St 500 ft total 22 mi

lIC PLT

30 30

main st.

license place recognition screen

GA

08 STATE

LOJACK

123 Main St 500 ft total 22 mi

main st.

123 Main St 500 ft total 22 mi

Heads-Up Display

08

All eyes on the road

STATE

Another special user interface was made to keep the officers eyes on the road. Through user testing and surveys we determined the information items that would benefit from a heads-up display. These included:

GA

123 Main St 500 ft total 22 mi

MPH

DISPATCH A B C 1 2 3 emergency message / dispatch caller identification

30

main st.

GA

Turn-by-turn mapping function

08 STATE

30

30 30 30 30

Current vehicle speed Radar speed Officer message Lights current activated Forward looking radar (FLIR)

GA

08

License plate recognition

STATE

System mute

GA

08 STATE

copyright : shelton davis 2010


D

9

1

BRAKE

3

10

0

2

0

160 180

E

F

A/T

All Digital Instrument Cluster

CHECK

Relevant driver information

BRAKE

= 0.5 inch

7

6

5

60

8

4

6

5

BRAKE

18 12

= 0.5 inch

3 2 1

8

1

4

E

F

180

A/T

120

P

r

n

160

0

180

F

60

TC off

3

A/T

100

Carbon Motors Instrument Cluster

6

1

7 0

80

TC

D

E

2

5

cruise control

140 Carbon Motors Instrument Cluster 0

4

As another changeable screen in the vehicle this instrument cluster would include things like prisoner lock down and firearm secure icons as well as a driver information center for immediately relevant vehicle information. This concept was delivered as another item that would tie into the heads-up display and center console touchscreen in order to deliver real time relevant information to the officer without having to break their concentration.

100

40

2

150

160

10

3 TC

80

60

20 2

TC

2

TC off

CHECK

3

= 0.5 inch

3

0

4

BRAKE

TC

D

0

7

cruise control

n

10 1

120

r

140 Carbon Motors Instrument Cluster

20

2

100

P

40

3

= 0.5 inch

80

40

cruise control

140

20

0

8

120

160

CHECK

A/T

60

5

40

6 7

20

0

80

100 120

CHECK

A/T

Carbon Motors Instrument Cluster 140 cruise control

copyright : shelton davis 2010


Smartphone Toucscreen Button Usability

Georgia Tech Masters Project

After working with ADA atandards for 3 years it came to my attention that there was a lack of graphic user interface standards for touchscreen interfaces. An initial search for navigation standards uncovered inconsistentent overlap between companies and handsets. The first approach to this project was to determine what basic manual user interfaces (MUI) and graphic user interfaces (GUI) worked for individuals with low vision. It was quickly discovered that creating a general understanding and research methodology to find out the best way to create touchscreen user interfaces for general users was necessary in order to set up further research into touchscreen usabiliy. This portfolio briefly explains touchscreen smartphone and precident research as well as basic design standards compiled from benchmark data, user research, analysis and basic guidelines.

copyright : shelton davis 2010


Precident Research

Checking out the competition Without attempting to reinvent the wheel, relevant MUI* and GUI* was analyzed to better understand the advantages and disadvantages of their design.This research covered different work environments, user bases, screen technologies and device sizes. From police laptops to pagers from the late 90’s, a visual SWOT* analysis was done to determine areas that could be adoped into a better touchscreen user interface system. This SWOT data was then compiled to form a research base for both user testing and formation of baseline design guidelines.

MUI: manual user interface GUI: graphic user interface SWOT: strengths, weaknesses, opportunities & threats copyright : shelton davis 2010


Shape

Size

Visual Texture

User Testing & Research

Shape, Size, Visual Texture and Color In order to better understand what touchscreen smartphone users gravitate towards regarding graphic user interface buttons a website was produced in order to replicate different icons on a consistent platform (iPhone). The objective was to find out how graphic affordances played a role in accessiblity and usability. It was discovered that rounded square icons present information best because they define button boundaries (Gestalt) and perceivably allow the user to make an off-center button press mistake. Blues and greens tend to be blend together causing confusion whereas red and yellow call the most attention for emergency purposes.

Color

copyright : shelton davis 2010


User Testing Results Main buttons and grid

The organization of a numerical phone pad turned out to be the best way to organize basic interface information on a touchscreen smartphone. User research showed that the ability to form mental models of onscreen information as well as ease of single hand use was necessary in order to create a easier to use graphic user interface. The 4 by 3 grid system only allows for 12 icons to be present at once allowing for less clutter and design overlap. With less icons to choose from, color, content, and image recognition mistakes will potentially decrease. Color, contrast, and icon shape also play a major role in usability. Contrast between icon and background are regularly achieved by current touchscreen smartphones but attention to color choice and representative graphic icons still need to tested for usability. User research showed that even the best designed icons fail to be understood by the end user. Black on white contrast makes icons ledgible but fails to differentiate between applications. Usage of color is necessary as a defferentiating element yet cannot be the only informational aspect of the icons design.

copyright : shelton davis 2010


User Testing + Precident Exploration Integration of MUI and GUI needs Precident research showed that a good GUI needs to coincide with a usable MUI. Additionally, visual and tactile affordances quickly became key issues during user testing. These issues beg the question whether smartphone form currently to matches consumer usability needs. Users Testing Feedback: “The phone is slippery and hard to hold in one hand.” “Activating the buttons is difficult to do with my thumb.” “I cannot feel which side is up.” “I keep pressing the on button but nothing happens. (She was pressing the AC jack dead space.)” The following images show an exploration into how a phone might ergonomically conform to the hand while guiding the user to the necessary buttons and onscreen information. The symbiosis of MUI and GUI can eventually aid in the use of onscreen information.

copyright : shelton davis 2010


Touchscreen Design Guidelines

Touchscreen Design Guidelines

Physical device Make the casing and screen appear durable Create a non slippery looking body Create tactile references to screen use (double for gripability)

Interface general Create a text to graphic heavy beginner menu interface Create a graphic to minimal text advanced menu interface Create a home screen navigation page that can be memorized and used without looking (3x4 is similar and known from prior objects like phones)

MUI and physical device properties

Shape Create a more ergonomic shape for touchscreen use Protect the screen by covering it or material choice Form Create form to reflect the frequently used applications (ie. game controller) Consider creating a clam shell design (something to protect the screen) Color Use colors that are consistent with the technology and trends (silver and black connotate high tech) Consider using the body of the device as another contrasting color to onscreen information Material Use casing materials that are durable Avoid casing materials that can be scratched easily or need covers Use a material that is easily cleanable or that doesn’t need to be cleaned

GUI and button development

Button size Create buttons / icons that are 44 pixels square or larger for main buttons

Button icon Create a stand alone icon that doesn’t depend on the color for identification Consider creating an icon with and without the text label Button navigation and activation Consider a 3 x 4 navigation screen for mental modeling purposes Create larger visual feedback to button activation Minimize lag time between button press and application launch

Button shape Create rounded square buttons if the device holds the same shape Create the interface buttons to match the shape of the device Clearly identified icon to button differentiation Button color Avoid using hot colors like red and yellow for non emergency functions Differentiate the greens and blues so they can be identified Don’t use color as the sole indicator of application Don’t overuse blues and greens for icons Attempt to use a combination of color and visual texture to differentiate similar shades

copyright : shelton davis 2010


vvv

Three Wheel Walker

Dignified Luxury

Dignified Luxury, is focused on making accessibility products look less medical and more personalized by incorporating user research into the creation of innovation design. The current project is the Concierge Walker, a 3-wheel rollator. Current rollator design is composed of tubular aluminum with high gloss paintand a very bland medical look and feel. It’s current looks still evokes a disabled, needy, and old feeling which doesn’t always reflect its users condition or state of mind. In order to better accomodate the end users physical needs while retaining an aesthetic appeal a complete frame redesign is needed. The goal: Create a rollator that is ergonomic, easy-to-use, and highly mobile.


vvv

Consumer Needs / Wants Stability & Comfort

Large wheels give the affordance of stable stance. Cantilevered frame gives it a lightweight look and feel for ease-of-mobility. Organic design provides a warmer aesthetic than the medical devices currently on the market. Rails, hooks, and open bar area allows user customization. Three wheel design in order to minimize size, weight and footprint.


Perspective View of Triangled Stance

This stance is the simplest form to spread the wheels out in order to create a cage that the user can walk inside. These are views of how this can be accomplished.

Tricycle and Beyond

A tricycles is similar in form and lends a different departure to this structure. These sketches explore how the rollator can be influenced by current transportation like the tricycle, bicycle and push scooter.

Build Sketches

The basic structure of this rollator is key to its overall look. The next step was to explore how is 3D structure could influence its look similar to the sketches. The first step was to build the users “box�. This was the place where all activity would take place, from walking to leaning in place.


Scale Models

The rollator needed to touch the ground in 3 places, front wheel and two side wheels. It also must have a weight support system to hold the user up that consisted of arm bars / rests and a connection to the bottom structure. Different iterations were done in order to find the needed human interface points.

vvv


Ethnographic Response Gardening Bucket

Research @ the Flower Show

Cultivate Plant Water Haul Gloves Muddy Attentive Patience Micromanage Fertilize and Relax with a glass of wine. 4 nurseries, an online survey, and countless gardening forums helped create the bucket for almost all small gardening needs.

Tool storage closet

The one failure, there isn’t a wine glass holder, sorry. Storage shed?

Shoe holder = tool holder

Ethnographic research at the farmers market


Market Benchmarking

Who is in the same the market? What are their strengths, weaknesses, opportunities or threats? How have they cornered a niche market? Part of background research this benchmarking uncovered a very small and simple market of manufactured tool systems. Through ethnographic research it was discovered that a good amount of repurposing of other storage / carriage devices were used to transport hand tools. The end concepts combined of already manufacured systems with consumer built solutions. It became a sort of mass manufacturable MacGyver gardening solution.

Quick market and innovations analysis

New idea concept sketches


Model of a roll-up concept. Individual storage units for the most used tools such as a spade and cultivator.

Final Prototype

In order to accommodate the largest amount of tools while creating secondary and tertiary uses the bucket with internal dividers was chosen as the best design. This design can: Sectional model exploring the capabilities of a bucket design and tool holding space. It was discovered through user research and that 5 tools at most need to be available for use:

Closed bucket with a tool inserted showing the space needed for multiple tool storage.

1. Gardening trowel (small shovel) 2. Cultivator 3. Pruning Sheers 4. Hoe / Rake 5. Weeding tool (often a screwdriver)

1. Hold up to 8 tools, a long handled pruner, and a rolled up knee pad. 2. Be used as a bucket separate from the tool holder. 3. Can be turned over and used as a stool. 4. Can be easily cleaned and stored.

Polysyrene skin

Prototype Build

Interior grid

Built as a full scale photography ready prototype a MDF and dowel frame was used to support the polystyrene shell and interior. The internal tool caddy (shown on previous page) was laser cut to fit snug in the internal cavity. The overall design is 15x13x17 (LxWxH).


Maximize Usability This gardening storage container’s mission is to fulfill two simple needs: Ease of Use and Maximum Carryable Storage Capacity

Details of the design: No close looped handles to allow secure movement from different angles and grips Simple combination of rear lip handle and bottom ridge to aid in pouring and carriage Large top opening for maximum storage Large tapered pouring mouth for precise and large quantity pours Rear to top molded swoosh that performs as a visual direction affordance and a larger manufacturing draft Can tools without taking up the up the bucket’s interior space


Cultivate Dig Seed Water Repeat


IDSA 24hr Design Charette To-go Food Containers

Chinese food boxes, 24hr diner styrofoam bowls, coffee shop cardboard cups, and fancy steak house aluminum foil swans. These are just a few of the to-go containers that are overused, unrecyclable, and only used once. A team of 11 took the design journey to come up with a system that solved this issue. From eating out at several restaurants to asking vendors to serve food in personal Tupperare many issues were uncovered. Ultimately an innovative pizza box prevailed.

2009 Atlanta IDSA Design Charette Winner


Too Much Pizza to Eat

How to eat what you have and store the rest Step 1 : Buy a pizza with friends Step 2 : Open the pizza and take in the aroma Step 3 : Tear of the top of the box at the perforation Step 4 : Tear the top of the box into 4 cardboard plates Step 5 : Continue tearing, you are not quite done Step 6 : Serve, eat, and enjoy Step 7 : Savor the fact that you are not holding the greesey slice in your hand Step 8 : Put the remainder of the pizza in the front of the box bottom Step 9 : Fold box bottom onto itself to create a smaller left-over pizza box. Step 10 : (Optional) When hungry, microwave pizza in the smailler box

mMmm...leftovers...


Industry Comments “Fitting a large pizza box into a small refrigerator is a dilemma that we can all relate to. This concept potentially solves the problem of space management while creating a new product (pizza plates) with the wasted packaging.� Paul Spitale Marketing Manager for Food & Beverage - MeadWestvaco

"The pizza box solution is completely do-able within existing product parameters. It recognizes that the pizza box has usage beyond delivery, and allows the user to easily reconfigure the box for its afterlife of storing leftovers – without stealing all the fridge space!" Maureen Carroll Principle - Creature LLC

"I think the winning entries managed to elegantly solve real problems that everyone can relate to, and I was encouraged to see many other entires that acknowledged the need to rethink the way the take-out system works overall. Great job!" Carie Davis Global Design Manager - The Coca-Cola Company


Testing Apparatus Cable Industry

When a building or commercial space is built miles of electric and data cable need to be run through subterranean channels. These channels are usually 2 to 3 inch PVC pipe lines with 90 degree turns to make life wonderful. The cable that is pushed can have a 3inch diameter and the flexibility of tree branch. All-in-all, this job can be extremely difficult, tiresome, and boring. The job, create an apparatus that tests how much pressure the cable pusher is exerting on the cable and in the ground opening.

LABORATORY

Virtual Hole

ON SITE

Live Force Testing

75 lbs

The data gathered helped validate a more efficient cable while informing more ergonomic ways of pushing a cable through conduit.


Southwire : On Site Testing Downward Cable Force

Over a two week trial we ended up pushing close to 800 feet of cable with our force measurement device. This measurement device was meant to do two things measure force despite the differing angles and not break. It measured force perfectly and we made sure to bring epoxy, duct tape, and clamps just incase it broke.


Southwire : Lab Testing Virtual Hole Force

Ergonomics were key to getting the best push on the cable and through hours of personal use and ethnographic video research we noticed that there almost every push was different. So to find out how to best push this semi flexible cable we designed a virtual hole that mirrored the on-site height and hole diameter. This device could be used inside the laboratory or outside in the field and could accommodate both the larger and smaller diameter cable.


Real Estate Website & Mobile GUI MODIFICATION DATE February 2, 2010 CREATOR Shelton Davis FILE NAME Real Estate Agent Website DESCRIPTION Sample Wireframes, Personas, and Mobile Integration VERSION HISTORY Portfolio version 2.3


BPO Real Estate Agent Website Site Map

Real Estate Agent

Listings

Link to Tumblr blog (Updated Daily)

Sell

Buy

Buyer guide

Buyer Links

Seller guide

Contact

Seller Links

Phone

Email

Home Office

Fax


BPO Real Estate Agent Website Persona Overview 1

Name

Barbara Woods

Dr. Sally Jones

Wells Fargo Asset Manager

ReMax Northern Georgia Partner Broker

Orthopedic Surgeon

PR

IM

AR Y

Job Title

Jim Stevens

Age Occupation Relationship

Age: 35 Occupation: Second level account manager for Wells Fargo's foreclosure portfolio in metro Atlanta. Relationship: Works with agent to assess properties in Atlanta through property comparisons and sales forecasting

Age: 43 Occupation: Real estate broker with over 30 agents under her. Relationship: Helping real estate agents find information for clients in order to produce sales and find a reliable stream of business

Age: 29 Occupation: Orthopedic surgeon that has recently started working at Piedmont hospital Relationship: In the market for an investment home or property with the $35K she has saved

Relevant Quote

I have 37 properties in the greater Atlanta area and need them sold ASAP. What do you know about 1123 Braden Way, Decatur GA? Roof intact?

I step into real estate business transactions when my agents hit a wall. My job is to keep them legally safe and help them close deals.

I currently live in a condo that I bought several years ago and feel that it is time to invest my hard earned money. Can you help me?

Website goals

Mr. Steven's is always looking for new, yet experienced BPO agents in Atlanta and doesn't always have the time to screen them. He Google's around to find agents to find out their capabilities and experience.

Mrs. Woods only calls or investigates another agent if she needs information that her agents have failed to get. For instance, when her agent cannot get a hold on another agent OR the agent doesn't know the status of a property, she either does a web search for the agent or property. This usually turns up the local multiple listing service which doesn't give extraneous agent information so she is always on the look out for personal agent pages or LinkedIn references.

As a new surgeon at Piedmont after doing her residency in local hospitals, Miss Jones feels that it is time to put her money into something more concrete. She searches for agents through friends and like shoes, through the internet. Because she is well educated, dedicated to her work, and has a sense of style when not in a lab coat, she looks agents that she feels she can relate to. Background and experience in investment properties is a must, but personality seems to trump all.

Her visit to the website is similar to looking for a business card. She needs to know how to find the agent for a phone conversation. Other than that, she does prejudge the agent based on the ease of navigation through the site. As her brokerages web savvy partner, she does know a good simple website when she sees it.

Her visit to the website would come from a web search or friends suggestion. She doesn't like working with real estate agents but does understand their expertise in the field. Incompetence can come both from the wording of the website and visual content, so attention to professional detail is necessary.

The visit to the website is paramount in showing him the attention to detail this agent has. Because he is asking them to see every detail of a house's condition, details and background information on the website is necessary as a parallel example of work habit. Years as a BPO agent is worth knowing but not if the experience


BPO Real Estate Agent Website Persona Overview 2

Name

Laticia Summers

Property Manager

Atlanta Airport Desk Agent

PR

IM

AR Y

Job Title

Sanjeep Dhunta

Age Occupation Relationship

Age: 47 Occupation: Manages properties all over the west side of Atlanta and is always looking to invest in more Relationship: Calls on foreclosure agents in order to find new properties that need little rehab.

Relevant Quote

If you come across any 3 bedroom 2 bath duplexes in Decatur call me at 404.543.3210

I have been paying my rent, why should I have to leave? What do I do?

Website goals

With over 20 properties yielding over $100K a year, Mr. Dhunta sees money in expanding his portfolio. Keeping with low end rentals he is always looking for a fixer-upper in a decent area where rents are high. Is is extremely specific in what he needs and will not look at properties that fall outside his need criteria.

As a serial renter and mother of a small family, Mrs. Summers' only need for a real estate agent is when she needs a new place to rent. Since she has been out of the market for the past 8 years she is uninformed of the current rental market practices. In order to overcome this inconvenience and still maintain her position at the Atlanta airport, she needs precise information about her situation, moving forward, and not getting caught up with a foreclosure that isn't hers. She needs professional empathy and understanding to get her into the family's next apartment.

He sees it unnecessary to have a graphically pleasing website that has no worthy content. If what he is looking for is not there and the site is beautiful he will not follow through with contacting the agent. He looks for updated property information and descriptions of what is going on in the bank, agent, and city process of properties. Other than those things, he believes he knows everything about the rental real estate market based on his years of experience.

Age: 26 Occupation: Customer Service for Delta Airlines Relationship:Tenant of a duplex that is currently being foreclosed on and is being evicted without prior notice from property manager

Visiting a real estate website is not a normal activity so ease of navigation and terminology that explains her situation are key. She needs empathy for her situation but truly needs guidance in order to move forward. Since she works long hours she will rely on what she can read versus a conversation. Website literature is similar to contract language to her, if it is written, it must be truth and will hold the website to it.


BPO Real Estate Agent Website Wireframe 1 Up 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

HOME

1

PROPERTY INFO

2

17

18

19

20

21

22

23

24

1.

Home button

1.1 1.2 1.3

All page home button Contains graphic logo Agent name, real estate brokerage, additional relevant info (max 3 lines)

2.

Info

2.1 2.2

All page info button Contains graphic roll over

3.

Buyer

3.1 3.2

All page buyer information button Contains graphic roll over

4.

Seller

4.1 4.2

All page seller information button Contains graphic roll over

5.

Contact

5.1 5.2

All page contact information button Contains graphic roll over

6.

Background Simple graphic background that creates a professional, informational, and welcoming feeling relevant to spring time vacations

BUY

3

SELL

4

7.

Main Content

7.1 7.2

Home page graphic Info page updated real estate blog (changeable information fed by agent updateable Tumblr feed) Buyer information based on real estate agent experience and links to additional help with ing the Atlanta area (static) Seller information based on real estate agent experience and links to additional help with ing the Atlanta area (static) Contact information necessary for client agent communication (phone, address, email, skype, twitter, blog, office, etc.)

7.3

6

5

CONTACT

7

MAIN CONTENT

7.4

8

HOME | PROPERTY INFO | BUY | SELL | CONTACT COPYRIGHT 2010, AGENT COMPANY LLC

7.5


BPO Real Estate Agent Website iPhone Wireframe

2

1.

Tumblr feed Link clients to a feed of updated information directly from the tumblr site. Give the user the ability to continually follow activity that is relevant to their search needs. This update would be identical to the agent's website without the side buttons.

2.

Tumblr Link from Website Link received from website, email, or vcard.

3.

Contact now Link received from website, email, or vcard.

4.

Follow agent Ability to bookmark this blogs updates on your phone or website

5.

Unfollow agent Ability to stop following the daily updates of the agent

6.

Scrollable content See property history

7.

*Utilize Tumblr tagging utility

3 Carrier

12:00 PM Page Title

http://www.agenttumblr.com

Contact Now

Follow Agent

4 Google

Unfollow

Agent Update January 23, 2010 Property 1A: Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos. Property 2B: Lorem ipsum dolor sit amet consectateur nonummy lorenzino. Interdum volgus videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos.

Allow a search by tags for properties, areas, prices, needed rehab work, or bank listing Property 2B: 1

5 6


BPO Real Estate Agent Website Canvas 8


Thank you!

s@designcannon.com + designcannon.com

Shelton Davis Industrial Design :: Design Cannon Portfolio  

Industrial design, human factors, web design, and user experience design by Shelton Davis. This portfolio represents a small amount of desig...

Read more
Read more
Similar to
Popular now
Just for you