top of page

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


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. 

User Analysis
FAQ Tenant Landlord.jpeg

How can we redesign GradetheLandlord's desktop website so that it provides its users the ability to search and review landlords and housing.


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


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. 


  • 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.



After taking the feedback from the guerilla testing, I created the same pages, with color added to it. All the colors are inspired by GradetheLandlord's branding.

High Fidelity Prototype
GradetheLandlord_Hi Fi Wireframes.jpg

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
Usability Testing

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
GradetheLandlord_Hi Fi Wireframes2.jpg
Visual Style Guide
Updated Wireframes


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.

Bottom of Page

Check out Similar Projects

bottom of page