PigRent
PigRent
Optimize the renting process through the interface, providing landlords and tenants with a brand new user experience.
Optimize the renting process through the interface, providing landlords and tenants with a brand new user experience.
Execution time
September 2017 - May 2019
September 2017 - May 2019
Product usage platform
Web
Web
Use tools
Sketch, Axure, Principle, Zeplin
Sketch, Axure, Principle, Zeplin
Service Company
Jiahao Technology
Jiahao Technology
Background
Background
Taiwan's housing prices are soaring, and the demand for rental housing is increasing. According to statistics from the Ministry of the Interior, in 2017, there were approximately 3 million people in need of rental housing, accounting for about one-eighth of Taiwan's total population. Most people rely on online platforms or social media to find homes. PigRent aims to provide landlords and tenants with an easy-to-use, reasonably priced, and time-saving rental platform, offering users a brand new rental experience.
Taiwan's housing prices are soaring, and the demand for rental housing is increasing. According to statistics from the Ministry of the Interior, in 2017, there were approximately 3 million people in need of rental housing, accounting for about one-eighth of Taiwan's total population. Most people rely on online platforms or social media to find homes. PigRent aims to provide landlords and tenants with an easy-to-use, reasonably priced, and time-saving rental platform, offering users a brand new rental experience.
Contribute
Contribute
I collaborated with two other designers and participated in the product design process from start to finish, responsible for early competitor analysis, defining the product architecture, as well as defining the Design Guide, interface design, and prototype production, working with stakeholders and front-end and back-end engineers in development.
I collaborated with two other designers and participated in the product design process from start to finish, responsible for early competitor analysis, defining the product architecture, as well as defining the Design Guide, interface design, and prototype production, working with stakeholders and front-end and back-end engineers in development.
Project Challenge
Project Challenge
Improve landlords' experience in listing properties
Improve landlords' experience in listing properties
For landlords' user experience, our goal this time is to improve the way listings are published and simplify the charging methods. By breaking down the data and improving the interface design, we hope to present complex information in a more user-friendly and readable way.
For landlords' user experience, our goal this time is to improve the way listings are published and simplify the charging methods. By breaking down the data and improving the interface design, we hope to present complex information in a more user-friendly and readable way.
Enhance the tenant's experience in searching for rental properties.
Enhance the tenant's experience in searching for rental properties.
Regarding the tenant's experience, we hope that users can easily find a suitable place to live in the most relaxed way. By utilizing 360-degree and 720-degree imaging support technology, we aim to reduce the discrepancy between photos and reality, while providing better and more accurate search services to speed up the house-hunting process.
Our customers originally relied on various apps within the Shopify App to meet their customized service needs. However, there may be mutual constraints between each app or with Shopify, which prevents customers from creating the best sales experience to achieve the highest sales.
Our customers originally relied on various apps within the Shopify App to meet their customized service needs. However, there may be mutual constraints between each app or with Shopify, which prevents customers from creating the best sales experience to achieve the highest sales.
The first step is to start with understanding the users and competitors 🤓
The first step is to start with understanding the users and competitors 🤓
Competitive analysis 📑
Competitive analysis 📑
User analysis from different perspectives
User analysis from different perspectives
Competitive analysis 📑
Competitive analysis 📑
Analysis of other competing products
Analysis of other competing products
Discover needs👀
Discover needs👀
Define three major design opportunities through competitive analysis.
Define three major design opportunities through competitive analysis.
A simple and easy way to post.
A simple and easy way to post.
A simple and easy way to post.
Most platforms use a single-page form, but a lot of information is actually required when listing a property. When users first enter the page, they often feel overwhelmed with information and don't know where to start entering. If they are not professional landlords, they may feel frustrated at this step of the process.
Most platforms use a single-page form, but a lot of information is actually required when listing a property. When users first enter the page, they often feel overwhelmed with information and don't know where to start entering. If they are not professional landlords, they may feel frustrated at this step of the process.
Most platforms use a single-page form, but a lot of information is actually required when listing a property. When users first enter the page, they often feel overwhelmed with information and don't know where to start entering. If they are not professional landlords, they may feel frustrated at this step of the process.
A simple and easy-to-understand website layout
A simple and easy-to-understand website layout
A simple and easy-to-understand website layout
Rental housing platforms often have various types of advertisements, including full-screen ads, which can be quite bothersome for users. Besides feeling overwhelmed, users may struggle to quickly find the features they need or even suitable listings, potentially increasing the likelihood of users leaving the platform.
Rental housing platforms often have various types of advertisements, including full-screen ads, which can be quite bothersome for users. Besides feeling overwhelmed, users may struggle to quickly find the features they need or even suitable listings, potentially increasing the likelihood of users leaving the platform.
Rental housing platforms often have various types of advertisements, including full-screen ads, which can be quite bothersome for users. Besides feeling overwhelmed, users may struggle to quickly find the features they need or even suitable listings, potentially increasing the likelihood of users leaving the platform.
A clear and transparent charging method
A clear and transparent charging method
A clear and transparent charging method
Listing a property usually requires a listing fee and advertising costs, but for business strategy considerations, platforms typically offer various advertising options, which can be quite confusing for novice landlords, making it difficult to intuitively choose the right plan for themselves.
Listing a property usually requires a listing fee and advertising costs, but for business strategy considerations, platforms typically offer various advertising options, which can be quite confusing for novice landlords, making it difficult to intuitively choose the right plan for themselves.
Listing a property usually requires a listing fee and advertising costs, but for business strategy considerations, platforms typically offer various advertising options, which can be quite confusing for novice landlords, making it difficult to intuitively choose the right plan for themselves.
When the goal is clear 👊🏼
When the goal is clear 👊🏼
When the goal is clear 👊🏼
01.
01.
Build design system
Build design system
The design system is based on the Bootstrap specifications and also refers to Material Design and Vuetify Design to create components suitable for RWD and Web Apps.
In terms of color, it adopts a combination of white, gray scale colors with brand colors and a simple, block color design style, and uses shadows to create depth and a sense of space.
The design system is based on the Bootstrap specifications and also refers to Material Design and Vuetify Design to create components suitable for RWD and Web Apps.
In terms of color, it adopts a combination of white, gray scale colors with brand colors and a simple, block color design style, and uses shadows to create depth and a sense of space.
02.
02.
Define the direction of product interface design
Define the direction of product interface design
A good first impression
A good first impression
Clean and simple web layout
Information presentation from different perspectives
No advertisement interference
Clean and simple web layout
Information presentation from different perspectives
No advertisement interference
User experience with good usability
User experience with good usability
Website structure that won't lead you astray
Simple and quick posting method
Different ways to present search results
Website structure that won't lead you astray
Simple and quick posting method
Different ways to present search results
A clear and transparent charging method
A clear and transparent charging method
Simple and quick posting method
No additional value-added fees
Pay-as-you-go deduction method
Simple and quick posting method
No additional value-added fees
Pay-as-you-go deduction method
Provide assistance to different users
Provide assistance to different users
There are corresponding sections for landlords and tenants, catering to different needs, without cluttered commercial advertisements. However, there are internal property listings, still maintaining commercial value.
There are corresponding sections for landlords and tenants, catering to different needs, without cluttered commercial advertisements. However, there are internal property listings, still maintaining commercial value.
Map find house with card-style design
Map find house with card-style design
The map search allows users to intuitively know the geographical location. The card-based design can flexibly change size and display the number of items in responsive web design (RWD), and it also allows for better image presentation. Users can clearly see the listings without having to click in.
The map search allows users to intuitively know the geographical location. The card-based design can flexibly change size and display the number of items in responsive web design (RWD), and it also allows for better image presentation. Users can clearly see the listings without having to click in.
720º, 360º photo house viewing
720º, 360º photo house viewing
720º and 360º photos can fully present the whole picture of the property, avoiding being 'fooled' by the listings and wasting time. You can first see the property clearly on the website before deciding whether to visit in person or rent it directly.
720º and 360º photos can fully present the whole picture of the property, avoiding being 'fooled' by the listings and wasting time. You can first see the property clearly on the website before deciding whether to visit in person or rent it directly.
Easy and simple way to post
Easy and simple way to post
Step-by-step listings are designed to be clear and provide timely prompts, with the ability to preview properties on the computer version, allowing users to see exactly what they get, and to preview the data presentation in real time.
Step-by-step listings are designed to be clear and provide timely prompts, with the ability to preview properties on the computer version, allowing users to see exactly what they get, and to preview the data presentation in real time.
Clear charging method
Clear charging method
Display all the listing methods at once, and compare items that are included and not included, allowing users to intuitively choose the features they need.
Display all the listing methods at once, and compare items that are included and not included, allowing users to intuitively choose the features they need.
Line Bot for finding houses
Line Bot for finding houses
No need to download an app that takes up phone storage; just use Line to easily find a place. With a simple tap to set the conditions, you can immediately find the corresponding listings.
No need to download an app that takes up phone storage; just use Line to easily find a place. With a simple tap to set the conditions, you can immediately find the corresponding listings.
Reflection and Learning
Reflection and Learning
Observe, analyze, and make good use of tools.
Observe, analyze, and make good use of tools.
When I receive a task, I will first look for and gather information, observe relevant competitors, determine what are the necessary features and what we can optimize, analyze whether the current version has similar features, and use Hotjar and GA to observe user behavior on our website, before proceeding with the subsequent production process.
When I receive a task, I will first look for and gather information, observe relevant competitors, determine what are the necessary features and what we can optimize, analyze whether the current version has similar features, and use Hotjar and GA to observe user behavior on our website, before proceeding with the subsequent production process.
Logical design
Logical design
Establish a clear Design System, avoid creating custom components, understand the rules of HTML and CSS, adopt a Mobile First approach during production, and maintain continuous communication with engineers at every stage. If there are special requirements, first look for relevant information and packages, then communicate with engineers before proceeding. After finalizing the UI, note the parts that need communication in Zeplin. If there are multiple states, create simple documents for the engineers to enhance communication efficiency and become the best partners!
Establish a clear Design System, avoid creating custom components, understand the rules of HTML and CSS, adopt a Mobile First approach during production, and maintain continuous communication with engineers at every stage. If there are special requirements, first look for relevant information and packages, then communicate with engineers before proceeding. After finalizing the UI, note the parts that need communication in Zeplin. If there are multiple states, create simple documents for the engineers to enhance communication efficiency and become the best partners!
Continuous learning and communication
Continuous learning and communication
Constant learning is essential; UI/UX is a field that updates every day. One must continuously refresh their ideas and skills, maintain an open mind to accept different opinions, and ensure good communication to co-create the best products with the team!
Constant learning is essential; UI/UX is a field that updates every day. One must continuously refresh their ideas and skills, maintain an open mind to accept different opinions, and ensure good communication to co-create the best products with the team!