Property Cards Microinteraction and UI

New Home Source is an online E-commerce for the Real Estate Market. The property cards are always in constant improvement. A new featured card called “Spotlight” needed a distinct design and treatment, so a microinteraction and UI style was implemented.

My role and activities in producing this piece/project

As a UX/UI designer I get to do a few different design alternatives that have to do with component layout, Accessible color composition, and interaction animation, a micro-interaction was implemented on this component so that our main offers are presented to the user are easy to find and actionable. Design, and prototype animation with Figma. 

What problem was solved? / the reason for the project

On this e-commerce site, products are shown as property cards, and some of them are used as advertising spots so that our partners can opt-in to a program where they pay an additional fee to help their listings be shown more predominantly on the set of search results. This component needed to be highlighted, without looking too invasive on the page.

What was the outcome? How did it help the business? How did it help the users?

The card was visually presented and animated as a highlighted element, and it has increased click-throughs up to 25% more than in the previous test run. Other partners have shown interest in purchasing this type of feature to increase their listing visibility.

Who else was involved?

The Product team made the request based on the business stakeholder’s needs.

How long did it take?

1 week concepts and prototypes

Previous
Previous

ONE Place Interior Design Quote App

Next
Next

E-commerce Search Results Page Mobile