Real estate App
'Real estate investment is an increasingly popular way for individuals to achieve financial security. It is an exciting and emotional experience, but often complicated. This web app will provide them with the expertise needed to get started efficiently.'
Brief by InVision
As an IT consultant for a growing tech company, Ash is frequently on the go, and often holds meetings by phone in their car while driving. They are good at multitasking and relies heavily on technology to help them with this.
“I want to provide my family with financial security. I’ve been considering buying property for a while, and I am looking for a tool that can help me find what I’m looking for, quickly!”
● Ash makes a good living and wants to invest in property beyond the city for increased financial security for her family.
● They want to find the right information for fast decision-making.
● They want a tool to help them find the right properties so as not to waste their time.
The user is new to real estate, they want a tool that is easy to use and that will help them find the property they're looking for.
● Search for properties, inputting criteria relevant to what they're looking for
● Easily view and return to listings they're interested in
● Receive relevant and comprehensive information about properties
Trust The Process
Using a graphic tablet doesn't only save trees, but also time. This way there is more time for playing around with flows by trying different approaches.
Mid - fi wireframes
Using 8 columns gird system and visual hierarchy, mid-fidelity wireframes have been created in Figma. This way, placing crucial UI elements would bring us closer to the final project and any further missing flows would unravel.
Mood board nr1
Rejected mood board
Initially, this mood board was considered to be the one that will influence the design. However, after creating the next mood board and revisiting the brief, It's been decided to move further with the mood board nr2.
Mood board nr2
However, when discovering mood board nr. 2 (the one in the picture) I started to like the design, its freshness and simplicity. I think the first design is appealing, but I have found it heavy, and it might not be suitable for all kind of users.
This design will be light and more universal, which will make our users feel safe, and they will trust that this product can solve their problem.
High - fi design & Iterations
This was a first implementation of layout and style guide.
Iterated Landing Page
In order to create better visibility and clear CTAs, the layout have been changed to support mobile first design approach and web responsive approach.
The buttons have been created and placed in an easy-to-reach place, clearly wrapping up the end of one section and a beginning of a new one.
Iterated Landing Page
Web Responsive Design
What went well
Opportunity to further develop my designing skills like wireframing, prototyping and visual design
The design was reflecting the initially chosen mood board,
I have learnt more about interaction design as well as creating prototype's animation,
I have discovered room for improvement and that gave me an idea what skills I should focus on next ex. animations
Room for improvement
I would like to explore more ideas for a layout to find the most optimal solution for this type of app
I would like to work more with different depth of feel within the screens
How will I improve
By creating more designs
By watching other designers and try to replicate their designing solutions
By experimenting more