Responsive Web Application | Mobile-First Design
Provide users with an engaging interface for a responsive web application that provides property buyers with information on properties of interest.
UX Designer (based on existing research)
Information Architecture, User Persona, User Tasks & Flows, Wireframing, Prototyping (Low-, Mid-, & High-Fidelity), Branding & Iconography, Animations, Asset Management, Mockups
Figma, Lucid, Google Docs, Rotato, Adobe Illustrator, Adobe After Effects, Adobe Photoshop, Adobe InDesign
UNDERSTANDING THE BRIEF
Real estate investment is an increasingly popular way for individuals to achieve financial security. It is an exciting and emotional experience, but often complicated. While there are plenty of blogs and agencies providing information, often, buyers new to the market may struggle to get started without professional guidance and waste time viewing properties out of their range. This web application will provide them with the expertise needed to get started efficiently.
>> WHAT are we designing?
This will be a user-friendly, responsive web app containing a database of available residential properties and land, and comprehensive information on each listing.
>> WHO is this app for?
This web app is made primarily for new, small-scale property buyers who are looking to invest for additional income or financial security.
>> WHEN will the app be used?
Buyers will use this tool when conducting property research, and when making a decision about where to invest.
>> WHERE will the app be used?
Buyers will use this tool at home or on the go. Users can search for properties anywhere, as long as they are logged in on a device.
>> WHY are we designing this app?
Unseasoned buyers need access to reliable, uncomplicated information about their potential property investments.
Parts of the UX research had already been conducted prior to my involvement in the project, leaving me free to focus on the UX and UI design. The information on our primary user profile was provided and formed the base for our main user persona Rashida.
User Persona | Rashida
USER TASKS & FLOWS
In order to design a sensible and smooth user experience clear tasks needed to be defined that the user personas wish to accomplish. Each of the user personas was assigned one main task which was then split into smaller steps, helping to design clear user flows.
User Task #1
User Task #2 & #3
User Task #4 & #5
User Flow #1
User Flow #2 & #3
User Flow #4 & #5
LOW- & MID-FIDELITY WIREFRAMES
Once there was a clear idea of the main features to be included in the product, some basic sketches of wireframes were created. These paper prototypes allowed it to think through and test the initial ideas, working from screen to screen, both on mobile devices and desktops. From this, it was quickly possible to validate individual design decisions and move on to interactive low- & mid-fidelity prototypes using Figma.
SETTING THE MOOD
In order to better understand the design direction the user interface was going to take, a mood board was crafted which would guide the visual design for the rest of the project. With the project brief in mind, it was clear that the app needed to be three things above all: clean, professional, and reliable. These characteristics are visually communicated through the use of color (and color psychology) and typography.
>> Smoke Blue
credible, classic, strong, professional, loyalty, clarity
>> Light Blue
calm, quiet, patient, cool, peaceful, clean
>> Neutral Grey
classic, practical, quiet, logical, modest, efficient
>> Burnt Orange
abundant, energizing, warm, welcoming, self-assured