Overview

I rebounded Azie's design from Odama's team, focusing on the real estate section of the detail page for the desktop version of the website and then adapting it into a mobile application version. The purpose of this design is to fulfill the requirements for participation in the design challenge organized by Odama, aiming to simplify and clarify user interaction with real estate information to enhance user satisfaction. Additionally, it serves as a personal learning experience to improve my design skills. I design using an atomic design approach and Material Design 3 as a guideline to facilitate the development process.

Challenges

After reviewing and understanding the design of the desktop website version, there were several issues caught my attention and posed challenges that needed to be resolved.

1. Lack of emphasis on ways of interaction with real estate owners

   Users feel required to enter the contact section to be able to contact the real estate seller.

2. Insufficient information

   Critical information users needed was missing from the design.

3. Space-consuming components

   The large amount of space used by each component means that users have to scroll even more.

Benchmarking

I explored various competitor platforms to identify strengths and weaknesses that could be implemented into the design to resolve existing issues.

Solution

Based on the identified problems and benchmarking results, several solutions were implemented.

1. Providing a "stage" for interaction

   Displaying a "Chat with Owner" button for users to interact directly with real estate sellers without entering the contact section.

2. Detailed but not greedy

   Presenting comprehensive information about real estate with minimal space consumption by utilizing a "See more" button.

Result

Conclusion

After working on this design, I learned a lot about designing with an atomic design approach and using Material Design 3 guidelines, particularly in creating an effective design system. This significantly improved the speed of my design process.

However, I encountered some issues during the design process, such as dissatisfaction with the color results from the provided theme builder plugin, especially in the primary section. Therefore, I personally adjusted the primary color section to achieve a more harmonious look. Unfortunately, due to time constraints, I couldn't conduct testing and create a video prototype for this design. While testing was possible, the deadline for the design challenge submission was imminent. Hence, I can only provide the results I managed to produce.

I felt happy working on this design!

Thank you for checking out this shot! Have a great day~