UI/UX case study:
invest in property app
Techniques applied
- Design thinking
- Market and competitor research
- Logo design
- Wireframing
- Prototyping
- Design language system documentation
Objective
Create the UI for a responsive web app that enables users to research, locate and purchase property for investment purposes. This project presupposed that the majority of UX work has already been done, leaving me to interpret the UI.
This case study gives an overview of my process and explores the steps I took to solve my problem statement.
So, where to start?
Using a brief that includes a predetermined persona, user stories, and feature requirements to design the UI for a responsive web app that provides property buyers with information on properties of interest.
Problem statement
People want to create shortlists of properties of interest and keep track their search criteria.
We will know this to be true when we measure the use of a ‘favourite’ feature.
Research the market
I began this UI project by conducting competitor research to familiarise myself with the market. This included Vestaproperty.com, Zoopla.co.uk and Rightmove.co.uk.
Some interesting UI observations:
- All the sites I reviewed layered information over property images. My initial feeling is that this could add friction to selling users as they would need to consider this when choosing property photos.
- VestaProperty is probably the closest (like-for-like) competitor. Their listings all feature summarised specialist information, which first-time investors may not be familiar with. This is an opportunity for Properly to create a product that assumes no prior industry knowledge, which makes the app accessible to a wider audience.
- All sites kept design very simple, allowing the property images and copy to do the heavy lifting. This makes sense, however in all cases there is opportunity to improve the interaction, perhaps with colour palette or basic animation.
Understand the competition
I conducted detailed competitor analysis on the most significant businesses currently solving my problem statement for customers. I indentified these to be PayPal and Monzo.
Competitor analysis consisted of SWOT profile, key objective identification, market advantage, and marketing profile.
I then examined the competitor app usability, layout, navigation structure, compatability, differentiation, and calls to action.
User flows
I created a user flow to map the path a typical user would take to view a property. This allowed me to understand the necessary steps the user would need to take and help me form initial ideas.
Idea:
Signed in users should be able to access their ‘favourites’ from an always-on-screen icon. This could take the form of a compressed dashboard.
Visual direction
To establish the app aesthetic, I created mood boards that followed different directions.
I decided to continue the project using mood board #1.
There are a few reasons for this:
1 – The Art Deco and urban influences of #2, might jar with the user’s ambition to seek property ‘beyond the city’ (as specified in the project brief).
2 – Mood board #1 keeps colour to a minimum, which will allow the property images to pop more.
3 – While I like the idea of single line illustrations (as featured in #2), and the opportunities this opens up, I am not a good illustrator and there is no other available to work on this project.
4 – There will be enough content that the user wants to see, without additional branding illustrations/imagery. With this in mind, non-property images (of which there will be few) should be isolated objects, ideally house plants to suggest growth (financial) and branching out (investment).
Finalising the palette
Having chosen the mood board I would work to, I quickly realised that some elements from the colour palette I’d identified were too dark. So, I modified the palette by introducing a dark blue in place of the dark grey and increasing warmth of one of the lighter greys to create a stone colour.
In-keeping with the mood board, these amendments create a warmer and more organic palette. This was an important change as particularly the dark grey created a very formal and dramatic feel when I applied it into my wireframes.
I wanted to inspire trust but not at the expense of a bit of fun.
Design evolution
I took a mobile-first approach to this project, which allowed me to identify and prioritise the most important elements to the user.
One of the most significant features that evolved during my wireframing process was the user taskbar.
I realised users would want quick access to their previous activity on the site. This included communications with sellers, favourited properties, and search parameter history.
Observation:
My initial idea was to give users a shortcut back to their dashboard options. However, this evolved when I realised that it would offer a better user experience if all the dashboard icons were available at all times.
The user would need to pass through their full dashboard (via sign-in) before seeing this minimised version. This means the icons would already have relevance to them.
Dashboard development
For initial mock ups, I showed the dashboard buttons as circles. This was because I thought the curves would break up the lines of the rest of the screen and bring an element of fun to the page.
However, while it did break up the page and draw attention to the buttons, the main focus on this page should be the ‘new search’ button because the three main dashboard icons would appear in series and would display variable information, whereas the user would need a ‘new search’ button to be front and centre to generate a shortlist. So, I revised my design accordingly.
Incorporating animation
To enhance the interaction experience for users engaging with the custom shortlist feature, I created an animation. This animation provides a satisfying signifier to the user that their chosen property has been added to the shortlist. It also introduces just the right element of fun into the design, without compromising the visual direction.
Break points
Once my user flow had been completed for mobile, I built out tablet and desktop break points.
I used a six-column grid for mobile, which was easily scaled to nine and 12 for tablet and desktop respectively.
Considerations:
I could not simply scale up the design for each breakpoint as this would create strange looking areas of white space (and not in a good way).
One example of this is the main landing page for desktop. Here, I created a white box overlay for the main CTA to sit in. I experimented adjusting the opacity of the box however, I found even a slight reduction in opacity did not add any value to the design.
Design Language System
In order to bring the brand to life, I created a logo and brand visual identity. Details for usage and best practise were then compiled into a style guide.
This is a living document to be continually updated as the product and brand develops.
Next steps
This project draws to an end here, but my intention would be to test my prototype with users. This would be moderated usability testing consisting of gathering first impressions, witnessing attempts at set tasks, and general behaviour observation.
Initially addressing my problem statement, I would like to test user confidence in understanding of general navigation with specific interest in the dashboard taskbar. For example, can users understand the icons when they are not accompanied by text?
I would also like to test for a sign-up and potential onboarding flow.