Ad Center
The web application to buy ads and manage budgets.
Background
Corcoran's Ad Center for agents is about 20 years old with an old-fashioned user interface and cumbersome functionality, and it needed to be redesigned.
I worked as a UX Designer with a product manager and two developers to design and build a new Ad Center to increase efficiency of the ad team, managers and agents.
Strategy
1. Defined feature requirements and prioritized all the features for the new Ad Center.
2. Announced it to a small group of agents, collected feedback, and improved the experience for the wider launch.
3. Added and improved features based on feedback in the following sprints to meet the full ordering and management requirements.
Understanding the User
We had intervied our users to better understand how they use the Ad Center. I created a list of three types of users detailing their situations, motivations, and outcomes (aka. the Job Story framework).
Agent
When I have new properties and enough budget
I Want to create ads for my new properties
In Order To build my reputation/brand, attract customers, and sell my properties
Agent
When I need a better understanding of my budget
I Want to easily check my transaction history
In Order To know my budget balance and how my budget is being used for each ad order
Manager
When new transactions happen
I Want to easily check the transaction record
In Order To understand how budget is being spent, enforce fiscal controls, and ensure agents don't spend beyond their budget allocation
Admin
When new ads are submitted
I Want to review, approve, or reject agents' ads
In Order To manage ads, keep ad quality, and help agents generate revenue
Admin
When new ad programs are available
I Want to create, edit, and publish new ad programs
In Order To give agents more ad options
Task Flow
To thoroughly think through each step an agent, admin, and manager will be experiencing, I created a task flow chart to flush out design details.
Ad Center User Task Flow
Wireframe
I wireframed the basic functionalities and the structure based on our task flow and job stories with my product manager.
UI Design
I created a UI system that promotes consistency and scalability inspired by the idea of Atomic Design. I broke down entire interfaces into fundamental building blocks and worked up from there.
Basic Elements
Functional Blocks
Here is the high fidelity UI of some key screens in Ad Center:
Ad Ordering Page: choose an ad program
Ad Ordering Page: edit ad
Ad Management Page: review/approve/reject ad
Budget Center Page
Iteration
Below are snapshots of the evolving interface for each release, taking Ad Ordering page and Budget Center page as examples:
Iteration of Ad Ordering Page
Iteration of Budget Center Page
Feedback
We rolled out the new Ad Center, and people are saying:
"It's so much better than what we had in terms of user friendliness." - Sag Harbor Agent
"This is the smoothest launch we've had out here." - Hamptons Agent
"I was able to order this morning. Seems pretty self-explanatory. I enjoyed it!" - Brooklyn Agent
"It's straightforward and clean." - Manhattan Agent
My Contribution
UI Design, UX Design, Front-End Development.
Tools Used
Sketch, HTML, CSS, jQuery.