PM, 4 people Dev team.
UX/UI Designer
8 Weeks (July.2019 - Sep.2019) for design.
Launched in Oct.2019
Long -term rental is the core service of Yirental. In this project, I individually completed the website design of this feature from end to end. Meanwhile, I initiated a responsive design system to guide the website's future responsive design.
Yirental is a digital platform that offers users rental and living solutions at the local community. The mission is to build the most-trusted, high-quality, and professional rental network based on social connections. Since 2017, Yirental has become the biggest rental platform for the Chinese hosts, students, and young professionals who dwell in North America. Currently, it has more than 100,000 registered users and 150,000 app downloads.
The product strategy of Yirental is mobile-first. With quantitative data supporting that more users were visiting and looking for rental resources from Yirental through the website, we made the decision to design a responsive website to meet uses’ needs. We had launched Website V1 which only included the vacation rental service. In this project, we planned to design Website V2. As an only designer in this project, my scope included:
Compare to starting a new feature from scratch, moving an existing feature from mobile to website has different design constraints. From my understanding, they included:
To achieve this goal, the first action I took was to carefully walk through the app step by step and tried to understand different use cases.
Goal: Find potential candidates for the rental property
Flows in this use case:
Goal: Find an ideal rental property matching their needs
Flows in this use case:
Based on the use cases I identified from the previous step, I mapped out user flows that fit the website platform and were consistent with the flows in App.
I would like to share two key flows in different use cases as follow:
I want to create a rental listing!
I want to finding my next ideal home
After figuring out the flows, keeping consistent visual language is my next design challenge.I carefully reviewed font, color schemes, button, card tile, spacing, and other design components in the design system. And integrated the visual language into the new feature.
Adding a new feature to an existing design also required me to take integration into account. For here, I would like to share the process of how I redesigned the homepage to adopt the new feature.
Navbar with no background color which is not flexible to fit for different hero images
Search Bar only designed for vacation rental
Content layout didn't consider the viewpoint.
( 100VH line cut through image)
The banner caused friction for scroll reading
Add background color to Navbar to provide more flexibility for hero images
Add a search bar option for longterm rental listings
Add a shortcut entrance to adopt new features
Adjust the spacing to make the content layout fit for the viewpoint
Add promoted Long-term rental listing section
Change three - column images to
four-column images to improve information density.
Iteration is always my favorite part of the whole design process. We did four rounds of iteration based on user testing feedback and internal reviews. Here, I want to share some of the challenges along the process and my design rationale behind it.
After reviewing standards across the website and having discussions with the dev team, I set up our responsive layout grid.
To help the product have a consistent responsive design, I also build up some standard responsive UI components and layouts.
To make sure the design could be correctly implemented, I set up redline standards and shared it with other designers.
.svg){kind=small}
