1.png

Sweet

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

 

Persona

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!”

Goals:

● 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.

 

Problem

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

 

Low-fi Wireframes

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.

image 1.png

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.

image 52.png
 
Mood board 1.jpg

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 2.jpg

Mood board nr2

The Winner

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

 
image 53.png

This was a first implementation of layout  and style guide.

Landing Page

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.

image 54.png

Landing Page

Iterated Landing Page

 
3.png
4.png
 

Web Responsive Design

Frame 2247.png
2.png
1.png
2.png

Test it yourself!

Evaluation

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