Date
45 days
Role
Visual + UX Designer
Type
Website
Software Used
AdobeXD
Date
45 days
Role
Visual + UX Designer
Type
Website
Software Used
AdobeXD
Date
45 days
Role
Visual + UX Designer
Type
Website
Software Used
AdobeXD
Project Overview
Background
My second project assigned in my Google UX Certificate Program was to make an apartment finding website. I created Ziller. On this site, users can discover, apply, and book tours for apartment rentals in their area. This was the first project I’ve designed for a desktop from start to finish. It really gave me a chance to test knowledge I gained during my program like establishing and sticking to a design system and layout styles
Research & Empathizing
The Foundational Research
The first thing I did was conduct some foundational research I could stand on. Upon reading through articles, watching videos about people’s apartment hunts, and asking word to mouth, one primary user group stuck out to me. It was young adults who recently graduated from school, and are looking to find apartments for the first time instead of moving back in with their parents.
Defining our user and their journey
I did some more digging. In an effort to empathize with the user and inform my design ideas, I created a persona inspired by 4 user interviews i conducted. Additionally, I mapped out a user journey on an empathy map.
(click to enlarge)
User Pain Points
Here are the 3 user paint points that stood out:
Competitive Audit
After feeling like I got a good sense of my the user I was designing the site for and the journey he would take, I conducted a competitive audit on 4 companies to learn more about the brand identity, strengths, weaknesses and gaps in the market. Coupled with my foundational research, my competitive audit revealed 3 opportunities to address user pain points that other platforms weren’t fully taking advantage of, one of them being simplicity.
- I immediately thought to include a sidebar navigation on Apartment pages to help users navigate the information on the page. (Simplicity)
How Might I?
Through my user research, it became apparent that users did not feel completely safe and secure while apartment-hunting. So, the question I had to ask myself was how might I design my site in response to those emotions. After much thought, I concluded my site needed to incorporate 2 imperative design principles: Transparency and Social Proof.
- I incorporated Landlord profiles, rating feature and reviews. (Transparency)
- I decided I would include a “Highly Reviewed” section that presents apartments that are highly rated by other renters. (Social Proof)
Points of Opportunity
Defining the Goal
Problem Statement
Here was the problem being presented:
Randy is a new graduate who needs a transparent and easy way to find an apartment because he is scared of getting scammed
Goal
After gathering insights from my interviews and competitive audit, and already brainstorming ideas on solutions to user pain points, my overarching goal became clear:
Ziller need to be an apartment finding site that allowed users to find apartments on a simple interface that capitalized on transparency and social proof.
Prototyping
Paper wireframes
(click to enlarge)
I made 5 different iterations of the homepage, and pulled features from each design to come up with a final design. I knew I wanted to keep a traditional site layout similar to my competitors, which featured a search bar overlaying a nice hero image.
Digital wireframes & Lofi Prototypes
While building my lofi prototype, I kept the user pain points front-of-mind.
(click to enlarge)
Usability Study
Usability Study
After finishing my lo-fi prototype, I decided to conduct a moderated usability study to get user feedback on the work I’d done. The goal of the study was to find out if the website had easy and intuitive functionality, and if the features I incorporated hit the nail on simplicity, transparency and social proof. I tested a total of 4 users. The moderated usability study was followed by a System Usability Scale.
(click to enlarge)
Findings
My usability study and system usability scale gave me insight on how I could improve my design in 4 particular ways.
(click to enlarge)
Refining the Design
My Reiteration
My next move was to develop my high-fidelity prototypes while reiterating my designs to respond to the insights from my usability study.
(click to enlarge)
(click to enlarge)
(click to enlarge)
Color & Typography
(click to enlarge)
High-Fidelity Prototype
Next came my time to reiterate my designs based on my insights from the usability study and create mockups and a high-fidelity prototype.
(click to enlarge)
High-Fidelity Prototype
(click to enlarge)
Lanlord Bio Page
(click to enlarge)
Accessiblity
Takeaways & Next Steps
What I learned
One interesting thing I learned was how much impact the site structure has on the user flow. When I first began brainstorming on Ziller’s user flow, I thought a sequential structure would fit the site best. However, as I began to empathize with the user, I discovered that the most fitting site structure was the matrix site structure. This is because – realistically – when someone is looking for an apartment, they scrum apartment site thoroughly, and without a strict order.
Next Steps
The next step on this project is to conduct another usability study to discover more ways I can tie together the sites’ matrix model, and new features that can enhance a user’s sense of security when looking for an apartment.