Blog

Going to the Library

2012-01-12T13:17:43Z

We recently launched the new Robbins Library website here in good old' Arlington, MA, and the site has gotten rave reviews. We gathered analytics, listened to the staff at Robbins and implemented what we found into the designs, layout and the way we developed the site.

New Direction >

Library websites tend to be a bit like craigslist. Uninspiring, and about as interesting as watching reruns of Three's Company. There is nothing that a user can gravitate to. No pictures, no engagement. We wanted to take the library site from bland to engaging. How? Well, basically, we looked at the library's site not as a utilitarian reference book, but as a business. This means outreach, engagement and communicating directly with users of the site. We repositioned the site as something exciting to go to. Repeat visits to the site will get repeat visits to the library.

@RobbinsLib Clean design, nice typography, works great on my phone. The new site looks great. Congrats!

- A tweet from a happy user

Analytics

Mobile

Robbins had google analytics already installed on their previous site, so we were able to gather valuable data to guide us into a design. We found that there was a large amount of mobile traffic going to their previous website. This presented a challenge of creating a site that will work great for both desktop and mobile devices without having to create several different mobile sites. We utilized responsive design. This technique allows a site to "fold down" for mobile devices. The Boston Globe has recently relaunched using this css layout technique, and it is becoming the wave of the future for mobile-friendly websites.

Analytics speak to me

Yes, they do whisper in my ear. What did they tell me? They said that people were also landing on the site looking for the library hours. Previously, they had been hidden deep in the recesses of the site, and were quite hard to find (trust me, as a user of Robbins Library, and also being kinda web-savvy myself, I had a hard time finding them). So the solution we came up with is not have to force people to dig into the site for the hours. Put them right on the homepage. Loud. Clear.

Who is hitting what?

The previous Robbins website also had a search field. However, it searched the site, not the library catalog. After reviewing the data from the previous site's search, it was pretty obvious that people assumed that the search system was to search the catalog. It was only a site search. We decided to go ahead and integrate the search field into the Minuteman Library database and pull search results from the library catalog. Simple, easy and user friendly.

I'm not kidding. Working with the lab guys was beyond a successful venture. Collaborating with them was a springboard for our interactive renaissance. I'm talking about a public library website, people. Just think what they can do for you...

Catherine Kiah, Technology Librarian

Now it's easy

User interface

We needed to improve the user experience on the new design. We decided to strip the site down. Add a clear roadmap on the homepage to all of the most popular sections of the website. We are now able to greet users on the homepage with what we found to be the most information most relevant to them. Events, hours, news.

Ask a librarian, globally and socially

But wait! There's more! With this website, you can also ask a librarian any question you want and get an instant response. Take a look in the bottom right of your browser window when viewing Robbins. See it? The little tab? Click it, and it turns into a Instant Message interface where you can type any question you might like to the librarian and of course you will get an instant answer.

We added social media to their site as well. You can now access all of the Robbins Library social media pages from any page on the site, as well as sign up for their email newsletter.

Finish this

We are thrilled that the staff at Robbins is happy with their site and users are as well. As always, a blast to work with the folks there (looking at you Catherine), and hope to continue working with them to improve the library experience.

Design In The Palm Of Your Hand – Compliments of Steve Jobs!

2011-10-27T02:42:46Z

Steve Jobs love and talent for design and the little details that made everything he touched a piece of art are evident in his lifetime body of work. Anyone in the design industry has heard of "form over function". Steve jobs takes this to an extreme. If you are to live by the philosophy that Steve Jobs went by, it would be "attention to detail". One of the greatest examples of Mr. Job's attention to detail can be found in the design of the 'sleep indicator light' on a MacBook Laptop. The light glows at the average breathing rate of an adult, which is 12 breaths per minute. This small detail is one that would not be obvious to anyone, but that has a subtle calming effect that can only be of benefit to all.

There is design and then there is design innovation. Steve Jobs was definitely an innovator par excellence. With products like the iPod & iPhone, he took technology out of the home/office and into our hands and pockets. No longer are we tethered down by technology. We are now able to take it with us and have it where we need it, in the palms of our hands. The invention of the iPod spawned an entire industry of forward thinking products that make our lives easier and often more fun.

I would like to thank Steve Jobs for all he has given the design and computer industry. I will think of him fondly every time I use my many Apple products. His visionary approach to technological design will be greatly missed.

Links we like - The Boston Globe

2011-09-21T16:16:23Z

In June we wrote about 'Responsive Web Design'. The newly relaunched Boston Globe website is a stunning example of responsive design.

Why do we like this link?

#1. Easily adaptable to all media formats.

#2. Focus on the content, not the design. (Many have complained about the lack of design, but, are you there to read articles or look at pretty designs?)

#3. Intuitive to the user's needs.

#4. Keeps it's design integrity no matter what format it is viewed in.

Log onto www.bostonglobe.com and pull the corner of your browser into different positions to view how the site looks in all different size formats. The fact that no matter what size you make your browser the content is clearly and cleanly viewed is a great example of 'responsive design'. We love it!

Go check it out

Links we like - A Lesson in Typography

2011-08-10T21:53:37Z

Why do we like this link?

#1 Its typography! What's not to like?.

#2. Great, clean design.

#3. Get people interested in the simplest of design elements. Well, at least it makes me excited.

Links we like - Food Sense

2011-08-07T03:25:58Z

Why do we like this link?

#1. Food.

#2. Great, clean design.

#3. Responsive layout

Go check it out

The Process of Building an Effective Website - Part 3

2011-08-05T19:05:10Z

Part 3 is all about bringing an effective website together, testing and launching. This final phase is all about taking an effective website design and converting it into a fully functional "live" website.

What is web development?

Web development is so much more than throwing some html and css at a canvas. Html, css and javascript can't do it all. For websites with dynamic functionality (this could be any function; from a blog to an online application), server-side languages such as .php, .NET, Ruby on Rails need to be considered before beginning development. Security issues such as financial transactions on an eCommerce site need to be addressed. No one wants their customer's information compromised. Implementing these technologies to make your website do more than sit there, but actually function, is the final step to making your website work.

I won't bore you with a long list of names and terms you haven't heard before, but this stage is where your website comes alive. The design is in place, development is completed, what's next?

Test, TEST, TEST!!!

You wouldn't expect a drug company to launch a new medecine without testing it right? Well the same goes for an effective website. Testing can range from browser compatibility & functionality to user group testing and A/B testing.

User testing

Yes, it is just what it sounds like. Before launch, a group of website users not associated with the project will be given access to the website so they can use it as everyone else soon will be. This is a great way for web design and development teams to see how average users react, use and act on different elements of the site. Things such as how usable is the site, does it work on all operating systems in all browsers, actions taken etc... will be observed. Any issues need to be addressed at this point. After all, the user experience is the most important factor in an effective website.

A/B testing

A/B testing is another user oriented part of the development process, but has nothing to do with functionality. It has to do with messaging. It is about segmenting several groups of users and showing them different calls to actions. One group may respond better than another and takes action due to the messaging on that page. Fine tuning your website to get the most out of it will be well worth the time & effort.

Summing it up

Design & development go hand in hand. One cannot live without the other when it comes to building a great website that your users will love, which in turn is great for your business. Building great websites is much MUCH more than purchasing a site template and throwing it at the web. Learn about your customers, design a site that speaks to them and you will soon find that your business see positive results from this process.

The Process of Building an Effective Website - Part 2

2011-07-24T04:46:19Z

This is the second part in a series about how to build an effective website. In this part, we will cover how to utilize the information discussed in Pt. 1 and flow it into an effective design. Using the data that we went over in Pt. 1, we begin to get a look at who your visitors have been, and more importantly, what they are looking for, and how to give it to them in a more effective, engaging manner.

Know who you are speaking to

No, you don't need to know their name or what their favorite color is. You need to know who is visiting your site. What kind of browser are they using for instance. Why? Well, not all design techniques used on the web are compatible with every browser. If you find that the majority of your clients are using older browsers, the design needs to fall into line with what they use currently. If you find that you have a large amount of mobile traffic, you need to make sure that your website can handle not only regular desktop traffic, but also be flexible enough to work in a mobile environment. This helps you tailor your website to your clients rather than your clients having to tailor their experience on your website to you.

Usability

Taking what we learned in the first part of this series about Building an effective website, we now have a game plan on how to tailor your website to better reach the audience you need to be speaking to. This is where we begin designing the site. And this all starts with usability. Usability is one of the most important, if not the most important piece of the puzzle. Being able to provide your prospective customer that is viewing your site with clear, concise information about what they are looking for in a timely manner is the most important aspect. As you saw from the previous post, taking into consideration things like analytical data, client input, your requirements for the site etc.... we begin to layout a site that helps the user viewing your site find what they need, make purchases easily, and be prompted to take action through a design. Usability os more than placement of a logo or a navigation bar. It is about stepping back from a website, and thinking "what would I be looking for on this site, and where would it be?". All of these answers go into the design of a website.

Branding

A brand is your unique personality of your business. Around the usability of your site, we need to "skin" it to reflect your unique brand. A brand is not effective if your website causes confusion or inability to take action. A well branded website is logo placement, logo size, colors, ease of use, tone of voice and consistent visual elements. This goes hand in hand with usability.

Functionality

The way your site functions is paramount to an effective website. Sure, the design itself may be slick, but, if something does not work for a user, then you lost a customer. A website is more than a design or a function. The two go hand in hand. You cannot have an effective website with a slick design only. If it doesn't function correctly, then it fails. If your website functions great, but the design doesn't engage customers and keep them on the page, then the functionality is worthless. We wrote an article on this called "Form vs. Function" in web design back in 2009 where we go in depth about this subject. Feel free to take a look while you are here.

We will be back next week for Part 3 where we will talk about the development, testing and launching of an effective website. See you then.

The Process of Building an Effective Website - Part 1

2011-07-07T12:56:58Z

The process of designing an effective website transcends just dropping some pretty pictures into some html and sending it live. The process starts well before pixel pens are put on pixel paper. We will go through each of the steps of building an effective website in the next several articles. We begin with step 1. The planning stage.

Planning an effective website

So, this is where it begins. Before we begin designing and coding a website, many logistical elements need to be considered here. Everything from where are we hosting to how do we choosing a CMS.

Step 1: Choosing a domain name and hosting

You may think this is as easy as headin' over to godaddy and getting a domain name and hosting package for next to nothing. This is far from reality. You need to stop and consider what your domain name will say to google (Search Engine Optimization starts here), as well as what type of server do you need to be on. Most content management systems run on the .php language used by most servers. However, each host is different, and many hosts have bandwidth limits. So, if you expect a large amount of traffic to your site, you will need a more robust host.

Step 2: Find out who is visiting your site now

Google analytics has been an excellent tool to get analytical data on who is visiting your website, and is a great tool to learn more about who visits your site. Do you get a large amount of mobile traffic? What versions of browsers visit your website most frequently? What pages are visited the most. This helps us create a an effective plan on how to make your website users happy, and make sure your site is always working for them.

Step 3: Your requirements

What are the requirements of your new site? Do you need a Content Management System? Are you building an online application? Does it need to appeal to male visitors between the ages of 25-40? In order to build a great website, we need to know exactly who is being targeted, what you want the user to do when prompted by a call to action etc, do you need your Content Management System to be open source?

Step 4: Information architecture/User experience

Information Architecture is your websites road map. What goes where? How do we guide the user through your site in the simplest manner? Navigation needs to be easy to use, and relevant information needs to be made as simple as possible to find. For instance, if you are a car dealership, you want to make sure that your hours and directions to your business are easily found. You don't want people getting frustrated trying to find these things or they will find a competitor who does it better.

We will be taking a look at the design phase of building your website next week, so see you then.

Responsive Web Design

2011-06-08T17:55:58Z

We're back!

The Lab web site has been down for the past 6 months while we have been busy on a side project, General Populace. But we are back now, and am happy to be here again!

Actually, today I'm away from the computer. My collaborative web development partner, Steve Callan, and I are attending a talk by Ethan Marcotte on Responsive Web Design.

What is it? Well, it's essentially about providing one web design that fits different screen resolutions, including mobile. As the words suggests, it puts forth the idea that design and development should respond to a user's behavior and environment, being flexible enough to fit all screen sizes, platforms and orientations.

As a user goes from their laptop to their iPad, the web site will automatically switch to accommodate the different screen resolution, image sizes and scripting abilities. It eliminates the need for different design and development phases for each new gadget on the market.[1]

Check it out. It is the future, and it is here.

[1] Source: http://coding.smashingmagazine.com; Responsive Web Design: What It Is and How to Use It, Kayla Knight, January 2011.

Grid is God!

2010-11-17T20:58:26Z

What am I supposed to mean by that!!?? Easy. Everyday, we consume information and content from some amazing sites out there in the webisphere....... and, its laid out effectively in a grid.

However, the grid didnt just pop up when the web came around. The grid has been in use since the middle ages, but really came of age in the early 20th century. Design gurus like Josef Müller-Brockmann and Wim Crouwel (one of my all time favorites) began using strict grid systems in their layouts.

To sum it up, what the grid does is creates order within the chaos of content. Rather it be a newspaper printed 150 years ago, or cnn.com, you can clearly see a grid layout. It makes it easier to find the content that matters to you.

“The grid is the most vivid manifestation of the will to order in graphic design. [...] Units are the basic buildung block of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessary uniform.”
- Grids are good

So, the grid rocks. It makes a difference everyday in everyone's lives. Not like it is some great earthly hero, but, it sure makes our lives as consumers of content better and more productive, but, it also makes my life as a designer a whole lot easier.

Here is an awesome video demonstrating a design being built on the grid (not to mention the amount of effort that goes into building just a web design, much less the actual coding.... please take note folks).

Live 960 grid system Web Design by Brian White of TriLion Studios from Brian White on Vimeo.

Resources

The Grid System

960 Grid System

Smashing Magazine - Designing With Grid-Based Approach

Clotaire Rapaille, Reptilian Marketing

2010-10-21T19:27:47Z

Just a small excerpt from the PBS Frontline called the Persuaders. Anyone interested in marketing products or ideas should watch this episode. It goes into what exactly happens in the mind to make people purchase products and services, or buy into an idea. It really does play to our "inner animal". Why would someone want to drive a Hummer in a city? Well, Clotaire is able to make people want to purchase one, drive around a city in one, and spend hours looking for a parking space, but hey, at least they have 4 wheel drive.

More excerpts are available here.

I highly recommend that anyone interested in marketing get this into their netflix queue. Enlightening, and a bit distasteful all at the same time.

Stephen Fry Kinetic Typography - Language

2010-10-20T11:21:25Z

iPhone 4 Wallpapers

2010-10-14T04:23:21Z

Got some iPhone 4 wallpapers for your downloading pleasure. One is for your home screen, and the other is for your lock screen. Lot's of photoshop goodness that can now rock your new iPhone.

Download them here.

Enjoy!

Anatomy of a web design project

2010-09-13T00:24:49Z

This will be the first in a series of articles on the web design process here at The Hype Lab. We want you to see what the process is, with all of the good and bad. We appreciate Massage Therapy Works not just letting us do this series, but also being a big player in it. So, Thanks to Richard Green and Jade Sylvan!

About Massage Therapy Works

Massage Therapy Works is one of the premiere massage therapy and bodywork centers in the Greater Boston Area. The level of skill, knowledge, and commitment is unparalleled to anything else I've found in the city. MTW already has a strong internet presence, with a highly informative website, great Yelp reviews, an active Facebook fan page, and a weekly wellness blog with a strong regular following. Basically, they were doing well, but we knew they could do better.

First steps

Since coming on board with us at the Hype Lab, we have gone through the current site, chosen the content that will be staying, and done a "mapping" of the site. Mapping makes it very easy to move forward with a blueprint of content and pagination for the final product. After sitting with Richard and Jade and listened to the needs for the new site, we have been able to streamline the content on the site and make important content easy and fun to find.

The new design allows clients to find the information they want clearly and easily, then gives them easy avenues to take the next steps to healing and awareness. The flow of the site is clean and intuitive, and the information is presented in logical sequences, rather than on one long page the reader has to scroll down.
- Jade Sylvan, Massage Therapy Works

The design

Working with the Massage Therapy Works new logo, we came up with a design for the site (teaser above) based on what they do. Meaning conveying a sense of peaceful, natural relaxation. We have built into the site an appointment scheduling application that will be available to the user on any page on the site. We are also bringing together therapy treatments and the therapists who perform them in an all new way. The user will be able to view treatments, select a therapist they feel comfortable with, and then make an appointment with only a few clicks.

We hope you find this series helpful and a great insight to what you can look forward to by working with us here at the Lab. See you next week with more updates!

Comic Sans is NOT Comic

2010-09-06T14:34:44Z

Seems like the Comic Sans "font" is making some kind of come back. Well, comic sans is not a font. It is an eyesore. It isn't funny, it isn't cute, it isn't readable. Comic Sans is hard to read, ugly, and looks like a font a pre-teen might use in their IM. Please, stay away from it at all costs.

Please watch this informative video from John Stossel at ABC News