Brix FII
1. Overview
Brix FII, short for Brix Fundo de Investimento Imobiliário (Real Estate Investment Fund), is a Brazilian real estate company. They specialize in luxury properties situated in prestigious neighbourhoods in Rio de Janeiro, catering to affluent young individuals seeking a blend of contemporary architecture and exclusivity. Brix is renowned for its high-quality service and dedicated customer support.
Date and duration
5 months
(Sep 2022 - Feb 2023)
Tools
• Adobe XD
Team
• Juliana Saboya
(UX Designer)
• Aline Dias
(UX Designer and account manager)
Deliverables
• Competitive Analysis
• Sitemap
• Wireframing
• Prototyping
2. Problem Definition
Origin
As a freelance UX Designer for Banzi, a Brazilian design agency, I had the opportunity to work on this project. The client's objective was to revamp their website and convey a modern, sophisticated, and bold image. Beyond these requirements, I had complete creative freedom. It was also essential to retain all the existing content from the current website in the new version.
What was the problem?
Based on the client's needs and the website's analysis, I came up with this problem definition:
How can we effectively showcase Brix FII's portfolio and services, ensuring that the presentation is not only informative but also reflects a sophisticated and modern aesthetic?
3. Discovery
Competitive Analysis
To kickstart the project, I conducted an analysis of various real estate companies offering sophisticated properties similar to Brix FII. Additionally, the client provided references that they found inspiring, which are included in the document shared below.
Board listing Brix FII's competitors and their advantages
Click on the image to enlarge it
Engaging in this process provided valuable insights into the real estate industry in Brazil, enabling me to identify strategies that could be adapted and implemented for this project.
As per the project requirements, conducting this research was the sole research step requested.
4. Designing
Site Map
Following the research phase, I proceeded to develop a sitemap and accompanying document detailing the content for each page. As Aline acted as the intermediary between the client and myself, these deliverables were created to ensure clear communication. You can view both the sitemap and document below.
Brix FII's sitemap
Click on the image to enlarge it
Document listing all pages and what elements are included in each one
Click on the image to enlarge it
The process of writing this document proved to be highly beneficial as it prompted me to meticulously consider each section of every page. This, in turn, expedited the wireframing process. Moreover, obtaining client approval for the document helped preempt any potential requests for structural changes in the future.
Wireframing
I initiated the design process by creating the desktop version of the homepage and subsequently proceeded to work on the remaining content pages. Below, you can preview a selection of these pages. For the complete prototype, please access this InVision link.
Page 0. Home - Wireframe
Click on the image to enlarge it
Page 1. About - Wireframe
Click on the image to enlarge it
Page 2.1 Property A - Wireframe
Click on the image to enlarge it
Page 2.1.3 Construction status - Property A - Wireframe
Click on the image to enlarge it
During this stage, minimal corrections were required as the wireframes I designed accurately incorporated the previously agreed-upon content.
High-Fidelity Prototyping
Initially, my role in the project was limited to wireframing. However, a few weeks later, I was invited to take on the additional responsibility of designing the final interface and creating a prototype. Aline had already designed the homepage and About page, and I continued her work for the remaining pages.
To emphasize the luxurious nature of the product, we made deliberate design choices. These included utilizing minimal text, employing large fonts, incorporating ample white space, and prioritizing high-quality photographs, as aesthetics play a pivotal role in showcasing the company and its work.
Page 0. Home - High-fidelity prototype
Click on the image to enlarge it
Page 1. About - High-fidelity prototype
Click on the image to enlarge it
Having a senior designer initiate the visual aspects of the website proved immensely valuable, especially since I had not previously worked alongside someone of such expertise. My prior experiences had primarily involved working alone or with other beginners. In contrast, I found that wireframing and establishing content hierarchy came more naturally to me. Aline's assistance with the interface and visuals helped bridge this gap, providing me with a sense of comfort and confidence in the direction I was taking. Her guidance also honed my critical eye and introduced alternative perspectives when faced with challenges.
We were able to finalize the high-fidelity prototype after approximately three iterations.
Page 2.1 Property A - High-fidelity prototype
Click on the image to enlarge it
Page 2.1.3 Construction status - Property A - Wireframe
Click on the image to enlarge it
Once the design phase was completed and approved by the client, the development team commenced the implementation process using WordPress as a content management system (CMS), enabling the client to independently update content as needed.
During subsequent meetings, we recognized the importance of adapting the desktop version for mobile devices to ensure a seamless user experience. This adjustment was carried out relatively smoothly, as it primarily involved a mechanical process and did not require a significant amount of time.
Some pages seen before, now as their mobile versions
Click on the image to enlarge it
Upon the completion of development, Aline and I conducted quality assurance to ensure the website's functionality and performance. This thorough examination revealed a few bugs that required attention, leading to subsequent bug fixes.
After the project was delivered via a CMS, the client assumed full ownership of the website, granting them the flexibility to make any necessary edits or adjustments based on their specific requirements and preferences.
5. Finished product
Here is Brix live. Note that the current version was altered and published by the clients themselves.
6. Learnings
Collaborating with another designer on this project made a significant impact. While working alone in other situations challenged my creativity and problem-solving skills, having the support of a very experienced professional brought additional advantages.
Compared to other experiences, this project didn't involve an overly complex product or numerous rounds of changes. However, the redesign of Brix's website was unique due to the creative process itself. I iterated through multiple versions, grappling with complex elements, until I finally achieved satisfaction. Aline's support was invaluable in validating my work and providing feedback that deepened my understanding of design principles, helped solve intricate problems, and expanded my portfolio of solutions.