Designing a responsive website for RentChirp 

UI/UX Case Study, Summer 2020









Over the summer of 2020, I worked as UI/UX Website Designer at a startup company RentChirp. Joining the design team, I worked closely with Co-founders and engineers and many other UI/UX designers, markerters. My role is to create a quick easy, and informative rental website platform. 



Type:
Website Design


Responsibilities:
Interface Design
Prototyping


Timeline: July–September,2020


Overview

Find great deals on apartments by making them informed renters through easy-to-use tools, data, and analytics.





As a startup digital renting marketplace company, RentChirp serves the rental marketplace by providing users with data and analytics to find great deals on apartments. Our goal is to visualize those functional features to help more people.

In our design team, I was responsive to the overall website design of the product. My other team members delivered IOS and Andriod application. We also designed the style guide together to be cohesive and consistent for different platforms.


Co-Founder Interview


Before we start, the RentChirp co-founders introduced the set of goals and vision. We needed to find a way to get insight into both user needs and business goals. We also learned about the unique tools of RentChirp:

Diving into the market


Leveraging what we’ve learned from competitor companies, there was already a strong foundation for us. We conducted a competitive analysis examining the features and functionalities, and this helped us identify both the strengths and weaknesses of the current rent marketplace searching engines. Our goal is constantly working to improve the search experience through the interface, taxonomy and algorithm improvements.







Journey Map UX Flow


Based on the features narritive, I began to contruct the user experience flow, taking in to consideration the following:

1. Searching for rent apartments
2. Rent Trend chart and Forecasting chart
3. searching filters including ChirpScore feature 
4. Manage favorite apartments and notifications





Wireframe


To visually speak to renters our new features, my focus as a visual designer was engaging renters with clear visual design. I categorized information with cards. Users would be able to have multiple spaces, each with its own configuration of modules, which contain single features, such as rent trends, notifications, or a map.



Low-fidality wireframe overview



Prototyping High-fidality


After figuring out the low-fidelity, I spent weeks on the visual designs with my manager. I also synced weekly with the engineer team and marketing team, so we are all on the same page.

Through several rounds of usability testing, feedback, and user input, we finally came to our final prototype. My design process ended with a fully interactive prototype on Figma. Scroll to see each feature in detail.
 






Searching apartments with ChirpScore

ChirpScore is a unique features of Rentchirp. When searching apartments, filter by only those apartments with a ChirpScore to see only the good deals.  In apartment details page, you can see which floor plan is selected with ChirpScore.





Other filters overview





Dashboard-Favorites

The dashboard is where you can view and manage your favorite apartments and notifications. You can view rent trends and forecasting for favorites. In the list of favorites, you can view some information, set notifications, share and delete each favorite apartment.





Dashboard-Notifications

Set up custom notifications to get alerted when your favorite apartment matches your desired price or get it weekly. In the dashboard, you can see all notifications you set and history tracks.





Set up a notification

You can set up notifications while you view apartments. If you want to add more notification for your favorites, you can set up in dashboard.





Rent trend and Forcasting

Rent trend and focasting are main features of RentChirp. Rent trend can show you how prices are fluctuating over time for apartments and cities. Forecasting allows renter to use RentChirp's machine learning algorithm to forecast upcoming rent prices.



Style guide

To help make more informed design and product decisions, I created a design guide of RentChirp website, which includes Typography, color, and the design ui components.






Challenges & Reflections



RentChirp website will be launched in the next few months, and all design assets were left for use in further productions. Personally, this Internship was a great experience in navigating ambiguous design problems and visualizing data analytics. Due to COVID-19, having to work remotely with co-founders, engineers and design team is a new experience for all of us, but eventually we worked out.


ⒸTaylrZhang 2020