top of page

VISTA Renting Website

VISTA Renting Website Homepage

The interface of VISTA is intended for users interested in renting a property. The user will be able to view photos of the apartments, detailed layouts with measurements, and the location of the building on a map. The user will also be able to ask questions, fill out a “contact us” form, schedule a visit, and check the availability of apartments units while comparing prices. This was an assignment for the Tufts University Class, Web Interface Design--ENP 166. The three phases of the assignment were developing a concept, creating wireframes, and then generating mood boards to apply visual design to the wireframes. 



Wireframing in Sketch

Product Site Map

Conceptual Model Diagram


UX/UI Designer

Concept Developer


High Fidelity Prototype

Initial Steps: 

After reading the specifications that the client was looking for, I began brainstorming a conceptual model diagram. Then I created a product site map based on that diagram.  


Conceptual Model Diagram
Site Map

Next, I created 6 wireframes to communicate my vision for the website. 


Mood Boards:

After I created the wireframes, I created 3 mood boards. The purpose of these mood boards was to have a representation of 3 distinct visual design directions I could have taken.


Final Steps:

After picking a design direction based on the moodboards I created, I refined the wireframes. The goal of this project was to create a high-fidelity mockup that would be used to communicate my design idea for VISTA's renting website.  

bottom of page