We recently launched a complete site redesign for Urban Igloo, a DC-based apartment finder that helps connect landlords and renters. We have been working with Urban Igloo on marketing and backend systems development for some time so we had a firm grasp of their business to start from. Any web design/development effort should always start with a solid understanding of the goals. Sometimes the goal can just be to give a site a visual refresh, but it’s important to identify this at the beginning. The visual design is only a part of what makes a website successful. The user interface design, website copy, and quality of the content are just as important, but this blog post will discuss this effort from a visual design standpoint.
Some of our goals for the Urban Igloo redesign were:
1) Clearly introduce the business and services to site visitors.
Urban Igloo caters equally to landlords and renters, but their old homepage tilted heavily towards renters. Urban Igloo’s landlord services, and the business as a whole, needed more of a presence. It was also important to communicate that Urban Igloo is not simply an online real estate listing and search tool, which the old homepage seemed to imply by displaying a listing search form the primary focus of the design. The new design focuses more on introducing the human side of the business, which is a distinguishing factor for Urban Igloo against their competitors. The remaining content is more evenly balanced between landlords and renters to show that both groups play an equal part in the Urban Igloo business.
This balance is reflected in the site navigation and subpages as well. The first two tabs of the main navigation go to the Renters and Landlords sections respectively. The main pages for each section greet viewers with large headings and easily scannable lists that quickly summarize the process of working with Urban Igloo. The pages end with short customer testimonials to build trust and clear calls to action for how to get started. This is much more effective than presenting users with a wall of text that they are unlikely to read, and the clear, graphical calls to action guide users to take the next step without having to hunt around the site navigation for what to do next.
2) Make calls to action for key content and functionality stronger and easier to locate throughout the site.
There are several actions available to site visitors to interact with Urban Igloo. Landlords may wish to inquire about service details or list their property, renters may want to browse the listings or contact Urban Igloo for personal help from an agent, or even sign up for paid tours of DC’s neighborhoods to decide where to live.
We worked with Urban Igloo to identify these key actions, and featured them in different contexts throughout the site. It’s important to link to key functionality in several different ways because not all users will look for them in the same places. Some users go straight to the main navigation to figure out what to do. Others scan the content of a page looking for in-text links to branch off into. The site footer or side margin are also popular places to search for important items.
To effectively capture users with different browsing habits, we made sure to link to the most important actions in all of these ways. For example, renters can access the apartment search feature through a link in the subnav, through a large graphic in the right sidebar, from the footer, or even from in-text links on several site pages. This makes it easy and convenient for the user to access site functionality, and more effective for Urban Igloo to capture all potential leads.
3) Carry the youthful, casual personality of the Urban Igloo brand into the site design
Starting with it’s name, the Urban Igloo brand has always been associated with words such as youthful, playful, casual, and hip. One of our challenges was to bring this personality into every level of the new site design, which we accomplished in some specific ways.
One of the more subtle but powerful ways to do this is with the font selection and font size. We chose slightly rounder fonts for the site headings that are not as serious as some of the fonts more commonly used, but still blocky enough to maintain a sense of professionalism. We also bumped up the font size throughout the site which makes the site look cleaner and more energetic.
There are several usability benefits to this as well because the site fits more completely on larger screens which are common today, and the text and interface elements are measurably easier to read and use. Website users love having large form fields and buttons to work with.
We also tweaked the site color scheme to be more in-line with the logo, and less blue than the previous design. Blue is a great color for many designs, implying trust and professionalism, but too much blue can become serious and overbearing.
The color blue, along with its implied characteristics, is certainly an important part of the Urban Igloo personality, but it’s a slightly brighter and greener blue than you might find on a banking website, for example. It is also balanced by bright green, yellow, and orange accent colors which add excitement and contrast to the design.
All of this is presented on a mostly white background to keep the design clean, simple, and unimposing. Finally, several design elements such as widespread use of rounded corners, gradients, and shadows add visual interest to the design.
Check out the new Urban Igloo site and let us know what you think!