My first step of the UI design process was to establish a brand. I gathered inspiration online—images, fonts, icons, and colors that are reminiscent of the sea. The look I decided upon was airy, inviting, and elegant, which aligns with Seapearl Properties’ listings and clientele.
Mood Board
Mobile, High-fidelity Designs
Age
Nationality
Location
Technology
Job
Hobbies
36 years old
East Coast, United States
Meet Rashida
Property buyers need an easy way to buy coastal properties without professional guidance because they lead busy lives and need to make quick, informed decisions. We will know this to be true when buyers successfully narrow down their search options, requiring less agent assistance.
Problem Statement
Invest in a coastal property for financial security for her family
Financial Security
Needs a tool to help her find the right properties quickly and easily
Quick Tool
Wants to find the right information for fast decision-making
Detailed Information
Rashida's Goals
Rashida's Challenges
To generate empathy, I created a persona to define the primary user’s motivations, challenges, and goals. I also formulated a problem statement to guide my thinking process.
SYNTHESIZE
These go-to real estate apps offer great features, but miss out on the deeper insights into coastal communities, neighborhoods, and the coastal way of life. This leaves opportunity for Seapearl Properties to deliver high quality content and imagery to a large East Coast audience.
Realtor
Redfin
Truilia
Zillow
Hot Pads
Competitive Analysis Research
Mid-fidelity Wireframes
The hand-drawn wireframes were converted into a digital format (mid-fidelity wireframes). The examples below are just a few of the mobile screens that I designed in Figma.
Home
Search Results
Filter the Results
Property Details
Low-fidelity Wireframes
Search for properties based on specific criteria
Access comprehensive information about properties
Save listings and return to saved listings
Usability Test Tasks
Color Palette
Typography
Environmental Mock Up
UI Elements
Dark Blue (default) / Hex #00426F
Logo Creation
Iconography
retrospective
One of the biggest challenges was finding a succinct way to include a substantial amount of property information for each listing. This was achieved by breaking down content into digestible blocks of information, keeping the most relevant information above the fold, and by using horizontal scrolls and tab navigation to collapse the information into tidy categories. The focus of this project was user interface design, but as a UX designer, I would love to test this design as a next step and make iterations to it before moving forward with any additional UI work.
Overview
I developed Seapearl Properties, a conceptual real estate company that sells properties along the East Coast of the United States. The design provided comprehensive property information in a streamlined format, enabling buyers to efficiently narrow their selections without professional guidance.
MY ROLE
UX/UI Designer
DESIGNED FOR
UI Immersive
PROJECT TYPE
Responsive Web App
DURATION
1 month
PRIMARY TOOLS
Figma, Photoshop, Illustrator
RESEARCH
This project primarily focused on UI design, but I integrated parts of the UX process, so I could make informed decisions that aligned with user needs, behavior, motivation, and goals.
ARCHITECT
Guided by research insights and the persona, I brainstormed design ideas and selected one as the foundation for the site architecture. I also reviewed and optimized user flows to ensure users could complete tasks.
WIREFRAMES
Emphasis was placed on developing the app's UI, limiting the scope for extensive usability testing. However, I tested a few key functions. Moving forward, the following tasks would be tested, which align with the goals of our user persona, Rashida.
DESIGN SYSTEM
I added subtle animation to enhance the user experience. For example, the menu’s “wave movement” is quick, but calming, just like the sea, and supports the brand.
I added the design language system to the mid-fidelity wireframes and made sure the design worked across mobile, tablet, laptop, and desktop, as a responsive web app.
WALKTHROUGH
Experience a walkthrough of the Seapearl Properties app! This high-fidelity prototype walks through tasks that fulfill the needs and goals of our persona, Rashida.
Rashida's Motivations
I want to provide my family with financial security. I’ve been considering buying property for a while, and am looking for a tool that can help me find what I’m looking for quickly!
—Rashida
UX/UI design
The Grove Museum Exhibit
NEXT Project