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. Because the site was already pretty extensive and complex, 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.
Type of work
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.
Original product page's pricing chart
Original global navigation
Redesign the Common website to not only freshen it up and accommodate our new houses but also provide visitors with a simple yet satisfying, informed experience.
In order of priority
- Product pages
- Global navigation
- Why Common page
- Home page
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
Pricing chart with descriptions of Common's signature benefits
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 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
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.
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
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.
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.