Homes by IDoGood.

 

Scope: Responsible website design, Branding
Client: Homes by IDoGood
Timeline: 8 weeks (August- October 2021)

Role: UX/UI Designer
Team: Self-directed; with feedback from mentor and peers
Tools: Figma, Whimsical, Zoom

The Company.

Homes by IDoGood offers over 16 aspiring-luxury short vacation rental properties in Canada, Greece, and Vietnam. They are currently listing their properties on platforms like Airbnb and Booking.com. They also offer property management services for homeowners. The culture Homes by IDoGood stands for is “Do Good, Feel Good, Stay Better“. Not only does Homes by IDoGood offer a lasting experience to their guests, but also makes good impacts on the people, the community, and the environment.

The Challenge.

Homes by IDoGood is looking to have its website redesigned. They want to direct their guests to request booking through their website instead of third-party platforms. They are also seeking investors, realtors, and homeowners, to have opportunities to turn their properties into running vacation rental businesses. 

The Objectives.

Redesign the Homes by IDoGood website to ensure its visual appearance presents the brand culture well, offers a good user experience for repeat guests, and has a clear explanation to potential investors and homeowners. In a later stage, will be working with developers and copywriters to build this website altogether.

The work is here.

 
  1. Emphasize

Conducting research and personas

Research Plan

Research Goals

We want to identify the key target audiences, know their goals, needs, motivations, and frustrations people have when booking short vacation rentals, as well as the messages we want to deliver the most to guests and investors.

Research Methods

  • Stakeholder interviews - To hear from stakeholders on the company’s current target market, products, performances, and goals.

  • Market Research - To study the trends of short vacation rentals and understand the market.

  • Competitive research - To identify direct and indirect competitors, including small short rental companies and large chains, to identify their strengths and weaknesses, as well as their features and designs overall.

Stakeholder Interviews

To start this off, I first had interviews with the stakeholders of Homes by IDoGood. We talked about their vision, brand culture and values, their target audiences, messaging matrix, performances, frustrations, and goals they have towards this project.

Target Audiences

  • Guests:  business travelers, cultural enthusiasts, families/friends/couples, remote workers, and mid-term renters in the mid/upper class.

  • Investors: homeowners, real estate investors, and real estate agents.

Secondary Research

I first conducted market research on trends of short vacation rentals. I also identified a few direct and indirect competitors from small independent companies to large international chains to compare their offerings. And later I concludeded a few provisional personas.

Persona

After gaining insights from the user research, now it’s time for us to create personas. Creating personas helped me to understand users’ needs, experiences, behaviors, and goals. I could use personas to build empathy with target users and focus on their world.

Meet Rachel, who presents the guests group. And Bernad, who presents the investors group.

2. Define

Project goals, in-depth competitive analysis, feature roadmap, sitemap

Project Goals

Now that we have empathized with the potential users, it’s time to move on to defining the project. We are first identifying a key problem statement, and finding the common grounds between business and user goals.

In-Depth Competitive Feature Analysis

We want to find the most fitted features and contents on our website for problem-solving purposes. To start this off, I identified a few competitors who are best in class, went on their sites, and did an in-depth competitive analysis specifically on their features and contents. I then rated each feature/content by its costs and values.

Product Feature Roadmap

We have limited time and resources, so we need to ensure we are spending on the most fitted features and content that deliver the most value. I then spoke with the stakeholders, and we went through features one by one to decide on the list of key elements that should be included in the website design at this stage.

Site Map

With the features and contents identified, I created a sitemap to help plan the structure of the website.

3. Ideate

Interaction design: task flow, user flow, wireframes

Task Flow

We’ll then move on to interaction design. To help us understand the user experience better, I created a task flow that includes the potential steps to take for main tasks.

User Flow

I further created a user flow, which takes potential users from their entry point through a set of steps towards a successful outcome and final action.

Wireframes

With the information architecture in mind, I started brainstorming a few layouts of each screen. I then developed high-fidelity wireframes in Figma and added copies that the client provided. Wireframing is an important communication tool because It gives the client, developer, and designer an opportunity to walk through the structure of the website without getting sidetracked by design elements such as colors and images.

4. Prototype

Visual design: UI Kit, UI design, prototype

UI Kit

Minimal, modern, clean, and environmental… Now we’ve defined the characteristics of this product, we are moving into the visual design. To achieve consistency and speed up the design process, I created a UI kit that contains a set of design elements such as UI components and styles. The client indicated that their brand color is British Racing Green, so I chose a color scheme that matches with the brand color.

UI Design

Now it’s time to put everything altogether! Here is the completed website design for Homes by IDG.

Prototype

I then created a prototype on Figma to show the navigation flow. This prototype is later to be delivered to developer for the actual built.

Please find the full prototype here.

5. Iterate

Usability test and priority revisions

Usability Test

Test Objectives

  • Test whether the users can get clear information on Homes-by-IDG’s brand culture.

  • Test whether it is easy and straight-forward for users to request booking and complete assessment quiz.

  • Note any generation hesitations, confusion, difficulties in the process.

Test Subject

A high-fidelity prototype (from Figma) that contains fully completed website UI design.

Test Methodology

  • Remote, one-on-one test, via Zoom with screen recording.

Test Participants

5 participates

  • Age: 25-55

  • Occupation: annual household income is +$200k

  • Location: North America, Asia and Africa

Test Results

Priority Revisions

It is good to know that usability test participants liked the overall design. But certainly they pointed out a few issues as well. After having a meeting with the clients to speak through each issue, we decided on a few things where need to be revised.

Reflection.

It was my very first time working with a real client. Through this project, it has taught me a lot on establishing trust, effective communication, anticipating their needs, and collaboration. It was a valuable experience for me to develop the soft skills and prepare for real-world business environment.

We are working with developers to build this website right now. Stay tuned :)

View more work…

Zeit.

 
 

Google Calendar.