top of page
FlatSpot
UX/UI Case Study
Project Brief
FlatSpot will be created for mobile devices and laptops, a one-spot stop for users. It will be an intuitive and user-centered place for renters, to connect to experts in the rental real estate market, specifically in London, to find the best location and priced flat rentals. The Custom Dashboard will be the key place where a renter can do everything, including organize and share their search results, showing units they have seen, not seen, and scheduled to see. Additionally, the rental community will be able to find and leave honest ireviews about their flat and on the property and history of the building management.
The Problem
Our users, living in London, need an all inclusive space online to find flats for rent in the area, the ability to keep track of places they have seen and schedule appointments with rental companies or landlords for showings. They would also like to be able to organize the information from their flat search with photos, price, location, flats seen, scheduled to see, rank each flat, and get reviews from current or previous renters about each flat.
The Solution
The One Stop Solution – Users would have a one stop spot for rental flats in London and in turn so would rental companies and landords be able to have a direct line to renters.
Renters would be able to find flats online for rent, see photos, pricing, locations, schedule showings, customize and organize their search information and get honest reviews from current and previous tenants of the flats they are interested in.
The Development Approach
Role
UX Researcher
UX Designer
UI Designer
Tools
Sketch
Adobe XD
Invision
Craft
Optimal Sort
Usability Hub
Photoshop
InDesign
Illustrator
Skype
Facetime
Zoom
Slack
Keynote
Typeform (surveys)
Polldaddy
Vidyard
Lucidchart
Googlesheets
Realtime Whiteboard
Screaming Frog Spider Tool
TextMate (for coding)
1. Discovery
Understanding the Problem
Using the Double Diamond Strategy helped me understand the problem and remove bias allowing me to discover, define, develop and deliver. Conducting research then narrowing the scope to define the problem then iteration and validating the approach.
1/5
Competitive Analysis
After surveying many rental apps in the UK, I decided on two that seemed to be most comparable to mine to analyze. I asked myself several questions. What are they Communicating through their product? What are they missing in their messaging, product, and overall offering? I looked for weaknesses that I could use to my advantage of any stumbling blocks or issues within the user experience. I also looked for smart or useful decisions and design patterns that I might want to incorporate into my application. Lastly, are there ways that they aren't supporting their users that I can in my product.
1/7
User Surveys & Interviews
I created a survey and received 40 responses. I conducted interviews via skype with a total of five potential users in London. Two of the five were flatmates so I thought that would be extremely helpful to find out what their process for looking for rentals was since they had both just been through the process after moving out of student accommodations in London. They had a lot to say about their experience.
1/5
2. Concepting
User Personas
From the interview process findings, I was able to create some strong personas that would in turn help me decide what the most important features of my app would need to be created.
Journey Maps and User Flows
The most important user stories from the Journey Maps were used to create a User Flow for each task.
Information Architecture and Card Sorting
After analyzing the User Personas, User Journeys, and User Flows, I created the first sitemap and information architecture for the app.
I validated and refined my sitemap based on the results of the card sorts. I created closed card sorts and there were quite a few changes made to the sitemap to better reflect the perspective of my users. The original sitemap was pretty basic and all parent pages as I suspected there would be many child pages to add after the card sort.
1/7
Wireframing for Mobile and Web Version of FlatSpot
The strongest features have immerged after the user interviews, surveys and tasks flows. Those three fleshed out in the wireframes for both the mobile app and website. I sketched out low-fidelity wireframes for both mobile and web first.
The 3 features are:
1. Custom Flat Search
2. Find an Expert Letting Agent
3. Find a Renter Flat Review
1/9
3. Prototyping & User Testing
Prototyping
Moving on to Mid-level Prototypes for mobile and website.
1/9
Moving on to High Fidelity Prototypes for mobile and website
1/10
Usability Testing
The primary purpose of a usability test is to improve a design. In a typical usability test, real users try to accomplish typical goals, or tasks, with a product under controlled conditions. Researchers, stakeholders, and development team members watch, listen, collect data, and take notes.
Goals/Objectives/Methodology
A total of 6 participants were tested through a network of people in my daughter’s cohort in London. The audience is 21-36 year olds college educated and professionals living in London, either U.K. citizens or those working in the U.K. from other countries. Moderated Remote testing will be used. Participants will be able to choose from Zoom, Skype, or Facetime for me to observe them while testing the app on their mobile phones. Quicktime will be used for recording the sessions.Participants will be asked to assess the functionality of
three specific features of the app. and the overall flow of the FlatSpot Dashboard. The Custom User Dashboard is the main part of the app where all features will branch off from. It is the user’s hub for the entire app. The goal is to assess the functionality and flow of FlatSpot as well as observe how the user interacts and understands the purpose of the app. I hope to get a better idea of what works well or needs improvements.
1/5
Results From The Usability Test and Changes Made
Affinity Maps are created, categorizing findings into observations, positive quotes, negative quotes, and errors from participants.
Changes Made to FlatSpot App
1/5
A/B Preference Testing
Preference Testing for the Onboarding section of the app. I originally had planned on using illustrations for the onboarding screens but I decided to try using photos. Once I created a version with photos I didn't want to rely on my own preferences so I felt the need to test.
Design Documentation – Style Guide
1/5
Discovery
Concepting
Prototyping & User Testing
bottom of page