Heather Moore

401 Richmond Website

Responsive website redesign for the art-and-culture hub of Toronto.

UX/UI

Web Design

Overview

Urbanspace wanted to redesign their 401 Richmond website to promote the building and its tenants. The goal was to inspire the public to view 401 Richmond as a destination, resulting in more foot traffic. Along with engaging the public, Urbanspace wanted to provide a user-friendly space for tenants to promote and upload events.

Problem

It was important to Urbanspace that the 401 Richmond brand was maintained, and the website was made accessible and exploratory, engaging users on all devices.

Outcome

An accessible and engaging experience for the public and tenants and immediately increased the website’s usage.

Info

Role

Design Lead

Activities

Workshops, Information Architecture, Wireframes, Art Direction, Visual Design

Tools

Sketch

Deliverables

Website

Status

Shipped

401 Richmond Existing Assets

Image: 401 Richmond print materials and building exterior and interior images.

Design Process

Before starting the design, we ran several workshops with the Urbanspace team to determine the needs and wants of all users, the struggles with the current site, and the ideal creative direction.

Image: 401 Richmond artifacts and sketches, and workshop question slides.

The information architecture of the site was integral to its success. I organized the site to bring focus to events, tenants, and services to shine a light on the building and its many positive attributes that the public could take advantage of.

Image: Information architecture diagram displaying the organization of the new 401 Richmond site.

With the information architecture in place, a low-fidelity prototype was created using Axure to establish patterns, interactions, and break points.

Image: Wireframes for home and events pages in large and small screen sizes, and tenants listing page in large screen size.

I created two visual design concepts to demonstrate different approaches for the new website. Urbanspace ultimately decided a people-focussed approach would provide a more engaging experience and give the feeling of 401 Richmond as a destination in downtown Toronto.

Image: Creative concept exploration for the 401 Richmond events page.

With the chosen creative concept in mind, I explored design patterns and finalized them through visual design mockups. Mockups were created for 15 pages, in large and small screen sizes.

Image: Visual design mockups for the home and events listing pages in large and small screen sizes.

Image: Visual design mockups for edit account and tenant listing pages in large and small screen sizes, and visit page in large screen size.

Throughout the production of the visual design mockups, I created a style guide to aid with development and ensure a truly accessible end product. The style guide would also help in the creation of future pages to maintain a cohesive experience.

Image: Selected 401 Richmond style guide elements.

Project Outcomes

The 401 Richmond website achieved its goals through an accessible, responsive, and engaging experience. The new design blends seamlessly with the print materials, allowing for a cohesive brand across all channels. Once the site had launched, tenants immediately began populating events to display on the site, proving to be a user-friendly and enjoyable experience for all users.

Reflection

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

New Technology

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Quick

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Limited User Research

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Back to all work

Let's work together.

Contact me