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. 

 

Methods

Wireframing in Sketch

Product Site Map

Conceptual Model Diagram

Role

UX/UI Designer

Concept Developer

Deliverables

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
Wireframes
Frequently Asked Questions
Frequently Asked Questions
press to zoom
Cost Chart
Cost Chart
press to zoom
Map
Map
press to zoom

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.  

Map
Map
press to zoom
Contact Form
Contact Form
press to zoom
Frequently Asked Questions
Frequently Asked Questions
press to zoom