Great Buildings – Revisions Post User Testing

I made significant changes to the Great Building Collection schematic after user testing.

HOMPAGE

- All three users had an issue with the phrasing “Explore Gallery.” They found it confusing and unclear as to where this would lead them. I have changed it to “Browse Collection” and tried to clarify that a user has the option to either search “OR” browse the collection. I am still unsure if this solves the problem.

 

PALACE SEARCH RESULTS by Architect

- One user pointed out that it is confusing that the filter options on the top and on the right are the same thing. I think this was a fundamental problem in my design and I have tried to clean it up. The left filter options now only feature a date slider.

- I added a vertical scroll bar to indicate that user can look through all listings in the search results. I think this would not have been a point of confusion were this a functioning search page and not a schematic.

 

PALACE SEARCH RESULTS by Places

- I have restructured the search matrix for Places to show results by country. Users can also narrow down their search by city via the drop-down menu on the left.

 

PALACE SEARCH RESULTS by Style (NEW)

 

SPECIFIC ARTICLE PAGE

- One user questioned how to exit out of this screen. I added a simple x/close in the top right of the panel. Clicking x would lead users back to whatever page they were on before landing on the specific description page.

- All three users were unable to quickly find the “edit” button. I have moved all user-based functionality to the top right of this page.

- One user suggested an “add to favorites” option. I thought this was a good idea and added it to the page.

- Two users questioned what “tags” were. This feature was not thought out in the initial sketch, so I removed it completely.

- Instead of Related News section, I changed it to Related Buildings. I think if there are ‘related news’ for a specific building, it could go to the related resources section. Related buildings seemed more important.

User Testing Results: Great Buildings Project

I was surprised to find that even user testing a simple schematic of a web layout could result in a huge amount of informative insights.  I user tested the Great Buildings project with 3 people:

Katie
- Age 25
- NYU Masters Candidate studying history. Works at the NYC Bar Association and is versatile in various research databases. 

Kate
- Age 31
- QA with more than 10 years of quality assurance experience.

Boris
- Age 50
- Computer programmer / software engineer. 

Here is the general script I followed when conducting user testing.

1.)  HOMEPAGE

This is the homepage of the Great Buildings Collection website. Tell me what you see. What do you think this is about? What stands out to you? (here, I felt like I had to at least mention what the website is about, since it is otherwise difficult to tell in a schematic)

- Imagine you’re writing a history paper for class about different types of palaces built all over the world. Where would you start your research on this page?

- Imagine you’re an architecture student looking for new architectural trends in the field. Where might you start your research on this page?

2.) PALACE SEARCH RESULTS

You’ve searched for the word “palace” and here are you’re search results. What do you see? Are these results clear or confusing to you? What stands out about your search results?

- What do you expect to be able to do on this page?

- Let’s say you want to narrow down your search to see palaces only in London. How would you do that?

- Now let’s say you want to see your search results filtered by places, not architects. Where would you go on this page?

This is a bit trickier because the actual functionality of the search/filter  doesn’t work but I think the users still understood the point. 

3.) SPECIFIC BUILDING PAGE

Tell me what you see. What do you think this is about? What stands out to you on this page?

- You are an avid user of this website and have logged in. You are reading an article about a specific building and found a mistake. Where would you go to fix it?

_______________________________________________________________

~ KATIE ~

1.) HOMEPAGE

- Image gallery and search field stood out to her the most on the homepage, then News and Design of the Week.

- “I like that the search is front and center. A lot of the time when I’m using databases I can never find the search field.”

- “Explore Gallery is confusing to me. I don’t really understand where this button will take me. Is it related to these images? I think it is too open ended.”  Suggested: Browse Collection.

- Grouping  by subject is missing for me on the homepage.

- For user scenario 1: would type in ‘palace’ in search box

- For user scenario 2: would look in “design of the week”

2.) “Palace” SEARCH RESULT

- “So, I can browse by architects, places and style.”

- In Places filter – “I think the places filter is too narrow. What if I want to see palaces in all of England?”

- User was able to follow through entire case scenario.

3.) SPECIFIC PAGE

- “What are tags?”

- Liked related resources. Would be helpful to also have “similar buildings.”

- Image cover flow – when I click to the right will it take me to other buildings or more images of this building?

- “If I was an avid user I would want to be able to add/save favorites.”

- User was able to follow through case scenario after noticing “edit” button.

~ KATE ~

1.) HOMEPAGE

- “First thing that catches my attention is the image gallery… Will the images move when I hover over them?” After, noticed logo, design of week, news, resources.

- Explore Gallery – not sure what this is. Is it related to images or will it take me somewhere else?

- “I like that the search box gives hints on what to type in (building, architect, style) – good guidance.

- For user scenario 1: would type in ‘palace’ in search box

- For user scenario 2: would look in “design of the week” or “resources”

2.) “Palace” SEARCH RESULT

- I would like an indicator that I can scroll down

- I don’t understand why places is at the top and also on the left. Having two “menus” is a bit confusing at first but then I got the concept.

- “After seeing results under Places page, I started to get the structure, organization of the search.”

3.) SPECIFIC PAGE

- I do quality assurance all the time and this is always a question for me: How do I go back from specific page? Can I close this screen to go back to my search results or do I have to click the back button?

- Use scenario: the edit button is too small, not obvious for me that I could edit the page. I think if I am logged in the page should look different for me as a user than if I was just a guest to the site.

~BORIS~

1.) HOMEPAGE

- I don’t understand the images. (note – I think is this was a functioning page this would not be a problem for users.)

- It is uncomfortable for me that search is in the center of the page. I’m used to it being on the right. But now that I think of it, maybe its not a bad idea?

- Not sure what Expore Gallery means. What am I supposed to do and where will it take me?

- What is Resources?

- For user scenario 1: would type in ‘palace’ in search box

- For user scenario 2: user was first confused about where he would look. After some time, he suggested “Resources.”

2.) “Palace” SEARCH RESULT

- I get the results, but why is it organized by architects?

- I get that the tabs = categories, and the left side menu = narrow down/filter.

- I understand that the left-side menus are dropdowns, but, I would like to see what the options are in the prototype. Will the dropdown be too long for something like architects?

3.) SPECIFIC PAGE

- Related resources? What’s that?

- What are tags? Tags dont have to do with the building details, so I would move it to user functionality.

- Why is facebook and twitter twice on the page? Which one should I choose if I want to share an article?

- Use scenario: I didn’t see the edit button right away. Maybe have it bigger? I would add a symbol to the edit to make it more clear – like a pencil or something.

 

 

Updated Great Buildings Site

I have updated my Great Buildings Site schematic and intend to continue with further iterations for this project. I am choosing this project to work with user testing because it is the most challenging to me and I am interested in understanding viewer input on the structure of this site. Here are 5 things I would want a user to test on my website:

- Is the call-to-action on the homepage clear?

- Does the homepage allow for a sense of exploration or discovery?

- Is the search results matrix overwhelming?

- Would you know how to search for the word “palace” and only view architects who have created palaces in London?

- Would you know how to search for the phrase “City Hall” and narrow your search to show only architects who have created city halls within a certain style?

Homepage:

Search results for the word “Palace”:

Search results for the word “Palace” organized by Places:

Specific building article:

IRC – iRescue Campaign – Mobile

The IRC website is packed with information that I think is too far and wide to fit into the scope of a single mobile app or website. The site has two primary features – one is to raise awareness of the IRC’s work, the other is to facilitate donations and fundraising. I decided to concentrate on the fundraising aspect of the IRCs work, specifically its iRescue feature. iRescue allows users to set up fundraising campaigns and encourage friends and family to donate to the IRC.

My proposed mobile website (it could also be an app) allows users to start new campaigns, view their current campaigns, or search through existing campaigns on their mobile phones. The audience is most likely people who are already familiar with the IRC mission or new supporters who are interested in making contributions to a good cause. Most likely, new supporters would have found the mobile website through other existing users (for instance through social networking posts), or while searching for humanitarian organizations.

The mobile website would also be a great place for people who wish to donate money for immediate emergency relief. On the homepage, the very top of the screen will always feature a current disaster or cause people could instantly donate to. So, if a disaster occurs, for instance the tsunami in Japan, users have the ability to instantly contribute.

Aside from its fundraising aspect, I chose to focus on iRescue because it is a more personalized way for people to engage with the donation process. By choosing to start your own campaign, personalizing it and sharing via social networking sites, people could potentially feel more engagement in the donation process. Many people want to feel like they are contributing or making a difference, and this mobile website would facilitate this process. In addition, users are able to share their thoughts, feelings and campaign information via social networking sites. This not only gives users the ability to share with the rest of the world that they are contributing to a noble cause, it also spreads the word about IRC and increases its audience and scope.

I think it is also important for users to get a sense of where their contributions are going. In the My Campaign schematic below, I have included a button “Who am I helping?”. This should lead to a page with photographs, graphics, and other helpful information that would give users a sense of where their money is going and who they are helping through their campaign.

Below is a schematic of 3 main screens within the mobile website. The first screen illustrates the homepage, the second is a schematic of how a user would start a campaign, and the third screen is a schematic of what a users existing campaign may look like.

Great Buildings Layout

1.) Layout design for the homepage of Great Buildings Collection  (current site: http://www.greatbuildings.com/):

 

2.) Layout for the filtering mechanism and how a user goes about searching or exploring the Great Buildings database. Think shopnik.com with an architectural twist.

 

3.) Sample layout for search results:

 

4.) Sample layout for search results filtered by places:

 

5.) Sample layout for specific building page:

Product Improvement

1.) Many faucet knobs in showers simply suck. Am I adding hot water? Cold water? Which one is which again?
A knob that’s more intuitive, much like a light dimming switch, may be helpful for users to really “feel” how much hot or cold water they have added. A small digital screen is a also nice additional to see how much water is added, what the temperture of the water is, etc. (I looked after making this and of course there are several variants of this idea).

 

2.) No one likes to feel stupid. Especially not when using a simple device such as a microwave. And yet why is it that some microwaves just make our lives more difficult?

 

Just a simple redesign of the buttons –  throw a few out, add some color, put emphasis on more important buttons, and already, you have a design that’s much more comprehensive to users.

 

Breakthrough UI

A product that transformed an industry through a good user experience design:

  • self-flushing toilets
  • back scratchers
  • smartphones (duh)
  • cars
  • calculators
  • ebooks
  •  Kindle ***

*** 

My mother goes through about 10-15 books a week. She has several hundred books in her personal library. She reads for work (she’s a journalist), and of course, for pleasure. When I used to ask if she’d ever switch to eBooks, she would give the usual book-lover shpeal – no way, she loves the smell of a book, the feel, the intimacy, so-on and so-forth.

About a month ago, someone got my mother an Amazon Kindle. I’ve heard this story dozens of times. An avid-book lover, reluctant to ever dive into the digital format, suddenly falls in love with this electronic device they were so much against. My mother, an old-school, technically un-savy bookworm, was hooked instantly. She could store thousands of books on the device. She could download them instantly, no computer, no  internet required, and for a fraction of the cost of printed books. She could carry this light-weight device everywhere, and have access to the biggest bookstore from anyplace. Thanks to the e-Ink technology, she could read it on the beach, or in a park. The sunlight won’t reflect off the screen. And a built-in dictionary makes access to unknown words instant and convenient.

The Amazon Kindle has absolutely transformed the publishing industry and has drastically improved the user experience for reading electronic books.  In the 1990s, people were able to read a small selection of books on their desktops. Convenient-ish – maybe for a glance through, or instant access, but barely was it “enjoyable” to read books off  bulky, immobile screens.

In the later half of the 90s, people were starting to read eBooks on PDAs such as the Palm Pilot (remember those?). However, they were really designed for organizational purposes, such as keeping address books, appointment dates, etc. Reading eBooks required users to download special reader software, and then find eBooks in the right formats from various online digital publishers. By the end of the 90s, the first Nokia and Samsung smartphones allowed for eBook reading. This was convenient for some, laughable for others. I’ve been working at an electronic publishing firm for several years. When my mother heard that I was formatting the works of Tolstoy to fit a mobile phone screen (this was before eReaders), my mother laughed in my face. Who one earth would want to read War and Peace on the tiny mobile screen of a blackberry?  There were later attempts to launch dedicated reading devices like the Rocket eBook, the SoftBook Reader, the Gemstar eBook, but all of those had failed quickly and were hardly popular among consumers.

Launched in November of 2007, the Amazon Kindle was really the first eReader to put eBooks on the market, transforming the  e-reading (and regular reading) experience and taking the book publishing industry by storm. Probably the biggest reason this device has been so successful was because it tried to mimic  the traditional book-reading experience as much as possible, while offering the convenience of being an electronic medium that enabled users to download, store, and organize content easily on the device. “It knows where I left off in each book I’m reading,” my mother exclaims, and she’s right. Moreover,  the new Cloud feature syncs to  every device that has Kindle software – your smartphone, your iPad, your computer. Now, all devices “know” where you’ve left off.

Since the Kindle, there have been numerous devices with a similar concept, but none have gotten close to surpassing the success of the Kindle. Even Apple’s iPad, one of the most impressive inventions in decades, does not match in the user experience of reading eBooks. The iBooks interface is sexy, yes, with its virtual bookcase and slick animation for every page turn. But its store isn’t Amazon, and its book collection isn’t close to being as large. The convenience of having instant access to the largest online bookstore in the world and its “as-close-to-real-book” experience  makes the Kindle hard to beat.

 

 

 

Core Experience Design

Last year when I was searching for an apartment I found it a huge pain to organize the listing I’ve already viewed. When you’ve seen a dozen apartments a day, you forget what they looked like, whether there was laundry in the building, who to contact, or if you even liked the place. A simple app to organize what you’ve seen would be extremely convenient during the apartment-search mayhem.

Below is the mock-up of four simple screens of the ApartmentOrganizer app. The first is the homescreen of the app, a design in which you can choose which information you’d like to access. The top button is the “Add New Apartment” button, which you can press if you’d like to add a new listing to your database.  At the bottom of the screen there is also a “Go to Craigslist” button, which I thought could be convenient for those who haven’t quite found what they’re looking for and want to continue searching.

The second is a mockup screen for adding a new apartment to your listings. You simply enter details about the apartment, including price, address, amenities and description. You can also add images from your phone, and mark your general rating of the apartments (loved it, liked it, didn’t like it, not sure).

The third screen shows how all of the listings you’ve added are presented in the app. You can filter through them, map them, click specific listings for more details, etc. The last screen is a sample of what an individual listing might feature.

I think this is a fairly comprehensive user-experience, although maybe the design of the “Add Listing” and the individual listing screen could use even more cleanup. Also if implementing a design like this, I think I would use better icons to represent “My Ratings.”