The Case Study
The Problem
Boutique Realtor company would like a website/app that would be easy to use for all demographics. This project needs to have most of the features of products that are currently available yet be different in terms of communication and accessibility.
Proposed Solution
Provide a user-friendly website/app that incorporates common features that promotes instant communication and has various accessibility options.
Keep scrolling to see my process
Research Overview
- Understanding the problem
- Discovering pain points
- Developing a persona
- First step is understanding the task. To do this I conducted an unofficial competitive audit. This allowed me to gain a deeper knowledge of the product as well as conduct a better user research. Initially, I thought “real estate” websites were straight-forward but after interviewing potential users, I found they were not. I discovered that target users were frustrated with the flow of many of these existing sites and the less experienced users were even more frustrated with lack of being able to speak to someone directly (a real person, not a computer).
- Zillow, Redfin, Zenlist
- Nation-wide Listings
- Good Imagery and Descriptions
- Good Filtering
- Difficult I.A flow
- Not Intuitive
- Lack of Accessibility Options
- Be more equitable
- Consistant Menu
- Accessibility Options
- User-flow better directed
Understanding the problem
Summary
Key Competitors:
Overall Strengths:
Overall Weaknesses:
Opportunities:
- To better understand how to make a product worthy of the target users, I had to first discover the target users' pain-points. These pain points will not only give me an insight of what is going wrong with the competition, but it will also let me know what is going right.
- Navigation - Real estate websites are often driven toward showcasing the housing products. However, they also assume that everyone is technology-literate, so the navigation is not readily digestible.
- Communication - This comes two-fold. For those who are interested in a property and for those who would like instant answers. The question of who I can talk to arises very often.
- Accessibility - Everyone needs housing no matter what differences they may have. Supporting those who may have impairments is a key factor in a successful product.
Discovering pain points
Summary
- After the initial testing, two personas were created. These created personas embody the overall ideaologies of the tested participants.
Developing a Persona
Summary
The Design
- Sitemap
- Digital Wireframes
- Usability Study
- The problem identified is having a flow that directs the user in a direction. The solution was to make each page its own self-contained process.
Sitemap
Summary
- Creating a menu that is always accessible. This helps the user always be able to find what they’re looking for and not be lost on the site.
Digital Wireframes
Summary
- I conducted testing for the usabiltiy of the responsive website. This usability testing will allow me to discover how target users may interact with my design.
- Moderated usability study
- Participants: 5 participants
- Location: United States, remote
- Length: 20-30 minutes
- Users wanted more interaction from the website
- Users thought the website was easy to navigate
- Users would like to have a save on their search
Usability Study
Summary
Study type
Findings
Refining The Design
- Visual Aesthetics
- Mockups
- Accessibility
- Deciding the look and feel of the website is based on a couple of philosophies. Pretty colors and cute shapes are cool but they are not always best for accessibility.
- Color: green was used to convey pleasantry and friendliness. To further express the point, I chose to use different shades of green as opposed to complimentary colors.
- Typography: Helvetica was chosen because this is one of the most widely used fonts ever. With that in mind, it has already been widely tested and accepted as a very legible font.
- Components: the buttons were made to be as clean as possible. Being this is a realty website the idea is to have it as clean as possible. The buttons were made to standout with their darker, yet more vibrant color alone.
Visual Aesthetics
Summary
- To increase ease of use the navigation bar was added as a permanent part of the page. The navigation could have just been on top but having the buttons with labels on the side increased screen space, accessibility, and usability.
Mockups
Summary
- With equitability in mind, I chose to make the website more accessible for those with disabilities. The focus was visual and hearing impairments. The idea was to put the different options in the settings menu. This would have to be further discussed with the developers, but as a front-end developer myself, I believe these attributes are attainable.
- Used as much contrast as possible, this allows for easier readability
- Included a setting section where audio, visual help cues and enlargements can be activated
- Used different font types to produce a clear hierarchy of importance
Accessibility
Summary
Conclusion Overview
- Final Product
- Takeaways
- Next Steps
- This website would primarily be used on desktop and mobile. This will allow users to search from a variety of devices.
Final App Mockup
Summary
- Impact: Our target audience has agreed that the navigation and ease of use was comparable if not better than the current websites of this field
- What I learned: I learned that simpler is better sometimes. Ease of use through simpler designs make the product more equitable.
Reflections
- Conduct another round of usability testing. This will ensure “no rock is left unturned”. I would also like to increase prototype functionality so users and stakeholders will have the best experience and feedback.