Embedded Files
My Role.
This was my second project for the Google UX Design course. My assigned objective was “to design a website for finding apartments." I took all roles and responsibilities in the design process such as user research, wireframing, prototyping, mockups.
The Goal.
Our mission is to redefine home rental with a sleek, user-friendly app that makes finding the perfect living space a breeze.
The Problem.
Current home rental apps lack the engaging and approachable qualities users desire. They are perceived as dull and overwhelming, resulting in a subpar user experience. The competition also lacks straightforwardness and ease of use, further complicating the process.
The Solution.
We took a practical and user-focused approach, conducting thorough user research and testing to gather insights. With this valuable feedback, we refined the app's interface for simplicity and ease of use. Our aim was a clean and intuitive navigation system, incorporating user-friendly design elements. This practicality and user feedback resulted in a straightforward, hassle-free home rental app.
User Research.
User Research.
For this project, I conducted a couple of user research methods such as short interviews, and my own competitive audit.
Persona.
Persona.
Name: Jimmy
Age: 27
Hometown: Somerville, MA
Relationship: Dating
Occupation: Back End Coder
Hobbies: Wrestling
Goal: To find an apartment for me and my girlfriend.
Frustrations: Cluttered , confusing and just kind of boring apps.
Quote: “Life's a wrestle, both in the ring and in the search for the perfect apartment, but I'm ready to grapple with the challenge and find a place that truly feels like home.”
Bio: Meet Jimmy, a talented coder with a passion for wrestling in his free time. Despite not being a wrestling prodigy, he finds joy in the sport. Jimmy has been in a loving relationship with his girlfriend for five years, but they both still reside with their parents. Dissatisfied with the current apartment apps' bland user experience, Jimmy and his girlfriend yearn for a more engaging and exciting way to search for their own place. While not involved in app development themselves, they dream of a unique and intuitive apartment search process that reflects their personalities.
Pain Points.
Pain Points.
Overwhelming.
Overwhelming.
Realtor sites can be overwhelming for someone who is new to renting.
No Engagement.
No Engagement.
Simply put, the idea of browsing possible properties is fun but can also be very boring and tedious.
Confusing.
Confusing.
A handful of realtor sites have been found to be too cluttered, flooding users with too much information at once.
User Journey Maps.
User Journey Maps.
I created a user journey map of Jimmy's experience to help identify possible pain points and opportunity's to improve.
Design.
Design.
Paper Wireframing.
Paper Wireframing.
This was a massive learning opportunity for me.
Looking back now, I wish I spent more time on my paper wireframe. I knew I wanted the site to be as simple and easy as possible so I drew the wireframe as simple as I could. This being the second time ever making a wireframe, I did not realize how important the first steps can be to streamline the project moving forward.
Digital Wireframing.
Digital Wireframing.
Repeating my theme from paper, keeping things simple.
From this point on you will see a few major changes that I wish I thought of earlier in the design process. You can see that I also included mobile in this wireframe.
Low Fidelity Prototype.
Low Fidelity Prototype.
This desktop prototype is my first step into designing for larger screens, showcasing traces of my mobile background that add a unique touch of familiarity and adaptability to the user experience. This is my first time doing a desktop prototype. :)
Sitemap.
Sitemap.
Repeating the theme here, the sitemap was kept very simple.
Usability Study.
Usability Study.
Parameters.
Parameters.
Study type.
Study type.
Unmoderated Usability Study.
Participants.
Participants.
5 volunteer participants.
Location.
Location.
Global, remote via discord.
Length.
Length.
30 Minutes Maximum.
Findings.
Findings.
Users thought that the final screen was too intrusive.
Users did not like being sent back to the home screen upon “completion” of the process. They wanted to linger and browse more.
Refining the Design.
Refining the Design.
Some users found the “thank you” screen too intrusive and did not like that it brought you back to the homepage after it displayed. I minimized the thank you screen and kept users on the page they were on so they can continue to look at the property they were browsing.
Before.
Before.
After.
After.
Mockups.
Mockups.
High Fidelity Prototype.
High Fidelity Prototype.
Accessibility considerations.
Accessibility considerations.
Site is in dark mode, but fonts are bold and have high contrast for legibility and accessibility.
Large paragraphs with important information is dark with white background for ease of reading.
Clickable items are large and easy to find, although could even be a little smaller for aesthetic sake.
Conclusion.
Conclusion.
I discovered a handful of very important lessons doing this project.
For starters, this was my first time making a desktop mockup. While it’s similar to designing for mobile, it is also very different having so much space. I do think I need to go back and adjust sizes of certain components.
I also discovered that I need to spend more time on the foundation of my product. I get so excited to work on the high fidelity designs and end up spending too much time fixing small details I missed in earlier steps.
If I had the opportunity in the future, I would love to revisit this project and really fine tune the design and details. I had a ton of fun working on this and I thank you for your time.
Page updated
Report abuse