U31_Intro_Banner

U31.co Website

U31.co Website

U31.co Website

U31 is an award-winning interior architecture and design studio based in Toronto. With a diverse portfolio, their projects include high rise buildings, private residential and presentation galleries. 

Visit the live website: 

U31 is an award-winning interior architecture and design studio based in Toronto. With a diverse portfolio, their projects include high rise buildings, private residential and presentation galleries. 

Visit the live website: 

U31 is an award-winning interior architecture and design studio based in Toronto. With a diverse portfolio, their projects include high rise buildings, private residential and presentation galleries. 

Visit the live website: 

U31 is an award-winning interior architecture and design studio based in Toronto. With a diverse portfolio, their projects include high rise buildings, private residential and presentation galleries. 

Visit the live website: 

Duration

Duration

Duration

Duration

6 Months, 2019

6 Months, 2019

6 Months, 2019

6 Months, 2019

Role

Role

Role

Role

Web Designer
UI/UX Design

Web Designer
UI/UX Design

Web Designer
UI/UX Design

Web Designer
UI/UX Design

tools

tools

tools

tools

Adobe Creative Cloud
Sketch + Principle

Adobe Creative Cloud
Sketch + Principle

Adobe Creative Cloud
Sketch + Principle

Adobe Creative Cloud
Sketch + Principle

Interested in how this project was created?

Interested in how this project was created?

Interested in how this project was created?

RESEARCH

RESEARCH

RESEARCH

Redefining the goals

Redefining the goals

Redefining the goals

Problem

Problem

Problem

U31 approached Office/Bureau to create a website that has a fresh, yet timeless aesthetic and presents U31’s work to their target audience beautifully. The end goals of the project were to communicate the brand’s positioning and promote deeper understanding of U31’s expertise with a clear and intuitive user experience. 

U31 approached Office/Bureau to create a website that has a fresh, yet timeless aesthetic and presents U31’s work to their target audience beautifully. The end goals of the project were to communicate the brand’s positioning and promote deeper understanding of U31’s expertise with a clear and intuitive user experience. 

U31 approached Office/Bureau to create a website that has a fresh, yet timeless aesthetic and presents U31’s work to their target audience beautifully. The end goals of the project were to communicate the brand’s positioning and promote deeper understanding of U31’s expertise with a clear and intuitive user experience. 

Ideation & Site Architecture

Ideation & Site Architecture

Ideation & Site Architecture

The site architecture for the website was kept simple to allow users to get to their desired destination in the least amount of time possible. 

The site architecture for the website was kept simple to allow users to get to their desired destination in the least amount of time possible. 

The site architecture for the website was kept simple to allow users to get to their desired destination in the least amount of time possible. 

U31_SiteArchitecture

Wireframing

Wireframing

Wireframing

The wireframes went through three different iterations before finalizing the creating the final mockups of the website.

The wireframes went through three different iterations before finalizing the creating the final mockups of the website.

The wireframes went through three different iterations before finalizing the creating the final mockups of the website.

Works 1
About-Principal Bio 1
u31-Background-graphics

Challenge

Challenge

Challenge

Why redesign

    the old website?

Why redesign

    the old website?

Why redesign

    the old website?

Why redesign
the old website?

Why redesign the old website?

Visually, the U31 website did not match the clean, sophisticated look that the brand and their work represented. The performance of their website was slow and the overall the user experience needed to be more effective and engaging to allow users to interact with their projects.

Below are screenshots of the previous iteration of the U31 website:

Visually, the U31 website did not match the clean, sophisticated look that the brand and their work represented. The performance of their website was slow and the overall the user experience needed to be more effective and engaging to allow users to interact with their projects.

Below are screenshots of the previous iteration of the U31 website:

Visually, the U31 website did not match the clean, sophisticated look that the brand and their work represented. The performance of their website was slow and the overall the user experience needed to be more effective and engaging to allow users to interact with their projects.

Below are screenshots of the previous iteration of the U31 website:

Final deliverables

Final deliverables

The New U31.co

The New U31.co

The new redesign was created to feel like an elevated version of the existing brand. We wanted to convey a sense of familiarity with the old website, but with a modern feel and micro-animations. 

The new redesign was created to feel like an elevated version of the existing brand. We wanted to convey a sense of familiarity with the old website, but with a modern feel and micro-animations. 

U31-HomePage-3-2
U31-MicroAnimation-2

Micro-animations

Micro-animations

To make the website more engaging, animations were added throughout the website. Upon arriving on the website, the logo is animated to greet the user. Additonally, scroll-triggered animations were added between each featured project on the home page.

To make the website more engaging, animations were added throughout the website. Upon arriving on the website, the logo is animated to greet the user. Additonally, scroll-triggered animations were added between each featured project on the home page.

To make the website more engaging, animations were added throughout the website. Upon arriving on the website, the logo is animated to greet the user. Additonally, scroll-triggered animations were added between each featured project on the home page.

Improved Visual Language

Improved Visual Language

Throughout the website, a new visual language was introduced to help bring a continuous feeling throughout their portfolio. The icons were created to work with the existing visual identity.

Throughout the website, a new visual language was introduced to help bring a continuous feeling throughout their portfolio. The icons were created to work with the existing visual identity.

Icon-Image
Icon-Stack
Icon-Mail
Icon-Docs
Icon-Contact
Icon-Select
Icon-Nav
Icon-Parking

New Search Filter

New Search Filter

A filter was added to this page to help the user look for a specific project. Users would be able to hover over each project to see a preview image. 

A filter was added to this page to help the user look for a specific project. Users would be able to hover over each project to see a preview image. 

Portfolio-Overlay-Expanded 1

Interactive Timeline

Interactive Timeline

We developed an interactive timeline that allows the user to scroll-through all of U31’s awards and press releases. Instead of clicking on each item, more details become available when the user hover’s over a title. If the recognition has an external link, it is provided in the text.

We developed an interactive timeline that allows the user to scroll-through all of U31’s awards and press releases. Instead of clicking on each item, more details become available when the user hover’s over a title. If the recognition has an external link, it is provided in the text.

U31-InteractiveTimeline-2

Say Hello!
Let's create something beautiful together.

Say Hello!
Let's create something beautiful together.