CitySpade Project

pic
Rebranding CitySpade
PROJECT LINK: www.cityspade.com

When I first join CitySpade, the company was transforming from a rental search engine to a rental brokerage firm, so the original website has to be taken down. The company requested to build a new website based on the new mission. However, when I assessed the old website, I found the company didn't have a clear style guide, due to the lack of a brand identity. That being said, the whole system was based on a logo and two colors: primary color and white. I was going to build a visual system based on the old logo, but during my research, I found:

1) The company's target audience are international students and young professionals from 18 to 26 years old and the primary color and any color palete developed based on it are way too sophisticated to the audience;
2) The elements in the logo are difficult to apply in other conditions, for example patterns, seperators, etc.
3) The logo need to represent the new identity of the company, which is a one-stop rental firm, providing rental, moving, furniture purchasing, and membership discount services.

pic
The Old Logo
pic
The Old Application
pic
The Old Landing Page

Through the redesign, I kept the wordmark, but changed the typeface to Gilfoy, which has many similarity to the orinal typeface Avenir, and make some shape changes based on the orginal logo, the spade, triagle, and location mark shape. I kept the teal and navy as the primary color, but modified them to high contrast, sharper teal and navy. I developed a logo based on the c in the wordmark, and filled in different patterns indicating different services.

pic
The New Wordmark
pic
The New Logo with Wordmark
pic
Elements
pic
Pattern Use
Website Redesign

After I developed the new brand identity, I started to work on the website redesign. I was facing two major problems: 1) the website structure was not clear, with redundant pages presenting overlaped information; 2) the database of the website was fetched from a company only provide free services to noncommercial use. Therefore, after the company transformation, the database need to be re-constructed by the company itself. I, as the lead designer and product manager, was taking the lead of the whole project, went through the process of analyzing content inventory, developing persona and senario, developing sitemap, designing wireframe and high fidelity prototype, leading user testing, finishing style guide and annotation.

pic
The Process of Redesigning The Sitemap
pic
The New Sitemap
pic
The Wireframe
pic
The New Landing Page
pic
The New Homepage
pic
The Facebook Cover
pic
The Facebook Design
pic
The Wechat Design