Above shows our presentation during critique
Introduction
Our task was to choose a startup from techcrunch and design their website (without having actually visited their website).
Context
Rent the Backyard is a startup that builds studio apartments in people’s backyards and rents them out. In exchange for building the apartment, financing the construction, listing the property, and selecting the tenant Rent the Backyard has a 50% ownership stake in the rent.
Over time, homeowners are granted an increasing share of equity, until achieving full ownership in 30 years or buying it out beforehand.
Design Brief
We will be designing a desktop website interface as this is Rent the Backyard's primary online presence.
The main task of the website is for the user to share their contact information with the startup. As an early stage startup that is just reaching its proof of concept, the website acts as more of a touch point for interested users to understand ‘Rent the Backyard’ before reaching out to the company personnel.
Methodology
develop lo-fi prototype on balsamiq > present and critique with other groups > multiple iterations based on their feedback > final hi-fi prototype on figma
Part 1 | Sketching
With context from techcrunch, without looking at the actual website, we built for our target audience by identifying the direct and indirect stakeholders.
Direct:
-
Homeowners
-
Tenants in the SF bay area
-
Founders of employees of Rent the Backyard
Indirect:
-
Neighbors
-
Pets and Wildlife
We modeled 4 different user flows on Balsamiq.
Flow 1: Dropdown menu → Select Your Area → Get Started → Fill up form, inquire now
Flow 2: Homepage → How to rent your backyard → FAQ → Get Started page form
Flow 3: Why rent the backyard → 3 reasons and ‘contact us’ button --> ‘More about you’ user input form → ‘Talk to a real person’ screen
Flow 4: Home → About us → Learn more → Get Started
Flow 1
→
→
→
Flow 3
→
→
Final Prototype
→
Flow 2
→
→
→
Flow 4
→
→
→
Part 2 | Design Decisions
-
Flow 4, 'F' Layout: Our high fidelity prototype was based on “Flow 4”, as the “F Layout” allows the user’s visual flow to see all the components and information on the website before being directed to the action button.
-
Visual identity: For our font, we used the geometric arial to evoke a sense of modernity from the startup.
-
For the color scheme, we choose an array of pastel colours (yellow, dark blue, pink) due to their similarity in the HSV wheel, maintaining intermediate saturation.
-
Yellow operates as our primary colour, due to its association with optimism and happiness
-
-
5 tabs instead of the original 4, to improve memorability.
-
Reorganizing the information helped it align to users’ mental models, making it clear which tab to click on to complete a task.
-
-
'Get started now' cube: For example, because our main task required users to navigate themselves to the ‘Get Started’ page, we added a ‘get started now’ cube on every page as a quick-link.
- Redesigning the start-up’s logo, which we originally kept. Created a new one, resembling a house.
Part 3 | User Testing
Methodology: Posted our figma link to the site User Testing, which returned 3 recordings of participants within the age range of 18-65 who spoke through their thoughts as they interacted with our site.
You’re living in the San Francisco Bay area in a house with a garden. Our start-up “Rent The Backyard”, will build a house in your backyard and then rent it to tenants.
In exchange for building the apartment, financing the construction, listing the property, and selecting the tenant Rent the Backyard has a 50% ownership stake in the rent.
As you want to make some extra money, you visit the start-up’s website with the following tasks in mind:
-
Sub-task 1: Find information relating to how long it takes to build a house in your backyard
-
Sub-task 2: Find information with regards to building an extra parking spot.
-
Subtask 3: Find two benefits of renting your backyard
-
Main Task: Contact the start-up by getting to the ‘Get Started’ form
Hypothesis
-
Task One & Two: The users will navigate to the How it Works page and stay on this page to navigate between the sub-tasks using the drop-down menus
-
Task Three: The users will find two benefits of “Renting their backyard” by going to the Why Join page
-
Main Task: Users will quickly and easily be able to find the “Get Started” page, due to the button being visible in two different forms (sidebar and cube) on every page
User Testing results below:
User Testing metrics:
Takeaways
-
Importance of specific terminology when giving instructions for user testing.
-
Throughout iterations, be mindful of making changes based on overall user feedback