Website Redesign FW20

Project Description

Venue and Menu is the brainchild of Josette Buisson, president and creative director of Alias Color, who believes "brilliant communication message has to be articulated around color." As such, this project is a drawing on some sort of synesthesia where color palettes, design, recipes, and products all revolve around moods and trends.

User Experience

Challenge

The original request from the client was to simply redesign the site to make it prettier and more usable on mobile.

As the conversation evolved, it also became clear that there was a need to showcase curated sponsored content and products to improve the site's monetization.

Investigation

As we investigated the extensive existing content, we noticed its organization was inconsistent. Some sections had landing pages and categories clearly defined, while others just presented the latest post to users, and asked them navigate through a multitude of menus and submenus to find what they needed.

Even in the menus themselves, the naming convention was not always consistent, which could lead the users to drop their search, or to not be able to find to content they saw previously.

The client also wanted to add online shopping to the site, which previously was only a blog. We compared the offerings and Shopify and Webflow for the client.

In order to clarify the site's mission to visitors, we opted to make explicit the site's structure. At first we provided a hierarchical chart and a few wireframes to the client to show them how we were thinking of applying the structure and templates to answer their need.

The client preferred high-resolution mockups to grasp the potential better. Discussions with the graphic designers helped flesh out some components and clarify some needs.

Solution

We defined some content sections that would be permanently present on every page (e.g. header, footer), and some others that would be unique—but mandatory—per template (e.g. a featured article in a category, or the latest articles of that category). Finally, each template would contain a section where content creators could pick from any type of content blocks (e.g. images, videos, text, other content presented as tiles, etc.), a bit like how Medium or the latest version of WordPress allow to edit content.

The main content categories were organized in this manner:

• Magazines: Lifestyle articles
• Cookbook: Recipes
• Lookbook: Articles about styles and color palettes
• Marketplace: Online shopping (planned for a later update)

With tagging, content creators will be able to to link content across the different categories.

The client was really interested in having a mega menu à la Goop as the main navigation. Since navigation menus that appear on mouse hover are not great for accessibility, a compromise was reached by ensuring that each category should have its index page, which would act as a table of contents. This way, keyboard users could always access the content presented in the mega menu.

The designers wanted the flexibility to change the colors per post, so that they could bring more personality to those posts. Akin to how iTunes or the Switch Nintendo Store work, we suggested that brand guidelines (e.g. fonts, spacing, etc.) be solidified first. With that in hand, it would be possible to apply arbitrary colors to a post, while retaining the layout. This would also ensure that visitors still understand they are on the same site, even if colors are different per post.

On the technological side, the client settled with Webflow, as their need was mostly content creation, with some ecommerce.

Credits

• Strategy: Gisela Sleizer, Marie Dubeau-Labbé
• UX Design, Information Architecture: Mat Janson Blanchet
• Technical Direction: Baptiste Laget
• Development: Jérôme Lin
• Art Direction, Design: Josette Buisson, Ian Chouinard, Annie St-Arneault
• Project Management: Marie Dubeau-Labbé

All copyrights and products belong to their respective owners.