Homeslices

Project overview

Accessible property invstement from $100

HomeSlices is an innovative property investment platform enabling customers to buy and sell slices at an initial price of $100 at any time. It provides a diversified property portfolio with considerable yield. Our vision is to create values for our investors through growing up with the property market.

Work responsibilities

In this project, I was mainly responsible for designing the product interface and establishing a style guide with another designer in the team.

- Responsive web design / App
- Handoff

Target users

Younger investors from 18-30

Based on research conducted by our product team, our target users of the product are young investors from 18-30 years old who might not afford to buy a property.

Challenges

Turning complex data into a view with
more ease

Financial tools can be overwhelmed with complex data and graphs. How to represent and interpret those data and functions in a simpler way and let users feel interesting and engaging is the main challenge.

KEY CHALLENGES

How to explain specific financial terms clearly to investors?

How to add more fun to the product to attract younger generation investors?

How to break down overwhelmed financial data?

How to increase investors' confidence and trust in the product?

Design guide

Typography
^& Colors

The logo and brand guide had already been created before I was brought onto the project. These elements served as jumping-off points for the development of the UI visual guide.

Final design

01 Home screen

4 main tabs were created based on product requirements.
‍
- For investors to explore more industry knowledge
- For listing our investment opportunities
- For users to check their investing performance
- For users to manage application settings

Final design

02 Dashboard

The dashboard provides a snapshot of values of the slices on hold, wallet, transactions and functions relevant to those data.

Each group of information is contained within a white card and space is utilized to break up information-dense screens.
Each group of information is contained within a white card and space is utilized to break up information-dense screens.

🌝 Design thinking

Using visual cues including colours and typographic hierarchy to differentiate the 2 parts constitute the total value on HomeSlices: the value of slices on hold and balance in the wallet.

Each group of information is contained within a white card and space is utilized to break up information-dense screens.

Final design

02 Total earnings &
Pending order details page

The dashboard also links to the Total earnings detail page and Pending orders detail page.

Final design

03 Market

Investors can check available investment opportunities here. Sort properties based on different filters.

🌝 Design thinking

Regarding the property card design, I have started explorations by critically thinking about the types of information most important to our investors with the team.

We prioritised KPIs as the most important data compared to property name tag and basic facility information.

Final design

04 Slice detail page

The slice detail page shows all investment-relevant data.

🌝 Design thinking

Avoiding information-dense pages by breaking up content through blocks separated by space. The sticky top navbar can help users quickly navigates to the sections they want to go.

Applying typographic hierarchy and contrast through font weight and size within each information block make information readable

The bottom action bar contains the most important data and action users could have when going through this page.

Due to the complexity of the information architecture, I make some details collapsible through the "View details" button. Ensuring the simplicity and clarity of the information-dense page.

Final design

05 Buy / Sell slices

I divided the buying process into 3 steps based on the purchase logic on HomeSlice's market.

🌝 Design thinking

Because investors can only buy slices from slices sold by other investors on the market except for initial launching properties. It is very important for them to check "Available slices" on the market and make their investing decisions. I added links button to the "Buy options page" so they can check buying options anytime before processing to the payment stage.

On the 3rd step payment page, I separated the total amount and purchase details because when the purchase is comprised of massive slices. The page is going to be information-dense and could distract buyers.

Slice details can be read by pressing the arrow button in the bottom action bar. This not only serves as a dedicated space to read all details but also a flexible space to handle more actions.

Final design

06 Components

Summary & reflections

Broaden my design product type & More

HomeSlices was the first project I started from scratch with the commitment of another designer. The scope of the project changed a little bit during the development process and some product requirement documents were not formally documented making the design process a bit unsmooth. Though the product didn't go live in the end due to obstacles from the business side, this project still gave me some valuable insights personally.

🌝 My design product type broadened - A fin-tect product

Even though it is still related to the real estate industry, it is a financial product in nature. This allows me to have more opportunities to explore the fin-tech product and understand the challenges and key considerations when designing a fin-tech product. The information hierarchy becomes important when massive data and graphs come into one place with various financial terms.

🤝 Communicating well with different stakeholders

- Working with a new development remotely using different handoff and design tools was really a challenge at the initial stage of the project. We had a few meetings together with the designers, engineers and product managers to unify the tools we used. Through good communication, I was able to introduce my workflows and tools and also learn from others, which was a good opportunity to know different development patterns and learn from more experienced co-workers.

❇️ Things can be improved

- I would spend more time testing my prototypes and optimising user flows if time was allowed.
- Increase the security of the app by adding extra layers of validation in the KYC process or withdrawal process, which requires effort from the product and engineering team as well.
- I would explore more options to display information on the property card and define its UI features more clearly. For example, text overflow truncation, fixed card height or adding an action menu to it.

🔮 Product brainstorming

- I believe as our economy evolves, the way people can invest evolves as well. Look at the NFTs market or virtual land, let's not think about if they are economic bubbles or not. the way people can invest can be like a game which also reminds we can add more fun to the design. Adding gamification features into the design could increase conversion and loyalty which is an interesting field to explore.

NEXT PROJECT ->