Jovio Marketplace

About the project

The Jovio Marketplace is a consumer Real Estate listings platform created to connect people to a more efficient home buying experience. Users can search and find thousands of potential matches for their dream homes and easily engage with listings, learn details about properties, and connect with a Jovio agent to help move them through the home buying process.

My Role

Product Designer

Contributions

Developer Collaboration

Providing detailed specifications for all screens and components and working closely with developers to ensure the quality of deliverables.

Interaction Design

Leading design sprints by applying user research to low fidelity iterations to determine interactions, layouts, & user flows.

Prototyping

Delivering product mockups that enable stakeholders & developers to interact with fully functional components in a live environment.

Visual Design

Creating original high fidelity components and screens that are cohesive with the Jovio Brand Identity and Jovio Design System.

Project Challenges

Limited resources

  • No user data was available to use or reference

  • With little time and budget for proper user testing, interactions were validated through internal discussions

Short deadline

  • Retaining quality of work while also upholding deadlines

  • Settings expectations for deliverables

Small team

  • Task, deadlines and project hours were all self managed

  • Multiple initiatives from differnet projects required attention at the same time

What We Wanted to Achieve

From the beginning, our goals were very simple. Listings platforms are the core of every tech-enabled Real Estate company and we needed to offer a competitive product to debut against larger companies like Redfin, Listing Spark, Open Listings, and Door. The other big reason to build a marketplace was the opportunity to open our revenue stream from home sellers and tap into the home buyers market.

Our Goals

Deliver a functional product
Improve monthly buyer leads
Market More Homes Listed with Jovio

Design Challenges

1. Information hierarchy

A big task for our team was predicting what information would be the most critical for our users when looking for homes. There were dozens of attributes to consider what the user's hierarchy of needs might be including price, location, square footage, and listing photos.

2. User retention

Our research determined that home buyers often spend months browsing homes before finally wanting to take a home tour. Buying a home can be one of the most critical decisions in someone's life, so our release needed to include features that could keep users engaged over longer durations while considering their options.

Design & Production Process

Being a lean team allowed us to research, design, prototype, and validate ideas quickly. We worked collaboratively to outline the primary user flows, and after a couple of iteration and design explorations, we developed a design system to keep consistency through the experience.

Research

Our product owner led the research for Marketplace with support from myself and our Jr. Designer. We decided the smartest approach would be to study industry leaders with similar offerings to ours and leverage the most common trends that suited our design requirements.

Validating Solutions

Our design sprints moved quickly, so collaboration was a very important part of the design process. Our team had limited resources for research so much of the influence for validating ideas came from internal team discussions and reviews of low fidelity mockups.

High fidelity prototypes were an excellent way let stakeholders interact with a live version of the product for approval and also to give developers more detailed examples of interactions
Design Iteration

MAP SWITCH

Sketches A & B show options for how users would toggle between the two property viewing options, map view and list view.

We considered option B because at the time Airbnb used a similar interaction where users pushed the wayfind icon to acces the map and then used the X button to return to the list.
After reviewing we decided on option A because we thought there would be less cognitive load for the user if their was only one pattern for toggling view states on and off with descriptive CTAs.

Options:
Solution:

MAP INTERACTION

When we considered the interactions and flow through the map view, we had to consider much information to display on the property cards with limited space on mobile view.

Option A retained more visual patterns of the original listing card while option B rendered a more stripped down card with the price moved inside the wayfind pins on the map.

We liked option B and thought the cost of creating a new components was worth a more clear experience for the user.

Options:
Solution:

PROPERTY CARD

The four sketches explore where to place a label to mark properties listed by Jovio. An original objective for our team was to market more properties listed by Jovio, but this decision made us consider the importance of this feature to the user.

We came to a conclusion that marketing Jovio listings was a business need but not something that would fulfill any user needs, so we decided for option D because it played down the feature the most.

Options:
Solution:
Comparing User Flows

DASHBOARD FLOW

These examples shows options for users to navigate to our dashboard.

The first options shows an idea stakeholders had to allow users to navigate to a "locked" dashboard that would let them see, but not utilize features until they sign up. The locked features would ideally encourage people to sign up.

The second option suggest a more straight forward signup flow that excludes the locked dashboard experience.We decided to iterate with the second option because we saw too many opportunities for a locked dashboard to confuse users.

SIGN UP/LOG IN

After we approved the dashboard/signup flow we were able to abstract our sign up and login patterns. These interactions were initiated when users wanted to save a search or favorite a property.

I worked with our Junior Designer to create the modal screens for each flow.

DASHBOARD INTERACTION

Once users have signed up, they're able to access their saved searches and revisit favorited properties in their own user dashboard.

This dashboard experience was our solution for the challenge of retaining user activity over longer decision making timeline.

Prototyping Interaction Details

PROPERTY CTA

This interaction places the CTA only at the moments were it is relevant for the user on a property page.

Creating a prototype allowed us to demonstrate how we could clear visual clutter for users by hiding the CTA component once users have scrolled past property information.

MAP INTERACTION

The listing photo slideshow was one of the more complex interactions scoped for our for our developers to produce.

This prototype was built to show every detail necessary for production so there would be no discrepancies between the design and the finished product.

Validating Solutions

Our design sprints moved quickly, so collaboration was an essential part of our design process. Our team had limited resources for research so much of the influence for validating ideas came from internal team discussions and reviews of low fidelity mockups.

In later stages, high fidelity prototypes proved to be an excellent way for stakeholders to interact with a live version of the product. Prototypes also gave developers more detailed examples of how we intended interactions to work.
Design Iteration
1/3

MAP/LIST SWITCH

Sketches A & B show options for how users would toggle between the two property viewing options; the map view, and the list view.

We considered option B because at the time Airbnb used a similar interaction where users pushed the wayfind icon to access the map and then used the X button to return to the list. After our review, we decided on option A to lessen the cognitive load for users. It made sense to leverage one interaction pattern, as opposed to having two separate instances of buttons.

Options:
Solution Prototype:
2/3

MAP INTERACTION

For the map view, we had to consider how much information to display on the property cards and how we would work with limited space on the mobile version. Option A retained more visual patterns of the original listing card while option B rendered a more stripped-down card with the price moved inside the wayfind pins on the map. We liked option B and thought the cost of creating new components was worth a better experience for the user.

Options:
Solution Prototype:
3/3

JOVIO LISTING FEATURE

The four sketches explore where to place a label to mark properties listed by Jovio. An original objective for our team was to market more properties listed by Jovio, but these iterations made us consider the importance of this feature to the user.

We concluded that marketing Jovio listings were a business need, but not something that would fulfill any user needs. So, we decided on option D because it played down the Jovio Listings feature the most.

Options:
Solution Design:
Comparing User Flows
2/3

SIGN UP/LOG IN

After we approved the dashboard/signup flow, we were able to abstract our sign up and login patterns. We could then apply those patterns when users wanted to save a search or favorite a property.

I worked with our Junior Designer to create the modal screens for each flow.

Solution Prototype (dashboard/sign up flow):
3/3

DASHBOARD INTERACTION

Once users have signed up, they're able to access their saved searches and favorited properties in their user dashboard.

This dashboard experience was our solution for the challenge of retaining user activity over a longer decision-making period.

Solution Prototype(dashboard logged in flow):
1/3

DASHBOARD FLOW

These examples show options for users to navigate to our dashboard. The first options show ideas stakeholders had to allow users to navigate to a "locked" dashboard that would let them see, but not utilize features until they sign up. The locked features would ideally encourage people to sign up after they find out about the features they can get. The second option suggests a more straight forward sign-up flow that excludes the locked dashboard experience.

We decided to move forward with the second option because we saw too many opportunities for a locked dashboard to confuse users.


Options:
Prototyping Interaction Details
1/2

PROPERTY CTA

This interaction places the CTA only at the moments where it is relevant for the user on a property page. Creating a prototype allowed us to demonstrate how we could clean up visual clutter for users by hiding the CTA component once users have scrolled past property information.

2/2

PROPERTY CARD

The listing photo slideshow was one of the more complex interactions scoped out for our developers to produce. This prototype was built to show every detail necessary for production, so there would be no discrepancies between the design and the finished product.

The left and right arrows trigger both the slideshow and the scroll animation at the bottom of the photo.

Design System

Having a design system as a part of our sprints enabled us to have clarity maintaining UI & UX patterns. Not only did we have the ability to organize and update components, but the rules and guidelines we created for styling and production made collaboration with our developers that much easier.

Pattern Library

COMPONENTS

Retrospective

My Takeaways

The response for the design of Marketplace was very positive, but looking back there’s plenty I would change about our approach. I wish I had given more transparency to our process with stakeholders earlier in the design process so our sprint planning could have gone smoother. I especially think that with more open conversations we would have decided on a more agile workflow with development.

I learned that as a Product Designer, a big part of the job is getting your team to share the same vision. Based on the response from our delivery, I feel good knowing that I was successful in sharing my vision. However, better communication with our developers would have helped our final delivery look and function closer to our prototypes.

If I could do it again I would...

  • Build closer working relationships with developers and pay more attention to the gap between design & development.

  • Define clearer success metrics at the beginning of the project.

  • Work agile and spread design task across a longer timeline synced with development sprints

  • Encourage more user research before solving problems

Team Goals

Deliver a functional product

SUCCESS

  • All user requirements were delivered on time.

Improve monthly buyer leads

SUCCESS

  • Buyer signups doubled in the first two months after launch.

Deliver a functional product

REEVALUATED

  • This goal seemed important as a business case for Jovio, but after trying to solve for it we found that it did not entirely align with user goals.

Case Studies

JOVIO MARKETING

Jovio Brand Identity

Case Studies

JOVIO MARKETING

Jovio Brand Identity