UI Design Project: Tiny House Village Parking
The process of designing a website to rent a parking spot for your tiny home — ParkVille
Introduction
Vancouver has been ranked one of the most livable cities in the world, yet it is also known to be a city with the worst housing affordability in North America. As home prices continue to increase in major cities across Canada, more and more young families are becoming intrigued by the idea of living in Tiny Houses. More specifically, residents are inspired by the idea of being able afford a place of their own and at the same time, live within or near a vibrant city.
Just think about it, wouldn’t it be nice to build a tiny house on wheels and have the convenience of everything (parks and commercial buildings) at your door step?
Research
Unfortunately, Vancouver bylaws does not allow for the use of tiny houses as a secondary suite. However, during my research, I came across a website, in which it promotes the legalization of parking tiny houses in urban areas. The founder of that website, Lisa Chessari, helped to submit a proposal to the mayor of Maple Ridge to start a Tiny House Village on a 16-acre farm. According to Lisa Chessari, the purpose of this proposal is “to create an opportunity for farmers to rent space to workers living in their own tiny houses on the farmers’ land. The proposal goal is to provide additional housing with minimal infrastructure cost and a revenue source for farmers.”
With that in mind, I want to build a tiny house parking rental website for the owner of this farm. I want tiny house owners to be able to navigate the website and book a spot to park their tiny homes on this farm. In what follows, I will demonstrate how I created a responsive website based on the farm owner’s proposal.There are many websites to rent a tiny home. There are also other websites where tiny home villages are used as hotels or travel destinations. As the basis of this case study is based on a on-going proposal, a website hasn’t been created for this particular farm in Maple Ridge. The content on this website is created with consideration of the goals and intent of potential users for this site.
Target market
The users of this website are tiny house owners and workers who want to rent a tiny house to live in. Tiny house owners/tenants will navigate the website to successfully rent a parking spot or a tiny house. The owner of the farm will be able to access data from the website to coordinate rental availability and generate additional revenue.
The Design Process
I designed two creative directions for the website. The mood behind the two directions are quite different from each other because it focuses on different target markets.
First Creative Direction
The Why — Design Inception
The “why” in this creative direction is to enable users of the website to live comfortably in a place of their own, a place that they can call home. Although tiny houses are alot smaller than your average house in North America, owners can still find comfort in living in a practically designed tiny home.
Mood
The mood I intend to create is fun, comfortable, and adventurous.
4 Elements of the Visual Language:
Colours: green, brown, burgundy, and blue
Space: open, clean, spacious
Shape: rectangular, triangular, round edges
Movement: slow, gradual passive
Mood Boards
This mood board expresses a comfortable and sustainable living style. The colors are solid and slightly dull to showcase that living a simple yet adventurous life style is possible.I chose the colour green because it represents nature, brown and burgundy matches the colours of a farm/barn, and blue brings a calm and relaxing vibe The logos are simple drawings of houses, again emphasizing the minimalist’s side of living in a tiny house.
Second Creative Direction
The Why — Design Inception
The “why” to this design is to allow tiny house owners to live a comfortably life and be free of financial burdens. I want this design focus on the financial aspect of Tiny houses.
Mood
The mood I intend to create is fun, affordable, comfortable, and sophisticated.
4 Elements of the Visual Language:
Colour: green, yellow, white, blue
Space: open, clean, ad spacious
Shape: simple, rectangular, and round edges
Movement: quick, instantaneous, assertive
Style Tile & Brand Guideline
This mood board is brighter. It is simple and sleek. I intend to target young professionals who are financially smart. The logos are simple as well. The message I intend to express is that living in tiny houses can be a modern and luxurious.
Color Palette
In the end, I chose a color pallette that is a closer match to the colors in the second creative Design. The Main colors are a green blue mix. The accent colors are a orange red and orange yellow (complementary colors in the color wheel). The neutral colors are white and grey. These colors are intended to be warm and inviting for the users. It brings a calm,clean and sleek vibe.
Typography
The fonts selected is Barlow. All the fonts in the website are from the same typeface. The words in the title uses Barlow Bold. Secondary headers use Barlow Semi-bold and all other descriptions in the website uses Barlow regular. This font was selected because it is rounded and easy to read — thus welcoming and inviting.
Iconography
Square icons are chosen for the website to match the shape of buttons. The blue color for social media buttons were chosen for consistency and that it stands out from the teal background.
The logo is made out of a triangle, a square, and two circles. It resembles a tiny home. The colors are burgundy and dark green, just like the color of a barn and that it is on a green field.
Style Tile
User Testing
User Flow & Wireframes
The first page on the website is the home page. It contains a landing a page and a call to action. The top right corner is where the navigation will be. The navigation contains links to the “About” page, “Contact Us” page, and “Register” page. The intention of this website is to allow users to access information and to allow the website owner to collect information to build his business. Thus the wire frames are simple and straightforward with mostly one to two “calls to action” per page.
The homepage/landing page is intended to attract the attention of users. It leads to the “About” page where users will be able to navigate information on what the farm is to offer. Which leads to the “Contact Us” page, allowing for users to contact the owner. Should the owner wish to register for more information, the user can click into the “Register” page and leave his/her own contact information, so the owner of the farm can contact the user instead.
Usability Testing
Through multiple testings and user feedback, the content in the original wire frames has changed significantly:
- More content was added to the Home Page.
- The description in the Home Page was centered and shortened in length to make the webpage look more clean and easier to read.
- Spacing and images are more central in the About Page.
- The Contact us page has a map on the left side and information on the right side instead of two pictures.
- The Register page contains a smaller and condensed form to collect all the required information.
- The information underneath “Connect with Us” have shifted to the bottom and left corners to make the CTA and descriptions less cluttered.
Prototypes
Below are links to what the final products look like on Invision.
Website Prototype:
https://projects.invisionapp.com/share/P4O16RHEDAK#/screens/319413133_Home
Mobile Prototype
Conclusion
In conclusion, the website served its purpose of allowing tiny house owners and tenants to navigate the website for information, to be able to contact the owner through online forms and the owner is able to access data from the website to coordinate rental availability and generate additional revenue.
In the future, I would like to add more content to the website. I would like to add a gallery page and other interactive elements such as live chats and videos.
The wire frames used in this website is applicable for other similar business, such as rental businesses, real estate, or any other service based businesses.
