UX and UI Design for ArkInvest Real Estate
The ArkInvest Real Estate company wanted to design their website for customers to browse property rent and sale information, and introduce company services and agent information. The company is a Chinese real estate company, located in Boston, MA. Their target customers are mostly Chinese, so they required me to design the whole site with Chinese.
What did I do?
UX Design | UI Design | Interaction Design | Visual Design | Content Strategist | Information Architecture
I was the freelance UX and UI designer and responsible for designing user-centered user experience and user interfaces for scratch for the whole website. I built the whole design started from scratch. The stakeholder, who was the owner of the company, had an original idea about contents, structures, and requirements of the website. We had several meetings and discussions, and the design iterates several times for two months. In the end, I delivered all the design works with satisfactory by stakeholders and generate good marketing results. The start-up company gained good benefits from marketing sales.
In the first phase, I gathered all the requirements from the stakeholders and did a lot of research. Basically, I was required to design the whole site with the company’s logo color. Thus, the color tone of this website followed with it. Another requirement was the user could quickly browse and found the house property information, as well as, they could browse the latest house property news and information about rental and sale houses in Boston.
The goal of this website was to attract customers and be useful for users to quickly find information about house property information.
Before designing the website, I created the UI artboard to prepare for the second phase user interface design. After the wireframe and web page layout was completed and approved, the UI elements did a great job helped me quickly deliver all the users interfaces. I liked creating UI artboard during my design process. it allowed me to reuse them in different parts and helped me keep consistency in different sections when designing different pages and referencing. Also, it brought me a good method to increase the designing efficiency. I was able to update all the symbol elements at a time and in a union by doing this.
Below is the finalized web pages design. It includes 6 main pages, which are the homepage, house property general search page, rental house property detail page, sale house property detail page, real estate news page and About us page.
In the homepage, it concluded all the sections in the navigation. These homepage sections were intended for introducing the whole site and bringing a good glance for users. I put the search bar in a reachable location where it was in the relative top of the page and right under the banner. It was to provide convenient access for users to quickly search for a property. Under the search, it was the rental and sale property, which showed the most recent and quality property lists. In the center of the page, one section showed the company short description and sequence section showed the property news and real estate news.
House Property General Search Page
In this section, users would find all the property about the sale and rental property. In the top of the page, it has a search bar and filters to help them quickly land on the content. The house property list provided important and key house information for users to browse and learn.
Rental House Property Detail Page
In the detail of the house property page, users would see features, including location, type, interior features, price, etc. Also, the house property picture preview would tell users the visual information, in the right of the pictures, the contact form right displayed there to evoke contact behavior and increase contact frequency. In the center of the page, it was the brief introduction about the facility, pet rule, and house property. Under that, it was a house video and neighborhood information, commuting, schooling information and etc. I created icons for all these neighborhoods categories, it was to increase enjoyment while users are browsing.
Sale House Property Detail Page
In this web page, users would find the sale house property information. In the top of the page, it has house features and prices. The layout was to keep consistency with the rental house property detail page. The difference between rental and sale house property was neighborhood information located in the center section of this page. In the bottom of this page, there were related house property to help users narrow down their research and find the similar interested house property.
Real Estate News
In this page, it mainly introduced the news of real estate, including the sections of the latest news, knowledge of American real estate, entertainment of Boston, and questions and house property management. The reason to put the latest news in the top was to bring the priority information for users immediately. In the top of the page, the search bar allowed users search for the specific topics/news.
This page was designed for introducing the company. The company was a start-up company and was not known by many people at that time. In the page, the sections, including introduction, services, agent information, were designed for helping people quickly know this company and services, as well as contact the agents of house property.
What I learned from this project was designing and planning the UX and UI works with a well-planned schedule and be prompt with communications of stakeholders.
When I worked on this freelance project, l had three projects on duty. One was my full-time UX designer job, another one was my part-time graphic designer job, and the third one was this. I was very busy that month. However, I was able to successfully deliver all of my works and design jobs on time and with good quality. My well-planned schedule and high-efficient design process helped me to work on multiple projects at the same time and balanced my life.
UX design always followed with some process. The process like chatting with stakeholders gathering requirements in the initial phase. After that, it was researching and building wireframe. Then present wireframes to stakeholders. After having the feedbacks, we can start to iterate wireframes, adjust layouts, as well as create UI elements preparing for users interface design. After UI works are completed, present to stakeholders again and gather feedbacks. During this process, one important part was to do the usability test with users. The testing results would help me to understand which part of my design not intuitive for users and edit from there. To master this process would help a UX designer manage their design workflow better and improve work efficiency.
Overall, a good UX design works need integrated skill sets. A good works planning, user-centered thinking, detail orientated design works and promptly communication is beneficial to deliver excellent works. Also, it was fun, challenge and having a sense of achievement every time when I did nice and satisfactory works.