Goals and background
Docomomo is an international brand, but needed a US-based website to form the foundation of their United States presence. I was thrilled with the opportunity to partner with a client so dedicated to modern design and architecture, because those same principles are what inform our own design operation. It was going to be a fun project, though not an easy one.
Our goal was to make their website as dedicated to design modernity as they were. This meant an improved navigation, pieced together through responsive and intuitive visual elements. We also wanted to create distinct and beautiful functionality that would make it easy and fun for users to discover new buildings and pieces of content. Categorization would also be highly visual and design-focused.
Docomomo
Building an Architecture Brand’s Foundation
Docomomo US is an organization dedicated to preservation and advocacy for modern architecture. They provide thought leadership, education and documentation of modern design principles at work, and illustrate their importance within culture and history. In essence, you couldn’t have picked a more perfect client as I often focus on designing websites with an emphasis on modern functionality and aesthetics. Needless to say, I was excited to work with them.
My role
UX & UI designer
Managed engineering team to build website
Coordinated both Visual Quality Assurance and Functional Acceptance Testing
Client acquisition & relationship
Development
Year
2017
Research brand and content
Docomomo’s main audience is professors, students and architects with an interest in modern design with an interest in modern design. So, I wanted to design a brand identity and look and feel that was clearly inspired by that design aesthetic. Visually, I was inspired by midcentury advertising, and used it as a jump off point to create a distinct visual identity for Docomomo’s US operation that could truly come to life on their website.
I also knew that the content needed we wanted to share and the message we wanted to promote couldn’t just be a collection of photos of modern design examples. The Docomomo brand needed to be built around modern design appreciation and advocacy in action, making them a thought-leader and a dynamic force. Through this lens, I sought to make information on buildings in danger, designer profiles, events and lectures easily accessible for users. Ultimately, I wanted the brand to stand for loving modern design as a consistently actionable item.
Define high level functionality and requirements
Now that we knew what kind of content we’d be working with and what purpose that content would serve, I could begin deciding which kinds of functionality would best bring that content and the entire experience to life.
Interactive map
Submission capabilities for buildings you love or want to protect
Feature promotions and distinct layouts
Highly flexible widget system
The biggest piece of low-hanging fruit on a website based around physical structures was the development of an interactive map. While it may have been obvious that a map was something we needed to create, the final product was anything but simple. Our interactive map was designed to have just as much pure functionality and beauty as the buildings it featured.
Map
One of Docomomo’s principal goals is activism through the preservation of modern architecture, so in order to help our users get involved, we needed to make it easy for them to know which buildings were in danger. Filters were used within the interactive map’s functionality to allow them to not only locate buildings near them, but buildings that needed their help. The filters also highlighted buildings that had successfully been saved and paid tribute to buildings that had been lost.
Categorize building and expand contents
Knowing that we would be speaking to fellow design nerds, we were encouraged to push the boundaries on what an interactive grid layout could be capable of. We worked a lot with negative space, a key tenet of modern design, and used it to create dynamic and distinct widgets. Beautiful photography of beautiful modern buildings was used to consolidate the layouts, while maintaining a sophisticated and minimalist tone.
Visual design
color palette
Two words defined our search for the perfect color palette: sophistication and minimalism. The palette we ended up with was tailored to the aesthetics of modern design, but also well-suited to the needs of a highly-responsive, widget-based website. There needed to be a range of tones and temperatures, but with a clear cohesive story being told. That story was a commitment to modernization that is grounded in understated grace.
orange
hex F8642F
light gray
hex F2F2F2
medium gray
hex D4D4D4
black
hex 242424
blue
hex 92D4EB
stone
hex 7B8996
Typography
Docomomo’s main font was Futura, so we sought out searching for one that would compliment that aesthetic, but infuse a bit of academic elegance. We ended up selecting Baskerville, a classic font that offered a perfect contrast to the more playful, modern qualities of Futura.
The macro experience
Once we developed the basic foundation for the content and small details of the site, it was time to zoom out and start visualizing the user experience and journey.
High fidelity wireframes were crucial throughout this design process. We built several prototypes, and through ongoing interactions with the client, we arrived at a user experience that perfectly suited their needs and the needs of their users.
Wireframes
Sitemap
When you first start with a project, you need to get down to the core guiding themes that will inform all of the pieces that break out to create the content and the user experience. So we started with the smallest elements of the project and the little details.
We focused our efforts on consolidating the site’s navigation and building bold widgets that would serve to support and highlight the beauty of the modern architecture featured on the site. The content itself was the biggest inspiration behind the site’s development, as both needed to support each other aesthetically and functionally.
The micro structure
