Wednesday, May 1, 2013

Week 13 Day 2: Case Study Critiques & Setting Up Usability Tests

Today we did four one-on-one critiques per person.  The critiques were handed in to our professor directly afterwards, so no word yet on how that went.

We also began our short term usability testing project, which ties directly into the projects we've been doing for the past two months or so.  After our professor presented a short lecture on kinds of usability tests, I made two, one for the Pier Hotel's current website on FiveSecondTest.com, and one for my revised wireframe on Chalkmark.

Week 13.0 Outside of Class: Final Case Study Documentation

Since Monday I've been very busy, plugging away at completing page layouts, write-ups, and any revisions to my graphics.  Here are my spreads for today's critiques.














The process was definitely rushed these past two days.  I hope to go back & fix a number of things: a more continuous narrative to tell a story, consistency within captions, more explanations, some subtle color underneath imagery with white backgrounds (to lessen the white on white), & overall better develop the case study.

Monday, April 29, 2013

Week 13 Day 1: Progress Critique & Revamped Persona

This weekend I was in New York, so I didn't have my pages complete for the 50% progress critique.  However, I was able to get some helpful words from what I did have.  Layout variations and typefaces were overall well-received.  I got mixed reactions on the amount of blues that I used.  With that comment, I decided it may be better to keep the monochromatic theme I had going, to keep it clean, rather than trying to incorporate the rather wild colors from the Pier Hotel's website and building.  I also got useful reminders of what to put on the title page and how to denote subsequent pages.

Today I finally completed the revise for my persona.  Major changes include the more detailed graph of how Gina finds her perfect hotel, as well as her offline & online activities.  Other than that, some aspects were slightly resized or moved to accomodate the additions.
I also began to set up more pages within the case study.  Needless to say, I have a lot of work ahead of me for Wednesday.

Title page for my case study document



Wednesday, April 24, 2013

Week 12 Day 2: Progress Critique and Further Exploration

Today in class I met with my professor to go over the progress of the case study elements so far.  I received plenty of useful input and even noticed some things I had previously overlooked.  To summarize...

  • Even wireframes should be designed to match the personality of the site, through type, etc.
  • Personal quote on the persona doesn't need to be so overtly connected to the business, rather a motto
  • "Sample" search bars or drop downs for use in wireframes, instead of just boxes
  • Be more specific on wireframes what the "featured content" or a specific image will be; a designer's got to know!
  • Bottom navs have much of the same content as top navs, with maybe a few added elements; as compared to fat footers, which have columns of links
  • Watch wording: "Guest Rooms" may be better understood as "Room Info," consult related sites
  • Use content of landing pages to lead people to subsequent pages
  • Don't forget page numbers, section names, & even publication title at the bottom/top of page
  • Vary typography for title, headers, body, captions, etc.
  • Charts can be made in Illustrator & that doc can be placed into InDesign

I've also been experimenting with more color schemes & researching more layouts for the full publication.

Week 12.0 Outside of Class: Beginning Case Study Layout

For the case study document I chose to keep it consistent with the color scheme I've maintained throughout most of the project.  I departed from the browns of the website as I felt it just didn't fit the feel of the Tampa Bay area.


The title page uses the light teal as the background and deep teal for text.  Pages with several images has a blurb on the side with the medium teal and caption for each picture.  "Full page" pictures have a primary caption underneath but also several call outs.

Monday, April 22, 2013

Week 12 Day 1: Beginning Thoughts on Case Study Documentation

Today the last part of this project was introduced--a "deliverable" of the entire case study, which include all the previous parts of the project, as well as a cover page, table of contents, overview, summary of findings & suggestions, & colophon, all consistently stylized.  I started to think a little bit about what I want to do, but definitely need to hash out some ideas.  

The second half of class I spent revising the persona portion of this project, per the critiques I got last week.


Sunday, April 21, 2013

Week 11.5 Outside of Class: Pier Hotel Wire Frames

After studying patterns within my selected sites last week, I created wire frames for both the Pier Hotel's homepage & a vital sub page. (Vital meaning it has a decent amount of content.)  The most important things to note include...
  • Emphasis on imagery/image slider
  • Reservations & promotions, in particular, easily located at side
  • Contact info appears both in header & in footer
  • Sitemap moved to header, next to search bar
  • Contents of bottom nav yet undetermined


After the fact it occurred to me that a subnav could very nicely fit in the left-hand sidebar, below the main nav & above reservations.  That is something I plan on fixing.


Wednesday, April 17, 2013

Week 11 Day 2: Persona Critique & Revisions

Today my row critiqued my persona, along with both design professors.  Overall, it went pretty well.  A lot of small things were picked out, like edge tension, alignment, & wording.  One of the comments I found most insightful was switching the colors on my graph, emphasizing lighter colors of the darker & creating better balance.  My professors commented on combining the biography & interactions section into just the bio, then creating a new section about how my persona interacted with the site specifically and maybe a few additional secondary aspects, such as what she does in her free time & her comfort with technology.  Also, on the graph, differentiating the online sources to break up the graph more.

During the remaining time in class I worked on applying these changes to my persona.

Week 11 Day 1: Content Studies of Similar Websites

Madox Apartments, modern condo-style apartments in Jersey City, NJ.



Postcard Inn, beach front hotel in St. Petersburg, FL.



Sagamore Hotel, boutique hotel in Miami Beach, FL.




W South Beach, high-end hotel in Miami Beach, FL




Distrikt Hotel, boutique hotel in New York City




From studying these five sites, I noticed they are all image heavy, focusing on large, well-shot imagery and image sliders.  Some even included music to help "transport" you to this location.  A booking/reservation portal was also a large portion of almost every site, as well as "highlights" and featured links. Social media was more so deemphasized on these sites, instead displayed by the footer of the page.

Another helpful find was in the Distrikt Hotels room page; policies are displayed underneath the rooms.  Deals and specials are also well displayed.

Monday, April 15, 2013

Week 10.5 Outside of Class: Business Interview & Completed Persona

Friday I called the Pier Hotel back to ask a few short questions about their target market and website mission to help guide the creation of my persona.  The call was rather short, but I was able to gather some helpful information.  The manager told me because it is a small, boutique-style hotel, they get business both locally and from out-of-state, customers ranging from 18 up to 80 (& older).  I'm guessing due to the size, they do not target or bring in many large families or even small children.  When I asked about their website, the manager told me it is "to let people know we're here."  I'm guessing their website is their main form of advertising. I was unable to ask if many of the reservations were made through the website.


Wednesday, April 10, 2013

Week 10 Day 2: Beginning Persona Creation

Today in class we began with a discussion on personas & how they help create a snap shot of an average individual within a company's target market.  This creates a feasible user for the website at hand.

I attempted to call the Pier Hotel to ask them questions about the use & purpose of their website & their average customer.  Unfortunately a manager will not be available until Friday, so I'll be calling back then.  I did get to ask the receptionist a quick question on whether their customers are mostly in-state or out-of-state.  She told me it was a mix of both.

To help get an idea of the general customer, I looked up other St. Petersburg non-franchise hotels within a similar price range with a similar style.  The closest I found was the Hollander Hotel.  Unfortunately there was no manager available there either.

Between calls I sketched out a rough idea of a layout for my persona.  


It includes the required information (name, age, location, occupation, biography, & personal quote), &  I anticipate adding the persona's salary range, key entry to the company (how they learned about the company), & user goals (what they hope to gain/accomplish through the company).





Week 10.0 Outside of Class: Completed Revised Site Map



This is my all but completed site map.  I applied all the tips my classmates gave me & even created a symbol for my page that contains information embedded from another website.  

Monday, April 8, 2013

Week 10 Day 1: Site Map Critiques & Revision

Monday we did critiques within our rows of our site maps.  I got a lot of helpful tips on how to improve my site map, including adding color, keeping consistent capitalization, creating a title, creating a distinct color for dynamic/sign-up pages, & differentiating similar titles that are actually different pages.

Here are the beginnings of my revised site map.


Week 9.5 Outside of Class: Finished Visual Site Map


This is the finished visual site map, showing the 5 main navs within the homepage and what is included in each.

Wednesday, April 3, 2013

Week 9 Day 2: Revised Table of Contents & Beginning Visual Site Map

1.0.0.0   Home

   1.1.0.0   Location
      1.1.1.0   Maps & Directions
      1.1.2.0   Local Attractions
      1.1.3.0   City Events Calendar

   1.2.0.0   Rooms & Services
      1.2.1.0   Make Reservations
      1.2.2.0   Single Guest Room
         1.2.2.1   Single Room Virtual Tour
      1.2.3.0   Double Room
         1.2.3.1   Double Guest Room Virtual Tour
      1.2.4.0   King Guest Room
         1.2.4.1  King Room Virtual Tour
      1.2.5.0  VIP King Guest Room
         1.2.5.1   VIP King Room Virtual Tour
      1.2.6.0   VIP Luxury Suite
         1.2.6.1   VIP Luxury Suite Virtual Tour
      1.2.7.0   In-Room Extras
         1.2.7.1   In-Room Massage
      1.2.8.0   Special Events
         1.2.8.1   Weddings
      1.2.9.0   Policies
         1.2.9.1   Check In/Out
         1.2.9.2   Cancellation
         1.2.9.3   Parking
         1.2.9.4   Payment
         1.2.9.5   Smoking
         1.2.9.6   Terms of Use
         1.2.9.7   Privacy

   1.3.0.0   Gallery  
      1.3.1.0   Hotel Exterior Gallery
      1.3.2.0   Guest Room Galleries
         1.3.2.1   Single Room Gallery
         1.3.2.2   Double Room Gallery
         1.3.2.3   King Room Gallery
         1.3.2.4   VIP King Room Gallery
         1.3.2.5   VIP Luxury Suite Gallery
      1.3.3.0   Lobby Gallery
      1.3.4.0   Verandah Gallery
      1.3.5.0   Morning Room Gallery

   1.4.0.0   Special Offers
      1.4.1.0   Package Deals
      1.4.2.0   Holiday Specials
      1.4.3.0   Florida Resident Specials
      1.4.4.0   Multi-Night Discounts
      1.4.5.0   Fall Specials
      1.4.6.0   "Club Pier" Mailing List Sign-up

   1.5.0.0   About Us
      1.5.1.0   History
      1.5.2.0   Awards
      1.5.3.0   Press
      1.5.4.0   Guest Comments
      1.5.5.0   Partners/Links
      1.5.6.0   Contact Us



After meeting with my professor, I made a few adjustments to my "Table of Contents" style site map.  I divided About Us into About Us & Location after reviewing how my open card sort participants set up groups.  I am putting About Us the furthest right on the nav, since I feel Contact Us especially is intuitively looked for in this general location.

 Also, due to how little content is in Home (& since that content isn't actually going to be on separate pages), I changed Home to the overarching homepage, instead of an option within in the main nav.

Once I finished revising the above Table of Content site map, I began my visual site map.


Tuesday, April 2, 2013

Week 9 Day 1: Written Table of Contents Sitemap

1.0.0.0   Home
   1.1.0.0   Welcome
   1.2.0.0   Welcome Slideshow

2.0.0.0   About Us
   2.1.0.0   History
   2.2.0.0   Location
      2.2.1.0   Maps & Directions
      2.2.2.0   Local Attractions
      2.2.3.0   City Events Calendar
   2.4.0.0   Awards
   2.5.0.0   Press
   2.6.0.0   Guest Comments
   2.7.0.0   Partners/Links
   2.8.0.0   Contact Us

3.0.0.0   Rooms & Services
   3.1.0.0   Make Reservations
   3.2.0.0   Policies
      3.2.1.0  Terms of Use
      3.2.2.0  Pet Policy
      3.2.3.0  Parking Policy
      3.2.4.0  Cancellation Policy
   3.3.0.0   Single Guest Room
      3.3.1.0   Single Room Virtual Tour
   3.4.0.0   Double Room
      3.4.1.0   Double Guest Room Virtual Tour
   3.5.0.0   King Guest Room
      3.5.1.0   King Room Virtual Tour
   3.6.0.0   VIP King Guest Room
      3.6.1.0   VIP King Room Virtual Tour
   3.7.0.0   VIP Luxury Suite
      3.7.1.0   VIP Luxury Suite Virtual Tour
   3.8.0.0   In-Room Extras
      3.8.1.0   In-Room Massage
   3.9.0.0   Special Events
      3.9.1.0   Weddings

4.0.0.0   Gallery  
   4.1.0.0   Hotel Exterior Gallery
   4.2.0.0   Guest Room Galleries
      4.2.1.0   Single Room Gallery
      4.2.2.0   Double Room Gallery
      4.2.3.0   King Room Gallery
      4.2.4.0   VIP King Room Gallery
      4.2.5.0   VIP Luxury Suite Gallery
   4.3.0.0   Lobby Gallery
   4.4.0.0   Verandah Gallery
   4.5.0.0   Morning Room Gallery

5.0.0.0   Special Offers
   5.1.0.0   Package Deals
   5.2.0.0   Holiday Specials
   5.3.0.0   Florida Resident Specials
   5.4.0.0   Multi-Night Discounts
   5.5.0.0   Fall Specials
   5.6.0.0   "Club Pier" Mailing List Sign-up

Monday, April 1, 2013

Week 8.5 Outside of Class: Closed Sorts & Remote Open/Closed Sorts

Over the weekend I completed the rest of my card sorting studies: 3 in-person closed sorts, 3 remote open sorts, & 3 remote closed sorts (remote sorts via uxpunk.com).

Closed Sorts

Participants were given 6 categories (bright green post-its) based on the results of the initial in-person open sorts in which to place website items.  If participants felt items did not fit appropriately into any of the categories, they were permitted to create limited new categories (small white paper tabs) at the end.



Participant 4: Angie, MU student, Chemistry major




Participant 4 particularly noted that Policies could/should potentially be in two places.  While she felt they would all be appropriate under a "Policies" tab, she could also see this information being helpful within "Rooms & Rates."  Subject 5 also felt the "City Events Calendar," "Special Events," & "Local Attractions" should be exterior links on the homepage.



Participant 5: Magenta, MU student, Chemistry major






Participant 6: Emily, MU student, Psychology major





General observations from these closed card sorts including "Contact Us" being put in the "Home" tab rather than the "About Us" as I envisioned.  As well, there was confusion over what "Special Events" were; rather than the subjects interpreting it as something the hotel would host like a wedding, it was often paired with "City Events."


Remote Open Sorts

As with the first round of card sorting, participants were asked to group items together into categories & then name the categories.

Participant 7: Kate, MU student, English major





Participant 7 created 8 categories, surprisingly close to what the site actually had: Gallery, Home, Location, Policies, Room Rates, Special Offers, Special Wishes, & Welcome.

Participant 8: Brendan, MU student, Biology major






Participant 8 also created 8 categories, though only 6 or 7 are usuable: Disorganize List of Links, Events/Attractions, Photo Galleries, Room Types & Info, Specials/Deals, & Virtual Tours, leaving Press in the category "Wut."  My guess would be the participant did not read "Press" as reviews & mentions in media.


Participant 9: Melanie, MU student, Meteorology major





Participant 9 created 9 categories, though a couple of them have only one item inside.    Welcome & In-Room Extras are each on their own though, after looking over the subject's break down of each category, could've easily fit into other categories.  The categories are as follows: About Us, Gallery, In-Room Extras, Make Reservations, Policies, Rooms, Site Map, Special Offers & Events, & Welcome.  Welcome (& its subsequent Welcome Slideshow) could probably fit with the item Welcome in her category Site Map, unless she meant it to be a portal into the site as it currently is.  In-Room Extras (& its subsequent In-Room Massage) could probably fit with the item In-Room extras in her Room Rates category.  Looking back, I could've made it clearer that subjects avoid single-item categories.

Another thing I noted from participant 9 was how she constructed her category Site Map; instead of putting category names within their categories, she put them into Site Map.


Remote Closed Sorts

For the remote closed sorts, as with the in-person closed sorts, participants were given 6 categories based on the initial in-person open sorts in which to place website items: About Us, Gallery, Home, Policies, Rooms & Rates, & Special Offers.  Also similar to the in-person closed sorts, participants were given permission to create limited new categories at the end for items they felt did not appropriately fit.

Participant 10: Quang, MU student, Computer Science major






Participant 11: Ben, MU Student, English major





Participant 12: Meg, MU student, Science Ed major





Participant 12 was the only to create a new category, Things to Do, including Local Attractions & Special Events.  Like many before, participant 12 misinterpreted Special Events as events around town rather than events that can be held at the hotel. 


All-Around Observations & Conclusions
  • The category Home may be too ambiguous, so I'm thinking to still have a homepage, but perhaps not use it in the nav, rather clicking the logo would take you back home.  
  • Policies also seems to be unnecessary as a top-level category, rather a subcategory of Rooms & Rates would be more fitting.  I'm even thinking some of the Special Offers could go with Rooms & Rates, but that would leave Special Events (Weddings) on their own.  
  • What to do with Make Reservations--as its own category, with Rooms & Rates, with Rooms & Rates as well as Special Offers & Events.
  • "Club Pier" mailing list sign up would fit better with Special Offers than About Us