How a Homesharing Web Redesign to Increase Adoption and Engagement Rates

Improving the existing Group feature to increase conversion rate and retention.

Business Goal

The existing web platform for Groups had a lack of visual hierarchy, education, and functionality leading to low engagement rates. The goal was to make the Group experience more smooth, efficient, and engaging.

My Role

As a Product Designer, in a team of two, I carried out project management, usability audits, user research, ideated and created wireframes, and developed an interactive prototype.

laptop example of myplace group detail page - ux ui portfolio by kathleen murillo

Project Overview

MyPlace was looking to scale and grow their business, and created a group feature. However, users were not adopting this feature. Users also wanted an easier way of connecting with other members on the platform. We set out to create design solutions that met both business and user needs.

puzzle icon symbolizes my role

The Company

  • Domain: Social Network, Homesharing
  • MyPlace is a social home sharing network that connects friends who are looking to share their homes with people they trust, revolutionizing the way we travel.
  • The MyPlace product is a beta platform that encourages building a community of like-minded travelers across the globe.
people icon symbolizes the team

The Team

  • Product Designer, Kathleen Murillo
  • Product Designer, Kristin Jaworowski
tool icon symbolizes skills

Skills

  • UX/UI Design
  • Usability Audit
  • Competitor Analysis
  • User Research
  • Interaction Design
  • Visual Design
  • Information Architecture
  • User Flows
  • Wireframing
  • Prototyping
landing pages from myplace case study - ux ui design kathleen murillo portfolio

The Process

BUSINESS REQUIREMENTS

How will improving the group process contribute to business goals for MyPlace?


The idea of ‘Groups’ on MyPlace is, we all have different groups of friends and communities in the real world, such as social circles, family units, or professional networks. MyPlace wanted to enable users to recreate or join the groups that are relevant to them and who they want to share their home with.

The goal of this project was to improve the current Group experience, thus not only increasing engagement and adoption, but also expanding MyPlace as a business.

Goals, Objectives, and Business Brief

🎯 User and Business Goals

  • Business Goal: Increase adoption and engagement of the group feature
  • User Goal: Help new users successfully and smoothly create, join, and engage with groups

📃 Brief by MyPlace Product Design Team

Business Questions

  • Is there a way to make this concept of groups more exciting and compelling in order for new users to utilize this functionality?
  • What would groups look like if it was just your closest friends or colleagues?
  • What kind of features would users want?
  • What would users want to see?
  • What would users be interested in knowing about the members in order to connect with them effectively in the group setting?
  • What would make it fun to use?

Initial How Might We

How might we provide a smooth group creation experience?

Scope, Constraints, and Assumptions

A tight timeline with constraints

📅 Project Scope and Timeline

We had a 4 week turnaround which presented a tight timeline, along with no budget.

With this, in order to keep us on track, I created a project schedule with tasks using Asana of all major milestones and phases.

asana from kathleen murillo ux ui portfolio for MyPlace project

⛓️ Constraints

We had access to MyPlace’s brand guidelines in Figma, however it was bare bones and limited in styles.

Given no budget, we had to be resourceful in the tools and methods used.

We did not have visibility of the following key information from stakeholders:

  • Existing user flow of group experience from the back-end
  • Target audience demographics (age, device usage)
  • % Drop-off rate from group dashboard page
  • % CVR rate of group listings created

🖊️Assumptions

We made the following assumptions to help move our project forward:

  • Users create groups with an online form process
  • Target audience: Older Millennial (25-45), Desktop
  • High % drop-off rate from group dashboard page
  • Low % CVR rate of group listings created

🗺️ Discovery

User Stories

User stories narrowed focus for usability and competitor auditing

We kicked off the project by identifying main user stories to not only empathize with the user, but also to help us stay focused during our usability audit and competitor benchmarking.

Kristin created a variety of user stories. I determined the top 3 user stories by identifying which ones best helped solve the main problem first identified by the MyPlace team: creating a smoother group experience for new users.

The main points found were:

  • Target segment: someone who travels
  • User goal: to share their home with groups of people they trust
  • Outcome: to ultimately have a peace of mind while away

I combined all of the user stories into one cohesive story:

user story from kathleen murillo ux ui portfolio for MyPlace project

Usability Review

Auditing the current product revealed a lack of visual hierarchy, education, and functionality

To help me better understand the product, I conducted a usability audit to identify pain points and wow moments in the existing experience. My partner and I each did a full sweep of the current group experience.

usability review ux ui project kathleen murillo portfolio

Key Frustrations and Takeaways

Following a usability review, we defined the main frustrations and takeaways in key areas of the product. This helped us later in identifying and narrowing our focus in the initial problem space.

  1. Homepage lacking visual hierarchy and visibility of groups
  2. Group dashboard lacking education and functionality
  3. Group detail page lacking education and engagement

Competitor Benchmarking

Prioritizing Facebook for competitor analysis due to time constraints

After reviewing the current product, we moved into competitor benchmarking to identify key patterns across direct and indirect competitors.

As we conducted this, unfortunately time constraints came up. We had to prioritize covering one direct and indirect competitor. We also understood we could come back and add to the competitor analysis if necessary in later parts of our project.

Kristin did a direct competitor and I focused on indirect. Afterwards she found out that MyPlace was still very new in the Homesharing industry and had less direct competitors. So, we decided to analyze more deeply an indirect competitor instead.

Also given the topic of Social Groups, indirect competitors made more sense here. I decided to focus on analyzing Facebook because they are such a leading industry giant for social networking of Older Millennials. I used our main user story to help me narrow down which areas of the platform to focus on.

competitor analysis ux ui project kathleen murillo portfolio

Key Takeaways and Patterns

  • Members were allowed to freely join and invite others to a group
  • Clear hierarchy of information on the group’s main page
  • Privacy option exists for public or private groups
  • A discover/explore page for finding relevant groups to join
  • A dedicated page for allowing a user to easily create a group
  • Communication functionality to connect with friends / other group members

Initial Problem Statement

Formulating an initial problem statement as our north star before diving into user research

After conducting a usability review and competitor analysis, the findings helped us tremendously in forming our initial problem statement before heading into user research. The problem statement acts as a critical foundation as we navigate through the project.

A Holistic Breakdown

We first broke down the problem space into: who, what, where, when, and why.
This helped us to understand holistically from all angles what key areas affected the problem space.

problem space from kathleen murillo ux ui portfolio for MyPlace project

Initial Problem Statement

After creating an account new users to Myplace are not provided guidance and education on what groups are and how to use them. If they did want to use the feature they currently cannot create their own groups. These features will help Myplace grow the community and scale the business.

🔍 Research

User Research Plan

Careful planning prior to research ensured clear direction and preparation

Method of user interviews

We chose User Interviews as our main research method because it was important for us to fully understand what motivates users to engage with Groups overall. This method would provide richer insights and data, and ultimately drive more informed design decisions later on.

Research plan for direction

Before conducting research, having a plan in place was important to set the tone and direction clearly. I created the template and we compiled the business questions, hypothesis, purpose statement, set of main research questions, deliverables, and timeline.

If we were able to connect with Stakeholders, we would've actively discussed and collaborated with them on this document, to ensure we’re on the same page and what they want answered, before setting out research.

Survey resulted in 4 interviewees

In order to recruit users, I led the creation of an online survey form. This helped us with keeping track of candidates, outreach, and if they were the right fit for our study.

We ended up finalizing 4 interviews, and split them between us by conducting 2 interviews each, with these demographics:

  • Age 25 to 45
  • Connected with groups or communities on social platforms
  • Last time traveled within the last 2 years
survey from kathleen murillo ux ui portfolio for MyPlace project

Discussion guide organized questions

I suggested we format the guide into key sections, so that it helps form our questions better and keeps us focused during the actual interviews.

discussion guide from kathleen murillo ux ui portfolio for MyPlace project

User Interviews

Conducting user interviews to uncover motivation and attitudes that drive communities together

Iterating on Interview Questions

As we conducted interviews, I noticed some interview questions were leading to redundant information and not leading to more rich insights. So I decided mid-interviews - to meet back with my partner and discuss how we could refine the questions, which ultimately led us to gather in later interviews more insightful feedback.

An Interview Challenge

During one of Kristin's interviews, she encountered a participant who felt strongly about privacy and safety concerns around homesharing. This took us off guard. However, it turned out to help our research even further - to see the opposite end of the spectrum, and to keep our bias in check. We added these new insights to our additional bonus findings.

Synthesis

A challenge during Synthesis led to strategizing a new way of affinity mapping

Initially we started to create an affinity map by organizing the groups all within the same tags. However, it became very challenging to understand what each meant without any context behind each tag.

So in order to gain more context and clarity, we decided to pivot. It’d be more helpful to affinity map all the tags by using our interview questions from our discussion guide, as a base structure/outline.

We grouped them into these 3 key areas: homesharing, groups, and connection. From here, it was easier to pull common themes out and formulate them into key research insights.

affinity map from kathleen murillo ux ui portfolio for MyPlace project

MAIN RESEARCH FINDINGS and insights

Building trust, shared values, and deeper connections were key factors in forming rich group experiences

Overall trust is the biggest factor in participants' decision to share their home.

research finding ux ui project redesign kathleen murillo portfolio

“Because we have similar interests, I can have enough trust to host this person.” - P1

Participants view community as a place where people come together over shared values.

research finding ux ui project redesign kathleen murillo portfolio

“Your environment can be part of your community…a group of beings that kind of come together over a shared commonality and trust.” - P2

Even though there were various ways people gathered in groups, whether virtually or in-person, professionally or personally, the common thread was sharing.

research finding from myplace case study - ux ui design kathleen murillo portfolio

“I can connect with anybody from anywhere in the world, and I can message them and connect with them, and engage in a conversation.” - P1

Building deeper connections through consistent communication within communities is important for continued engagement.

research finding from myplace case study - ux ui design kathleen murillo portfolio

“Recently I deleted a bunch of dead WhatsApp groups and I left multiple Facebook groups only because there were so many posts coming through, and I could not keep up with them. It’s kind of why I never interact with them. Why am I here?” - P3

Information Architecture - Existing

Mapping the information architecture to gain a better understanding of how to improve the hierarchy

We mapped out the existing information architecture of the group experience flow to understand fully gaps and opportunities for optimization.

Key Takeaway

Groups are difficult to find and need more visibility / hierarchy on the MyPlace Platform.

existing information architecture from myplace case study - ux ui design kathleen murillo portfolio

Problem space - iteration

Iterating on the problem statement after research

After we conducted research and analysis expanded, it helped as a tool to refine and iterate on our problem statement. It helped to define the path to an MVP, seeing the problem space as an iterative process.

Initially our problem statement focused on just group education, however after research, it now involved so much more - based on shared values, trust/safety, and connection.

Annotating to show connections in UX process

We incorporated these main strong themes from our research into the problem space, and refined our problem statement. To further show where these points came from, I annotated each to show which part of our UX process they came from.

iterating on the problem space - kathleen murillo ux ui portfolio project myplace

New Problem Statement - V2

After logging in new users to MyPlace don’t understand what Groups are and how to use them. They don’t feel safe sharing their homes without building trust with others first. They currently cannot create their own groups, nor form deeper connections with group members, such as sharing common values and networks, providing support, or meeting together.

This is important because the Group experience will help MyPlace grow the community and scale the business.

How Might We Statements

Based on discovery and research findings, ‘How Might We’ statements were formed in prep for ideation

At this phase, we created ‘How Might We’ (HMW) statements to help generate ideas of solving our core problem.

In order to holistically pull from the initial discovery and research phases of our project up until this point, we created high-level HMW’s based from findings in these three key areas:

Initial problem statement and usability review

💭 How might we educate new users on what groups are, how to create them and how they function?

Existing information architecture review

💭 How might we prioritize Groups and increase its visibility on the platform?

Key research insights

💭 How might we allow users within a group to communicate with each other?

💭 How might we give users opportunities to forge deeper connection with members of their groups?

💭 How might we ensure users trust the business and feel safe sharing their home?

💡 Ideation

mind mapping

Prioritizing feature ideas with mind mapping

We decided as an exercise for Kristin and I to create separate mind maps first, and then come together after in a brainstorm discussion. This helped to bring together more rich ideas and solutions to the table.

From my mindmap, I pulled from all areas of our design thinking process, to help me formulate the best effective ideas and drive design decisions:

  • problem statement
  • business goals
  • usability review
  • competitor audit
  • research insights
  • groupings and tags
mind map from myplace case study - ux ui design kathleen murillo portfolio

impact effort matrix

Using an impact effort matrix helped prioritize solutions for the MVP

With all of our ideas in front of us we began to prioritize what to include in the MVP, keeping the business goals and our research insights top of mind.

impact matrix from myplace case study - ux ui design kathleen murillo portfolio

user flows

Managing, viewing, and navigating through groups drove the creation of existing and improved user flows

Following Ideation, we created user flows of the existing experience and improved the flow based on our proposed ideas. The user goals we focused on were:

  • creating/managing a group
  • viewing your groups
  • navigating through a group detail page

INFORMATION ARCHITECTURE - IMPROVED

An improved information architecture for group dashboard, page, and member profile

With our improved user flows mapped out we moved on to defining the IA of our target areas, the group dashboard, group detail page, and member profile. We drilled down by page and section, but not all components were defined as of yet so we didn’t dive too deeply into all of them at this time.

improved information architecture from myplace case study - ux ui design kathleen murillo portfolio

low-fidelity wireframes

Rapidly sketching low-fidelity wireframes with top solutions in mind

In order to help us stay focused, we referenced back to our problem statement (if these features helped solve the core problem), as well as our research insights.

Two main pages we focused on for the MVP were: group dashboard and the group detail page. Our reasoning was because these were the main blockers of a user to engage with and create groups in the first place.

🖥️ UI Design and Prototype

style guide

Defining UI styles in advance eased the design process

We created the UI styles in Figma referencing the brand guidelines that MyPlace provided. Having these styles set up, made it much easier to create the components and ensure all had the correct color, type, shadows, and grid applied to them as necessary.

UI color styles for ux ui redesign project MyPlace case study - kathleen murillo portfolio

COMPONENT SOURCING AND BUILDING

Referencing the lo-fi wireframes and user goals sped up component building

After we sketched our lo-fi wireframes, this helped us to determine which components to create. We annotated which components were most important, and organized them by using the atomic system principles: atoms, molecules, and organisms.

example of components from figma file for ux ui design portfolio kathleen - myplace case study

high-fidelity prototype

Prototyping for key moments/flows and use cases

Both flows feature the same pages and decisions, but different experiences for the user depending on where they are in their MyPlace journey.

Creating a group as a New User

NEW USER FLOW - Live prototype

View Prototype

Creating a group as an Existing User

EXISTING USER FLOW - live prototype

View Prototype

Group Detail Page

The original group detail page lacked in visual hierarchy, page layout and organization, and did not provide any functionality for group members to connect with one another.

With the new design, we integrated features from our user research, such as the sharing post module - which calls back to the finding of how groups preferred to bond over shared interests and goals.

group detail page before and after from myplace case study - ux ui design kathleen murillo portfolio

Group Dashboard

With the previous group dashboard, it had very limited functionality with only access to viewing their current groups, but no way of creating or managing one. You were able to discover groups, but it lacked visual hierarchy and context to help a user decide better which group is right for them.

The new design featured a tab menu with each section helping to achieve a user's primary goals of managing, discovering and creating their groups.

my groups before and after from myplace case study - ux ui design kathleen murillo portfolio discover groups before and after from myplace case study - ux ui design kathleen murillo portfolio manage groups on dashboard from myplace case study - ux ui design kathleen murillo portfolio

Reflection

Key Takeaways and Learnings

People are built for connection and seek it in many forms. This was our guiding light during the entire project. Every decision we made was run through the filter of our research, often times quotes from our interview participants running through our minds.

  • We learned that iterating wasn’t just a part of the ideating process, but also an essential part of the research synthesis process. It’s about sifting through and going back to see the research with fresh eyes.
  • Also that the problem space was an iterative process in itself. After researching, we went back to refine and polish the problem statement further - to help inform our ideation.
  • Being open to moving back and forth to different phases of the design thinking process, understanding it’s not a linear process - but is an entire ecosystem.

Challenges

  • Time was definitely a constraint during this case study. Tackling a research project of this size and completing the deliverables was a tall order. We had so many ideas that we were excited about developing and it was tough to let some of them go as we realized that we would not have time to built them in this sprint. However, this kept returning our focus to our MVP. As well as iterating on the MVP itself using our research insights, target users, and priorities top of mind.
  • Understanding that it was a “give and take” process - learning what would be more efficient and optimal based on the constraints (time, resources, and viability) in that moment.
  • We had to understand that in a real-business setting, we’d have engineers / developers and PMS, all here to collaborate on what would be possible as well - which could help us tremendously in prioritizing which features to move forward with.

If We Had More Time

We’d like to put more effort in further exploring and flushing out designs for these areas for future design sprints:

  • User verification - building out the user flow for how to sign-up for that with new users
  • Build out further group admin functionality, such as with Settings - can they approve members who sign-up to private unlisted groups? Ability to control posts (what is allowed, or what can be pinned?)
  • Audio feature - share an audio recording, or add an audio introduction of yourself on your profile (gain trust, build connection)
  • Discover groups search functionality - exploring what is more effective → filter versus search bar
  • Member profiles - adding a shared interests label (trust/shared values insight), or an ability to easily recommend friends to other hosts (trust for sharing a home)
  • Events feature (live, past, and upcoming) - flesh out how members could connect with each other virtually and in-person
  • Virtual - recording a live video for members to view their home, a walk-through
  • Reactions - giving and sharing support with others

Explore More Projects

desktop and mobile mockups for neon shoot kathleen murillo portfolio

EYE Frame

A 360 Campaign design collaboration to increase brand awareness

desktop and mobile mockups for neon shoot kathleen murillo portfolio

Neon Shoot

Creating campaign imagery used across digital and print