GradetheLandlord Desktop Redesign
A 10 week long project that involves assisting an entrepreneur in developing the layout of his desktop website, with the goal of improve Syracuse University student's off campus housing experience.
My Role
Sole UX / UI Designer
Project Duration
10 Weeks
Area of Focus
University / Student / Off Campus Housing / Search
Synopsis
Initially named GradetheLandlord, the website seeks to help university off campus students figure out which landlord they can trust for housing rentals. I was brought on board to redesign, reorganize, and expand the desktop website according to the user research that was done by the company.
1. User Analysis
2. Brainstorming
3. Wireframing
4. Prototyping
5. Usability Testing
Challenges & Restrictions
-
Focus primarily on designing for desktop.
-
Focus on local to regional searches.
-
Company request the user reviews be based on user surveys.
-
No login/onboarding feature.
Analysis: The Users and Web Audits
Changes to the Website
Based off of the suggestions made by students and by the GradetheLandlord regarding the original version of their website, I've narrowed down to three key changes.
User Analysis
In conjunction with asking college students what they think about GradetheLandlord's website, I've also analyzed the existing user research conducted by the CEO himself.
How can we redesign GradetheLandlord's desktop website so that it provides its users the ability to search and review landlords and housing.
Brainstorming
Here is where I would show you the process that went through in order to figure out what kind of websites that inspired my designs and how I came up with the features for the redesign.
Inspirations & Competitor Analysis
Preparing the Design: Propose Features
Proposed Features Mapped Out
Before mapping out the flow chart, I've laid out where each feature would go, judging by what the user would be thinking upon visiting the website.
Illustration: How my design would work
Wireframing
User flow
Taking the feature map from before, I've detailed a chart of what major pages I would be designing and how each page would flow into each other.
Initial Paper Wireframes
The 9 pages that you see below are the major pages that I designed for the guerrilla testing.
Guerrilla Test Results
In order to see if the user can get through the prototype without an instructions and to see if the main features should be improved, or moved. All the test are conducted physically with the testers pointing at specific pages that they would go based off what tasks were given.
Findings:
-
Some of the users keep clicking on the round shape pictures thinking they are buttons to be pressed.
-
Testers cannot find or doesn't seem to know where the housing page is.
-
However the landing, map, survey, and landlord pages are easily accessed.
Things to Consider:
-
Have to consider what shapes I should use so that the buttons and images can be visually self explanatory.
-
There might be some cases where adding the colors would help the tester navigate through the housing page.
Usability Testings
In total I conducted at least 5 usability testing on people that matches with my user criteria. The criteria being anyone who is currently finding or has had a history of searching for off campus apartments,
Conducting the Test
-
All the test were conducted physically, with the testers testing out the prototype on the laptop.
-
The prototyping tools used for the test is Axure RP.
-
There are 2 tasks, testing out the changes in campus housing, and reviewing their landlord.
-
Also to test out to see whether or not they liked to color as well.
Test Results
Updates to Wireframes
After a while I decided to go back to this project and update it based off of the usability testing feedback I got. Using new skills obtained by my time at BEAM Interactive, I've constructed the prototype below using Sketch and Invision.
Updated High Fidelity Prototype
Visual Style Guide
Conclusion
Overall it was a great experience for me, especially since this if the first time I'd worked in a small company. In addition this was also the first time I did a UX/UI design project, as previously I've been mainly doing industrial design.
What I learned from the whole process
Making the UI feature as easy to interpret as possible.
-
This is a issue that I resolved with the prototype stage, where I changed some of the features so that they don't give different signals to the users, such as mistaking a round picture for a button.
Negotiating which design direction I would move forward with.
-
There were a few occasions that I had to persuade the CEO to adapt my designs. Especially when adding features on the landing page, I had to prove my designs by showing the results of the usability testing.
What I can improve moving on
Using the right colors.
-
One of the things that I learned from the usability test is the importance of color choice. After realizing that the colors were problematic for the testers I decided to change the colors so that its more simplistic and easy to read.
-
Using prototype programs like Sketch and Invision is much better than Axure RP
-
After realizing how much is easy to design and prototype on Sketch and Invision that for future UI prototyping I would be using them instead of Axure RP.
