Port Exp Homepage.png

Common

 

Introducing coliving - a new way to live

 
 

As Common’s first Design Intern and, for a period of time, their only digital designer, I was tasked with redesigning the coliving startup’s website. Since coliving is still a relatively new type of housing arrangement, designing a website to properly introduce and explain to visitors this concept was a difficult and important task.

 

Common

Fall 2016 – Summer 2017

 
Port Exp.png
 

Initial Problem

Common has outgrown their original website’s design shown below. The global navigation system featuring a dropdown with a list of all our homes was getting way too crowded as we expanded. The product pages detailing each home’s uniqueness and layout weren’t doing enough to sell our amazing housing options. They were way too basic and lacked detailed information someone looking to invest one, two thousand dollars a month would come to expect.

Initial Goal

Redesign the Common website to not only freshen it up and accommodate our new houses but also provide visitors with a simple yet informed experience.

 

Focus

In order of priority

  • Product pages

  • Global navigation

  • Why Common page

  • Home page

 

Process

Common’s site was already pretty extensive and complex so the engineers and I decided to approach this redesign in stages. First tackling the “product pages” or pages explaining each home we had in a number of cities and then focusing on the global navigation which was getting way too crowded. We decided to focus initially on product pages because these pages were the most frequently visited pages on our site and the bulk of our inbound traffic landed on a product page. After we finished the product pages and navigation, we then focused on other pages with less traffic.

As the redesign process was iterative, I normally created a few initial iterations of the page and through design critiques, I would change and tweak them. This normally continued until the team and I were satisfied with the designs, which were then handed off to the engineers. Below I’ll go through the iterations of designs I did for the product pages and global navigation.

 

Product Pages - First Iteration

 
The new above the fold design features a form to capture interested visitors' infomration

The new above the fold design features a form to capture interested visitors' infomration

Pricing chart with descriptions of Common's signature benefits

Pricing chart with descriptions of Common's signature benefits

Description of this home's different living options

Description of this home's different living options

 

Take Away from Design Critique

  • Pricing chart does not highlight the benefits of each living options enough

  • Individual living option sections are too simplified and wordy

 

Product Pages - Final Design

 
The above the fold design retained mostly the same experience

The above the fold design retained mostly the same experience

The new pricing chart now highlights the unique features available to each living options

The new pricing chart now highlights the unique features available to each living options

A new section was added to showcase the features of each home

A new section was added to showcase the features of each home

The description of this home's different living options now feature pricing and other informations more prominently

The description of this home's different living options now feature pricing and other informations more prominently

 

The final design for the product pages feature sections highlighting Common’s unique services, each home’s amenities, the surrounding neighborhood, and different living options in the property. The design is simple yet outlines all the information visitors interested in learning more about Common and coliving would come to expect.

 

Global Navigation - First Iteration

 
The initial navigation redesign tried to showcase all the cities we are in and all our homes at once. We wanted to show our visitors the extensiveness of our network before allowing them to narrow down to the city they are looking for.

The initial navigation redesign tried to showcase all the cities we are in and all our homes at once. We wanted to show our visitors the extensiveness of our network before allowing them to narrow down to the city they are looking for.

 

Take Away from Design Critique

  • Showing all our homes from different cities at once would be confusing to visitors as they would feel overwhelmed

  • Key information were missing for each homes, such as pricing, living options, and amenities

 

Global Navigation - Final Design

 
The final navigation redesign focuses on each cities and the key information of each home

The final navigation redesign focuses on each cities and the key information of each home

 

Navigation is a very important part of any site. At Common, our navigation was extra challenging as it not only helped users get from one part of the site to another, it also functioned as an introduction of the cities we serve and our homes to our users. The final design effortlessly married these two important functions of our navigation, giving the users what they need to know when they need it while helping them navigate our site.

 

Final Thoughts

Redesigning Common’s website was especially tricky as I not only had to create an intuitive and seamless experience, but also introduce a new living concept to the world in a way that makes it easy to grasp and understand. With the new product pages, global navigation, Why Common page, and other pages, Common’s new website is more welcoming, informative, and simple than ever before. The site successfully introduces one to the idea of coliving and informs one about Common’s offerings all while being easy to use and simple to navigate. From this project, I was able to get a deep understanding of what a startup was looking for in the long term from a designer and a redesign. I was able to collaborate and brainstorm with other engineers and stakeholders in the company, allowing me to be apart of the fast pace startup product cycle. I also learned to manage expectations during a long-term design and development project and create a sustainable experience for a startup that is constantly growing and evolving.