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
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
Usability Test Tasks
Color Palette
Typography
Environmental Mock Up
UI Elements
Dark Blue (default) / Hex #00426F
Logo Creation
Iconography
Design Takeaways
One of the biggest challenges was presenting a substantial amount of property information for each listing in a clear, digestible way. This was addressed by breaking content into blocks, keeping the most relevant information above the fold, and using horizontal scrolls and tab navigation to collapse additional details into tidy categories. While the focus of this project was UI design, as a UX designer, I would conduct usability testing on this interface and iterate based on user feedback before moving forward with additional UI refinements.
© Mary Rose Design 2026
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
