.
Rockwell Group - Site of the Day 18 Jan 2015

What did you want to accomplish with the site?


For both Rockwell Group and Code and Theory, designing the new responsive rockwellgroup.com was as much a creative exercise in the importance of storytelling in business, as it was about the ever-increasing overlap of digital and spatial design.

Rockwell Group has designed everything from restaurants, to hotels, to playgrounds, to theaters, to grills. Because of that, the firm’s diverse offerings did not fit neatly into defined categories. It didn’t make sense to limit them to a traditional navigation and content structure. We set out to build a site that encouraged endless discovery.
 
Like every Rockwell Group-designed space, there is an underlying intelligence to every section of the website. It acknowledges that spaces and ideas are living, breathing things, and celebrates them in a unique way. For example:

– The “Cabinet of Curiosities” section allows Rockwell Group flexibility to showcase its breadth of services and insights in a non-linear way. It acts as a playground of sorts, where Rockwell Group can showcase different themes around their core beliefs, thought starters, or points of interest.
 
– The content structure and navigation in the “What We Make” section was designed to be a much more intuitive and easy way to help anyone find what they’re looking for, or discover new projects or ideas that they might not have considered.
 
– The project pages focus on the rich story of each space. Rather than start with a straightforward task or challenge, project stories on the new rockwellgroup.com start with a high-level question. For example: "What if your environment transformed with every step?" or "What if a restaurant could vanish at a moment’s notice?" Each part of the project page encourages the user to unwrap and unfold the story as he or she browses through.

– To Rockwell Group, the completion of any project is just the beginning of its life. To celebrate this rich afterlife, we incorporated modules like social media – which can pull in content from Instagram and Twitter to expose users to how the space is being used over time. It also feeds in news articles and announcements.

The site has already ignited a whole new way for Rockwell Group to talk about the work they do, and the impact it has on the world. (369 wds)

What technical challenges did you encounter (and how did you solve them?

We were very fortunate to work with such a highly creative, inspiring and collaborative team at Rockwell Group. We pushed them as much as they pushed us for a wow factor and perfectionism. They were instrumental in being co-creators of the vision and always easily understood our proposed designs.

The site looks simple at a quick glance, but the modular framework is quite complex. The range of options for Rockwell Group to configure some pages – like the homepage and project detail pages – is extensive. In order to showcase different stories as uniquely as possible, we established various versions of the same module, that once assembled together, it gives an unexpected fresh look.

A particular characteristic in the aesthetic of the site is how imagery and typography scale can bring boldness into the design. To implement it, the design and tech team had to meticulously define logic and CSS parameters, finding a good balance between the integrity of the graphic look and flexibility with copy length to avoid breaking the design. Color themes were also critical to allow the same template to feel special for another section and to accommodate different asset colors.

The project detail page is quite robust in module variations and fully-configurable from top to bottom, catering from the richest to the simplest story. Because the design was so intricate on this page, during development we encountered some challenges with some last minute changes in design. In the end, we came to a satisfactory compromise between client, design and tech.

The section “Our Curiosities” has an intriguing and minimalist design. Managing the ordering of the curiosities in the CMS – like “Blue” or “Banquettes” – without breaking the physical space a label could fit in a given box, was quite challenging.

The site is much deeper than you would imagine, with many of the pages discoverable from the landing pages. Keeping these templates as consolidated as possible – in addition to allowing these pages to serve the unique content they required – was a constant problem to solve during the design and development phase.

To support all of this, a powerful and customized CMS was put in place.

What did winning the FWA award mean to you?

The team is extremely pleased. FWA has such a history in cutting edge work and we’re obviously proud to have it featured amongst other high profile projects.

Tools used

For design: Photoshop, Illustrator, InDesign, Adobe Acrobat, Keynote for presentations and prototypes.

For development: A custom CMS was built with a Laravel PHP framework, progressive image loading (lazy-load) for best performance.

Three hot facts

1. David Rockwell’s passion for theater highly influenced us in our overall strategic approach. We came up with a mantra “The story is the stage” as a driving force in how the new site experience and design should ignite storytelling in the best way possible, focusing more on the experience than the object itself.

2. As a rule, Code and Theory rarely provides the client with too many design directions in the initial phase. In this project, we broke a record by providing four unique homepages for the client to choose from. That’s what we call spoiling a client. The best part was the client calling their favorite one “delicious.”

3. The “We Know Hospitality” section was the toughest piece to solve, as we needed to elevate a very large clientele list in an immersive and unexpected design. After a lot of back-and-forth, we landed on the right approach.


Links

hr








All rights reserved © 2000 - 2015 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Cookie Policy -  Advertise -  About FWA -  Contact