Role/Deliverables/Timeline/Unique Challenge
UX Designer, UI Designer
User Personas/Journeys, Low/Mid-fi Wireframes, Sitemaps, Style Guide, Hi-fi Wireframes/Prototype
3 Months: June - August 2021
This case study focuses largely on UI design as the exploratory research and user base definition had been completed prior to my work on the project.
Overview
Real-estate investment is an increasingly popular way for individuals to achieve financial security. It is an exciting and emotional yet complicated experience that can be daunting to first time investors. Realtopia provides users with targeted property information based on their entered preferences and professional guidance to give them the expertise they need to get started in the real-estate investment space efficiently.
Problem Statement
Working young and middle aged adults need an easy way to access relevant information and professional guidance within the real-estate investing space to take steps towards financial security.
We will know this to be true when we see that Realtopia provides individualized investment information and professional guidance through the assistance of a realtor to users such that they can make a confident educated financial decision to invest in real-estate.
User Persona & Journey Map
In order to communicate the needs, motivations, and frustrations expressed from Realtopia’s target users in a visual manner I created a user persona. To visualize my persona’s journey and empathize with their emotions and pain points, I also created a journey map.
Sitemap
In order to create the foundation of Realtopia and begin creating low fidelity wireframes, I needed to define the fundamental architecture of the app. In order to do this I created a sitemap with the necessary fundamentals of Realtopia: a home section, a saved properties section, an account section, and a find agent section.
Low-Fidelity/Mid-Fidelity Wireframes
With Realtopia’s information architecture in place I drafted low and mid fidelity wireframes for Realtopia’s core function: searching for and viewing properties. These wireframes spanned three device sizes: mobile, tablet, and desktop. The most prominent change between my low and mid fidelity wireframes involved the use of consistent spacing and font size across headings, paragraphs, and UI components to emphasize clear information hierarchy.
Style Guide
In order to ensure consistency and adherence to accessibility guidelines, I created a style guide for Realtopia that includes a color palette, typography, iconography, UI components, illustrations, and a grid system. A unique challenge for me throughout this project involved me designing Realtopia’s icons and logo from scratch in Adobe Illustrator. These can be found in my full style guide below.
