Anova Website

Information Architecture
Creative Direction
UX Design
UI Design
Copywriting

I love watching clients evolve and bring their vision to life. For me, this is one of the most fulfilling aspects of designing things for a living. As years pass, trust develops, communication becomes more fluid, and I get to witness how my work (hopefully) informs and enriches the client’s audience.

I’ve had the pleasure of working with Anova on three strategic initiatives. During that time, their brand has completely changed. When I first met the team (then known as Landscape Brands), they were a catalog-driven company known for comfort and quality, but not design. They wanted to maintain these values while becoming a design leader and forming stronger relationships with landscape architects.

Our first project was an industry-first iPad app in 2012. This was a new way for Anova to show their commitment to design rather than saying it outright. We created a calm, inviting interface where landscapes sprawl and people can mix and match benches, tables, chairs, and more. Later that year, we redesigned their print catalog. In addition to product photography and specs, we added an editorial layer. I approached design professionals and asked them to talk about a product they love, and why they love it. Selections ranged from dining room chairs to Mini Coopers. Themes of longevity, craftsmanship, purpose, and integrity emerged. The interviews were distilled into short essays that break up the product-centric content and invite reflection.

By 2015, Anova was ready to redesign their website. We wanted to strengthen the company’s position as creative leaders and problem solvers through more frequent blog posts and case studies. We wanted to build an interface that was more in tune with their audience’s needs, and that would generate new conversations with Anova’s sales team. Video and responsive design would work together to make the site feel alive and expansive. Our look is warm and minimal, influenced by the American modernism of Charles and Ray Eames. Above all, we wanted to show that Anova designs products for people that are built for life.

Our design solution is a sort of hybrid website: part digital catalog, part portfolio. The case study approach feels familiar to landscape architects and resonates with their needs.

This work was done in partnership with Grain. I led the design process from creative brief through information architecture to design iteration, wrote and edited copy for select pages, and collaborated with developers as the site was built. This is the largest website I’ve worked on to date, and it was a full-team effort!

Anova_Home11Anova_Home11
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

Product filters

One of our biggest UX challenges was determining how to filter products in a way that would accommodate a range of scenarios. Anova products are organized by two groups, four portfolios, and around thirty collections and counting. But customers in search of particular products might only be looking for benches, or perhaps their focus is on materials, and they’re interested in seeing Anova’s range of bamboo or recycled plastic products.

Our solution was to design toggle states that allow users to switch between filter types without being forced to visit a new page every time. This allows customers to either go down a level to a collection overview, or to go straight to a specific SKU’s page.

We also created an ever-present search tool that serves up results in the same grid-based format as product overviews.

Collections

Collection overviews function as landing pages for related groups of products. From full-screen outdoor photos, customers can toggle between product categories, navigate directly to a particular SKU, and view complimentary collections that suit design directions ranging from classic to quirky.

Anova’s corporate color palette uses green, white, and shades of gray. In order to add variety and create distinction between the two main product groups, we added blue and purple hues for Impressions and Foundations, respectively.

Anova_Coll_1Anova_Coll_1

Product pages

These pages are the heart of Anova’s website, and as such they needed to be highly functional and easy to use. At any screen size, customers can change swatch colors in real time; download and share images; access SKU-specific resources; and view related beauty shots.

A design challenge we faced was that while images of new products are being prepared for today’s high-resolution screens, many older product images were not optimized, and to update them would have been an arduous process. Instead, we designed the color changing images in such a way that the old, smaller images would fit without appearing too small.

Anova_Detail_1Anova_Detail_1

Anova’s value proposition

Key information about the company was scattered across numerous pages in the previous website. We took advantage of the opportunity to reorganize, consolidate, and streamline everything that potential customers, employees, and partners would want to know about Anova’s background and value proposition. We brought several preexisting pages together within the About page, and created an all-new page called The Anova Difference. On the About page, we began with mission and moved into the details of Anova’s design, engineering, manufacturing, and fulfillment capabilities. The Anova Difference is their sustainability story, which is all about the long view: designing and building products that will last for decades.

View the full website at anovafurnishings.com.

Anova_About_Diff_1Anova_About_Diff_1

Next project: Siba

[unex_ce_button id="content_rux9jkag8" button_text_color="#201453" button_font="custom_one" button_font_size="20px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#f1eeea" button_padding="17px 30px 17px 30px" button_border_width="1px" button_border_color="#201453" button_border_radius="0px" button_text_hover_color="#201453" button_text_spacing_hover="1px" button_bg_hover_color="#fc5158" button_border_hover_color="#fc5158" button_link="http://mattsteelmakes.com/index.php/branding-design/" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]View all work[/ce_button]

Sign up for Love Letters, my monthly email. You’ll receive new articles and/or poems in each issue, plus the occasional case study.

[unex_ce_mailchimp id="content_timk6m8i6" placeholder_text="Email Address" alignment="center" button_position="inline" button_spacing="0" input_placeholder_color="#a8a19b" input_width="span4" input_text_align="center" input_text_color="#fc5158" input_bg_color="#ffffff" input_padding="20px 30px 20px 30px" input_border_width="1px" input_border_color="#c7beb7" input_border_radius="0px" input_placeholder_color_mouseover="#201453" input_text_color_mouseover="#201453" input_bg_color_mouseover="#ffffff" input_border_color_mouseover="#201453" input_font_size="20px" input_font="custom_one" button_text="Giddyup" button_text_color="#ffffff" button_font="custom_one" button_font_size="20px" button_text_spacing="0px" button_bg_color="#201453" button_padding="20px 30px 20px 30px" button_border_width="1px" button_border_color="#201453" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#fc5158" button_border_hover_color="#fc5158" has_container="1" in_column=""]//mattsteelmakes.us4.list-manage.com/subscribe/post?u=cb10baea5311367f985ff933e&id=696a4ca86b[/ce_mailchimp]

No spam, no fluff