E V A M A R I A H A M A C H E R
U X / U I D e s i g n e r i n / I l l u s t r a t o r i n
E A S Y E S T A T E / R E S P O N S I V E A P P
A B O U T T H E P R O J E C T
My UI case study documents the processes in designing a responsive app for
Capital- and Real Estate Investment.
Goal of my work was to develop an accessible app that would encourage young people and average earners to invest in real estate and capital investments for their future.
Objective
A responsive web app that provides property buyers with information on properties of interest.
Context
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, new buyers may often struggle to the market to get started without professional guidance and waste time viewing properties out of their range. This web app will provide them with the expertise needed to get started efficiently.
Perfect Properties
Who: This web app is made primarily for new, small-scale property buyers who are looking to invest for additional income or financial security.
What: This will be a user-friendly, responsive web app containing a database of available residential properties, land and comprehensive information on each listing.
When: Buyers will use this tool when conducting property searches, and making a decision about where to invest.
Where: Buyers will use this tool at home or on the go. Users can search for properties anywhere, as long as they’re logged in on a device.
Why: Unseasoned buyers need access to reliable, uncomplicated information about their potential property investments. Buyers get a feel for a place by viewing comprehensive information about the property and its neighborhood before spending time on-site.
Tools
Adobe XD
Adobe Photoshop
Sketch
SVGator
InVision
Frontify
M Y P R O C E S S S T E P S
User Persona
The creation of the user persona forms the basis of the project and guides you through the design process. The formulated goals and user stories show what requirements the user has of the product.
Composition
After the first scribbles, the digital low-fidelity wireframes were created and the mid-fidelity prototypes were developed through the use of grids and the organization of visual hierarchies at all levels.
Visual Design Principles
A mood board was created through the development of typography, colors and imagery, which served as the basis for creating the style guide.
Different Breakpoints
Using fluid grids, I went through the process in responsive designs, whereupon the principles of mobile-first design were additionally organized for breakpoints on tablet and desktop devices.
Interaktion & Interactive Prototypes
In order to apply user feedback methods, I created various animations for interactions, applied gestures and incorporated them into the finished prototype of the responsive app.
C O M P O S I T I O N
Low - Fidelity Wireframes
From the sketches with pen and paper, digital low-fidelity wireframes were created to create the grid system.
Culumns: 12
Culumns Spacing: 6
Culumns Width: 24
Mid - Fidelity Wireframes
The design patterns for the app are applied to both iOS and Androis users. Therefore, the design patterns relate in particular to the guidelines for Android devices on material design. In particular, the common material card-based design is used as a design concept.
Visual Design Principles
Styleguide
Onboarding Screens
Log In Screens
Filter Screens
Different Breakpoints
With adapting 3 screen of the mobile app, I responsively designed for tablet and desktop breakpoints.
Interaction Design
Inhalte von Vimeo werden aufgrund deiner aktuellen Cookie-Einstellungen nicht angezeigt. Klicke auf “Zustimmen & anzeigen”, um zuzustimmen, dass die erforderlichen Daten an Vimeo weitergeleitet werden, und den Inhalt anzusehen. Mehr dazu erfährst du in unserer Datenschutz. Du kannst deine Zustimmung jederzeit widerrufen. Gehe dazu einfach in deine eigenen Cookie-Einstellungen.
Inhalte von Vimeo werden aufgrund deiner aktuellen Cookie-Einstellungen nicht angezeigt. Klicke auf “Zustimmen & anzeigen”, um zuzustimmen, dass die erforderlichen Daten an Vimeo weitergeleitet werden, und den Inhalt anzusehen. Mehr dazu erfährst du in unserer Datenschutz. Du kannst deine Zustimmung jederzeit widerrufen. Gehe dazu einfach in deine eigenen Cookie-Einstellungen.
Thanks / Merci / شكرا لك / Gracias / Dank je / תודה / teşekkür ederim / Dankeschön...