A B2B & B2C platform that simplifies the home buying and selling experience.
Overview
EzCaza (a bootcamp-led learning opportunity) is a B2B and B2C platform designed to keep house buying and selling all in one place. It makes it simple and organized to connect home buyers with home sellers, emphasizing trust and transparency throughout the transaction process. Amid the current housing market landscape, real estate agents are perceived as among the least trusted professionals. Transparency is crucial in the home-buying process, and EzCaza’s mission is to close the information gap and provide a comprehensive home-buying experience for everyone involved.
EzCaza is redesigning certain aspects of its current features to incorporate better functionality, usability, and intuitiveness.
The Problem
EzCaza was looking to update its transaction tools to implement more functionality to enhance the traditional home-buying experience for the modern age. The main goal of this project was to create both the Team Members page and the Property Info page.
The Solution
By constructing a thorough component library and a style guide based on the existing site, I successfully incorporated new features, the Team Members page and Property Info page, into the website. These additions seamlessly integrated with the current design while maintaining a cohesive and unified design language.
My Role
- UX/UI Design Team Member
Tools
- Jira
- Figma
Process
- Discovery
- Design
- Prototype
- Reflection
Discovery
Jira Ticket
As a large design team member, I started my journey with the two assigned Jira tickets and began to familiarize myself with the product and the existing pages. This learning opportunity has allowed me to explore the complexity of website development and work within an existing design.
The Jira tickets focus on two functionality pages: The Property Information page and the Team Members page.
Jira Tickets & User Stories
User Stories
From the information presented on the Jira tickets, a user story was pinpointed for each ticket:
- As a User, I want to be able to view a new house listing to sell.
- As a User, I want to be able to see/add members of the transaction team.
Design
Taking Notes
I started by inspecting the design and layout of the existing pages to gain insight into the specifications needed to maintain continuity and consistency. Typography, colours, spacing, and iconography were noted in preparation for creating a style guide.
Additionally, I cleaned up any inconsistencies within the design and components and ensured an organized naming convention for each layer.
Style Guide
With my notes from inspecting the existing design, I created a style guide to reflect the current typography, colour palette, iconography, and other design elements before moving on to high-fidelity wireframes.
Component Library
A component library was created to keep all master components organized and synchronized with the file’s local library. Since there were slight inconsistencies in spacing, I referred to my notes on the existing pages to standardize the spacing with auto-layout. Additional variants were also introduced to accurately reflect a user’s experience in different phases of interaction.
High-Fidelity Wireframes
Property Information Page
With all the resources and information I gathered, I moved on to creating the Property Information page first. Keeping the information hierarchy in mind, the image of the property is placed first on the left, followed by the input form as the next focus point. Auto-layout has also been applied to keep spacing consistent. Components, such as buttons and navigation, are placed to maintain continuity throughout other screens.
Team Members Page
The Team Members page proved to be more challenging since I faced a lot of difficulty in choosing between a stylistic UI or a more practical UI. I opted to focus more on functionality and practicality, therefore deciding on a traditional list view instead.
An overlay menu for adding in team members has also been created with variants to keep the screen clean and open compared to a drop-down menu that might look repetitive in a list setting.
Prototype
After designing the wireframes, I created a prototype that features the Property Information page and the Team Members page. Other existing screens have also been included to make the top navigation bar fully functional. The overlay menu variations for adding a team member are also utilized to reflect the full functionality of the feature.
The prototype was refined to optimize usability and achieve the functionality needed for more effective user testing.
Reflection
Overall, EzCaza is a simple yet satisfying opportunity that allowed me to explore how to approach a Jira ticket in a large design team. This project has reaffirmed my belief that every pixel counts in the context of design consistency and continuity in a user’s experience. Taking notice of the details is crucial in making the overall user experience and user interface seamless and cohesive. Moreover, I am very pleased to be able to sharpen my technical skills in Figma and push the limits of auto-layout to make my process more streamlined.
If I had more time to work on this project, I would focus on redesigning the Team Members page to be more consistent in terms of style with other existing pages. Though the current list featured on the Team Member page is classic and straightforward in terms of functionality, there is still a lot of room to improve in terms of its UI. I would like to explore the balance between having a stylistic UI and an accessible UX. I would also like to be involved with user testing to add further functionalities to the Property Information page.
Leave a Reply