Change of Plans…Midterm style

After discussing my idea for my midterm with our instructor, it was decided that my company was too specific or small, rather. So, I had to do some more research. I broadened my project to be lodging for Big Bear area. I chose to re-design bigbearcabins.com.

Looking at this site, I felt that it was not an efficient use of space. There is this huge image and then a big block of text. The navigation is a little lost. Also, though that search option on the front page is good, it is actually only and image and takes you to a different page to do the search. In addition to that, during my research I found that most search options did you allow you to search by keyword. Keyword is an important option if you are searching for lodging with specific features like a fireplace or jacuzzi. Also, I found it difficult to re-locate cabins that I had seen before. Then of course, the logo and color scheme could use some work to say the least.

Here is my proposed sitemap. I’ve refined the navigation and tried to categorize sub-pages. In our growing involvement in the internet and building community… and the fact that it was part of the assignment description, I incorporated a “community” section. it seemed important for people to be able to leave comments and write reviews about their stay. It also seemed like it would be beneficial to have a blog section, mostly to give updates on specials, events in the area, and a newsletter.

I decided to incorporate some sub-navigation in to the “accommodations” page. I wanted to present an organized and easy to navigate way for possible customers to see the policies for rental, rates, calendar, and location of properties on a map.

As for actual redesign, it is experiencing technical difficulties. Feel free to check it out on the FTP.

Cabin for rent! hansel-and-gretel.info re-design…

For my midterm project, I have chosen to re-design an accaintance’s business site. She currently has a website designed in a free web builder program that came with her web hosting that she uses to rent her cabin in Big Bear. Check out a snap of the homepage below or in the flesh at www.hansel-and-gretel.info.

Just to give some guidelines to my competitive analysis, some of her main concerns about her own page (that I share,) are the overall look and feel of the page, information design/user friendly especially with making reservations, ability to contact owner, and access schedule/calendar for reservations.

First off, my client says that her main competition and also resource for renting her cabin is vrbo.com, so I chose to include them in the analysis. To the right, is a snap of their homepage. This site is actually like a classifieds type site allowing property owners to list here instead of or in addition to a personal site. This larger database offers searchability for properties all over the US and Internationally, verification of ownership/legit properties, and nice little bells and whistles like a place for comments from past renters and pop-up availability calendars.

Overall look & feel: decent color palette. Not too corporate, maybe has a little bit of a medical feel. However, crowds a lot of content onto one long page for each property. Scroll till your hearts content.

User Friendly: there are limited search options for this site. You can’t search by keyword only sort information by a few options like, number of beds: low to high. The only sure fire way to find a listing you’ve been to before is if you have a ID number for that property & who keeps stuff like that laying around?! You can however, contact the owner easily and there is an easy access Calendar.

Next we have White Oaks Cabins at Patokalake.com. This site is a little closer to my clients site, rather than that behemoth clearing house of properties site.

Overall Look & Feel: The site feels organized and laid out well. Not super psyched for the red and green color palette, but with the content contained within box with a white background keeps the content easy to read. Images are decent quality and size.

User friendly: the site has consistent navigation and just enough content to navigate intuitively.  Each cabin has is locatable through the sub-navigation and includes concise & pertinent information. However, there is no calendar of availability, you have to call the owner.

Overall, this would be a decent model for a site for my client in terms of organization and content to include (not color scheme!)

Now we have Sunsetcottage.com. This is a mix between the behemoth and the christmas color scheme, the site is not quite a huge database, but is showcasing more than 5-6 cabins.

Overall Look & Feel: Love that orange sunset background. This is look is a good combo of professional meets cottage. There is an organized layout with consistent color palette and a professional logo. Though the page has a lot of color and illustration in the background, the important elements are arranged in solid color boxes to sustain their readability.

User Friendly: Right on the first page you have to ability to search for cabins in many ways; number of nights, arrival date, or specific property. There is a consistent navigation panel on the left with main navigation (though there are quite a few) and sub navigation within the pages. I would recommend for this site some bread-crumbing so that users don’t have to remember which page the sub-nav is on to find it. There is complete information about rental properties and policies. You can even rent online! well done!

Though this site has more content than my client, their organization combined with a unique look could be a good example for her site.

These three sites are very different, but all have traits that could be useful to include and avoid.

Homepage, Landingpage, Sub-page, Sub-Sub-page

So in continuing with the MoMA re-design fun, our class was asked to continue into the lower layers of the MoMA site. This time we are to create a landing page, sub-page, and a sub-sub-page to go along with the homepage, with a focus on the navigation. The challenge about the MoMA re-design and with most large sites, is that they have tons of content and if you’re a good web designer, you have to find an intuitive and aesthetically pleasing way for users to access all that content. The navigation also has to be consistent in keeping with the goal of aesthetically pleasing.

If you’ll recall, this is the original Home Page I redesigned from my first attempt. You can have a look at them both in this earlier post.

In keeping with the MoMA’s original design I used the modular approach for the landing page for the “Explore” section of the main navigation. I chose to categorize the main navigation as  Home, Explore, Learn, Support, & Shop. Within each main navigation category are more specific sub-categories for that particular concept. For example, Explore, expands into current exhibits, film, multi-media, exhibits, collection, & publications. I also chose to continue the Today panel onto the landing page. Since this is the landing page, it still does not include too much content, it’s like it’s name, it’s the landing in between two destinations, like in a stair well. For this assignment I opted to continue on to the film section.

Within the “Explore” section, I chose to re-design the sub-page “Film.” I included most of the original sections, “on-view,” “collection films,” “support films,” “film events,” “upcoming,” “film events,” and “library/archives.” The original MoMA page had a few more modules dedicated to specific shows currently on view, but I felt it was too overwhelming. So, actually this entire page serves as sub-navigation, which is why I included bread-crumbing about the “Today” sections. I wanted to be sure that users would be able to use the sub-navigation without having to go back to the “Film” page. I also did this with the landing page above.

Then for the sub-sub-page I chose Tim Burton’s current exhibit. I also held back on using tons of copy until you get to this stage. Once on the sub-sub-page I tried to include much more information and tried to organize it so that there were all things related to that specific exhibit. Since the user would have to wait to get to the sub-sub-page and wade through a few pages, I wanted to make sure that most related content could be found on this page. MoMA actually does this themselves and even including past events and related events & articles, I thought it was such a good idea that I stuck with it.

Throughout the pages the modules and content changes, but the masthead and main navigation stay the same. I also tried to make the image overlay in the masthead coincide with the content on that page.

MoMA Redesign in Action

So after my research and competitive analysis for MoMA, I’m ready to actually attempt a redesign. Here goes…

I’m sure you can figure out which one I decided to flesh out when you get further along. Honestly, I think I was having a poor foresight moment when I decided to design a page that is constructed with the navigation as the main focus. Duh…

navigation?

This is a great example of “…but it looks cool” design. I chose the layout that looked the most interesting to me without considering how it would really function and the user experience.  Before I get off on how wrong this design is, let me explain what I did.

I had this idea that I wanted the individual, blue panels to move up and down to reveal their content–which since I don’t at this stage have to make this page function I can dream up any kinda craziness that I want, right? I wanted the logo to stay stationary in the same location on every page for consistency and perhaps the background image to change behind the logo. I also need to mention that we were supposed to take into consideration 3 personas while designing this page.

The 3 personas, are three different people that represent people in the museums theoretical target audience. Take a look at their details and recommendations for the redesign: george_vance, theresa_lowell, & heather_adams. The long and short of it is that george likes to read and wants access to articles/printable materials, theresa is a mom that wants to organize things for her kiddos in a snap, and heather is one of us and wants it to be all shiny & designy.  In addition to there specific preferences we also have to consider the client, MoMA and their need/desire to push memberships and support/donations for the museum.  Oh and the rest of the world that might come to this site. Ready go!

So, referring to my first crack at this, I will point out a few things that I just totally did not focus on that I should have besides more intuitive navigation. The membership piece is big and I totally forgot to emphasize it. George got some of his readable content, but not necessarily printable and not in large quantities and Theresa is not really going to find her kiddy activities w/ ease.  Nobody’s happy, but it looks cool and that’s all that counts, right… just kidding!

Round 2

So after our class critique and further re-examination of the personas, I have made several important changes.

better?

First things first, emphasize that membership, JOIN! I made it a pointto encourage the viewer not one, not two, but three different points of interest for the memberships. There’s a box in the middle of the page and two red  links in the navigation and sub navigation.  Next, our buddy George can to to the “news” section and before he goes he can get a preview of what he might find there on the first page. Then there’s the kiddos… now I don’t necessarily associate museums with children so I thought would kill two birds with one stone. In my competitive analysis I continuously referred to the access to a calendar showcasing the museums upcoming events and I access to the calendar from the first page would satisfy that need and could also include children’s events without being specifically for children. Which brings me to the “today” section. During our class critique there was some discussion for individuals to be able to login and plan their trip to the museum and though my “today” section is not that it inspired putting a panel specifically for the days events on the front page. This allows for patrons to see what’s going on today or to see what’s going on another day both from the first page. I kept the MoMA logo with the image in the background, but moved it to a more accommodating space for the rest of the layout. The navigation is more functional and could be used consistently deeper in the site which is always less confusing for the user.

Overall, I feel the second layout is a dramatic improvement over the first. And it emphasized and ever present problem with web design, just because it looks good doesn’t mean it’s easy to use or functional= possibly not worth the “coolness” factor. For next few weeks we will be further focusing on navigation, and more specifically navigation as it related to sub pages and sub-sub pages. Stay tuned…