housemouse and Homepage –
Design in collaboration

housemouse is a Melbourne-based graphic design studio founded by Nancy Bugeja and Miguel Valenzuela. This skilled pair have formed a team that is passionate about graphic design and focused on collaborating with client partners to achieve successful, creative outcomes in design.

Heading into a new period of growth, housemouse has recently expanded, moved offices and taken on major clients such as the Australian Red Cross and the City of Glen Eira. It now needs to stay abreast (and ahead) of current trends and showcase its concepts and brands to clients and potential customers.

Background

In 1996, Nancy and Miguel established housemouse from humble beginnings: “a Mac, a desk, 2 chairs and $30 in the bank”. Since then the company has gone from strength to strength, moving from Nancy’s home to Fitzroy, Collingwood and most recently Flinders Lane in Melbourne’s CBD, and employing a team of talented designers and support staff.

In addition to their client partnerships, housemouse have also launched their own award-winning in-house projects, such as the bi-annual design magazine Fluoro and the Wrapped by housemouse™ line of wrapping paper.

With success came the need to push their boundaries and set new benchmarks, and Nancy and Miguel decided that it was time to update housemouse’s website.

While the existing website had been sufficient for several years, it didn’t do enough to showcase housemouse’s innovative designs or incorporate current design styles. The studio wanted something bold, modern and imaginative, that would intrigue and tantalize visitors and demonstrate their position in the forefront of the graphic design industry.

In February 2008, housemouse joined forces with Hawthorn-based web designers Lava Web Creations to develop a new website - one that would showcase the studio’s talents and expertise and allow them to embrace the latest web technology and design trends.

Objectives

Even before collaborating with Lava Web Creations, the housemouse team spent a significant amount of time deciding what the new website needed to achieve. They also spoke to stakeholders, including past and potential clients, to determine what features of the previous website they liked and what features and functionality they expected from a state-of-the-art design site.

From this process, the housemouse team identified the key objectives of the new site and of the design project:

Showcase housemouse’s talents and expertise in the field of graphic design
Reflect the ethos and passion of the housemouse team
Demonstrate that housemouse understood and embraced the latest technology and design trends
Create a site with a design that visitors had not seen anywhere before
Communicate housemouse’s capabilities to new and potential clients through the site’s look and functionality
Structure information and images in an imaginative and creative way, without affecting the site’s functionality or making it difficult to navigate
Intrigue visitors with the site’s functionality
Provide a call to action for people to contact housemouse in various ways, whether online or face-to-face

With these objectives in place, the housemouse team then looked at development partners, looking at several web design specialists before choosing to collaborate with Lava Web Creations on making their ideas take form.

For the Lava designers, the aim was to communicate the objectives and goals of the housemouse design using modern, innovative web programming. In particular, the challenge was to approach the concepts of user interactivity in new and exciting ways that increased visitors’ engagement with the site.

Throughout the process, the importance of design was emphasized as integral to the success of the site – a site that would not only represent a graphic design studio, but be created using modern visual and technical principles of web design. The final site would be a collaborative design piece that showed off the skills of two complementary design disciplines.

Solution

With the design objectives finalised, the two companies established a collaborative project team, involving three designers from housemouse and two developers from Lava Web Creations. Together, the team determined exactly how to create a daring, unconventional website that used all the strengths of both firms.

The Lava developers created the site’s technical infrastructure, using Flash animation for movement through the site and to communicate the content. Meanwhile, the housemouse designers decided on the final structure and content of the site, designing each page as it was incorporated into the final product.

The team set goals, schedules and milestones for the four-month-long process, and made sure they were met, but remained flexible enough to trial a number of new ideas and technologies, some of which were incorporated into the final design.

Website overview

The finished site takes visitors on a unique journey through housemouse, one that is unashamedly designed to make users switch on the left side of their brains and make intuitive, spontaneous decisions to navigate and find information.

housemouse The site opens with a jumble of letters and numbers that cycle randomly through colours and combinations as the rest of the site loads. This was one of the most technically challenging pieces of design for the Lava developers, requiring specially hand-written code.

As the site finishes loading, the symbol jumble settles into a menu of letters and numbers, while an information panel opens up on the left side of the screen. Meanwhile, the right half of the page becomes an animated display that showcases housemouse’s design projects, starting with the Wrapped by housemouse™ line of wrapping paper, as a crumpled ball of paper rolls onscreen,
opens up and shows the visitor just what to expect from the product range.

From this point, the site has fully loaded and the layout of the page and menu is set. Although the menu does not change, it’s still not obvious what effect selecting a letter or number will have; the visitor must experiment intuitively with the menu to get results. (There is a linear menu in the footer of the page, but it’s not the focus of the design, and has a much more limited range of options.) This flexible, playful design keeps users engaged and
motivated to discover more about housemouse’s designs and projects.

The left-hand information panel shows off another unusual feature – a horizontal control bar that allows the user to vertically scroll text. The Lava team based this system on the retro movement of an old slot machine, and the disconnect between the user’s mouse movement and the text’s movement further encourages experimentation and play.

As the user mouses over the menu, each letter changes colour, slowly fading as the mouse moves on. There are 12 sub-pages accessible from the menu, each of which provides information on an element of housemouse’s operations and ethos:

Calendar (‘8’) – upcoming Melbourne events, particularly those relevant to the design industry
Contact (‘C’) – contact information for the company, including an animated map of how to find their Flinders Lane office
Environment (‘E’) – housemouse’s focus on environmental sustainability
Fluoro (‘F’) – information and images from Flouro, housemouse’s magazine of design and sustainability
Inspiration (‘I’) – a guide to the products, people and ideas that inspire the housemouse team
Journey (‘J’) – the story and history of housemouse, from founding to the current day
Mission (‘M’) – the company’s mission statement
News (‘N’) – new projects, events and discussion points
Profile (‘P’) – a profile and interview with housemouse founder Miguel Valenzuela
Release (‘R’) – press releases and media appearances
Stuff (‘S’) – a range of links for Australian and international design industry sites
Work (‘W’) – a portfolio of finished projects that showcases housemouse’s range and style. This extensive section includes a second horizontal scroll bar, allowing the user to view the different projects and see multiple images from each one.

Results

The new website is, in the words of Nancy Bugeja, “Brilliant, it looks absolutely fantastic!” The site is memorable and lively, an accurate reflection of housemouse’s personality and culture. As well as being eye-catching and engaging, the site shows off the studio’s work and projects, giving potential clients a clear vision of the skill and expertise housemouse can offer them.

The site has only been online for a few months, so it’s difficult to determine how effective it has been in attracting and capturing new clients, but the overall feedback from users has been extremely positive. Existing clients have been ‘dazzled’ by the site, and drawn in by its playful, unconventional layout and navigation. Nancy sees the site’s success as vindication of housemouse’s policy of careful, thoughtful planning before each project.

In addition, the new site has allowed housemouse to expand the scope of its activities and its position in the industry. By displaying and promoting in-house brands such as Flouro and Wrapped by housemouse™, the site has opened up new possibilities for online marketing and commerce, which may lead to further expansion and business for the studio – in fact, housemouse has already commissioned a sister site from Lava Web Creations solely to showcase the Wrapped by housemouse™ line. And with its links, calendar and news, the site is proving to be an information portal that clients repeatedly visit to stay connected with the graphic design industry, which gives housemouse even greater visibility and influence.

One other benefit of the website design project was the insight it gave the housemouse graphic designers into web design. “This project has given everyone at housemouse a far better insight into how a website is developed, and how it impacts a visitor’s company perception,” said Nancy Bugeja. “Like many companies, we thought our previous website was up to the job, only to discover new opportunities, ideas and technologies.” These insights are sure to influence any future housemouse projects that have online aspects or components, and to improve the development and expansion of the housemouse site as the studio explores the new online arm of its own business.

Click here to download the housemouse and Lava Web Creations case study.