
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.
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
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.