Property website

Perfect Property is a case study project from 2019, and project brief was provided with most research data.

The problem area

The end-users for the website are first time property – and land investors.  The users need trustworthy information and guidance that enable first-time investors to search and identify properties and land that fit their budget, needs and goals.

It is vital that the website provides both guidance and creates confidence for the users, so they can trust the website and the information presented.

My role

In this case study, I worked hands-on with UI and UX processes, except most research.  To add more research data I conducted competitor benchmarking on several websites and apps to empathise with the industry and users.

The process I follow on all design projects is overall the same, depending on whether it is a new product or improvements to existing products. For this project, I use the standard design process, research, design, prototyping and test.

My responsibilities

  • UX Research
  • UX Design
  • UI Design
  • Interaction Design
  • Prototyping

Links

Empathize with Users

In this case study I was introduced to a project brief, including persona, user stories and a set of feature requirements.

To add more research data to my toolbox, I conducted competitor benchmarking on several websites and apps to learn more about the design patterns, pain points and trends within the industry.

Define the problem and ideate solutions

From the research data, I created the first user flows, flow charts and initial sketches of the mobile view. In the brief I was given the two options to design the responsive website in either blue colours or green colours.
I designed different versions of a few screens with the colours from the three moodboard to see which colours would work best with the design. Furthermore, I wanted to capture the style requested in the brief (smart, quick and clean) while also meeting the requirements for context of use, user behaviors and needs. To make the UI complete, I designed a set of icons and a brand logo for the website.

The styleguide I created for this case study shows moodboard, UI elements, do’s and dont’s, for use of images.

Flow charts

Flow charts were created with a selection of tasks a user needs to complete

Screen flows

After creating the flowcharts and identified the flows, content and elements on each screen. I created sketches of each screen and show how a user can complete a task using the screens.

Wireframes

A few examples of the wireframes created for the responsive website.

Testing the design

The responsive website is designed after the design principle “mobile-first”, I decided to design the mobile view with large elements, lots of space and simplify the UI, in order to avoid cluttering the design.

To test the flow on the website I created an interactive prototype to identify good and bad user experience and the look and feel of UI elements and colours.
The features of the website provides the user with the options to search, filter, and save properties and searches for later use. Detailed information about each property include 3D walkthroughs, video and a virtual tour through the properties.

The final result

The final design of the website is a result of many iterations, especially when deciding on the colours. I made several colour tests after creating the wireframes, by choosing a few mobile screen views and adding colours from the different moodboards and colour schemes until I found the balance in the website I was satisfied with.
The case study was a good experience that I can take with me, on my journey in design.

Mood board created for the website to decide on the colors, typeface and style

Mood board created for the website to decide on the colors typeface and style. This mood board was selected.