Realogy API Portal
Providing accessible API Products to internal and external developers
Overview
Realogy is a leading global franchisor of some of the most recognized brands in real estate. Providing solutions for real estate through their many services and tools, they have 40 API products (and growing) that internal developers can access through their API portal. With this growing list, the company wanted to make their API’s public by offering a market facing website for external users to access while providing a more usable interface for their developers to obtain information. Challenge
The current API portal had been developed with great intentions, but without any design thinking. API products were labeled with obscure title’s and definitions, and there was no clear path for users to take to find the details they were looking for. Developers were often giving up and finding other sources to try and get what they needed.
My Role
As the lead designer, I worked closely with the IT Director to redesign the entire product to align with the new direction and vision. My role involved product direction, UX research and design, visual design, illustration and prototyping. The Objective of the 2 month project was to create a brand new version of the portal to present to stakeholders. Our goal was to simplify the steps that users need to take to retrieve what they are looking for while providing an easier way to get authorization and access.
User Insight
Needs
Ability to get authorization/access to keys/tokens quickly and easily.Shorten the process by minimizing steps.To see clear, consistent examples of code. What order and how it’s displayed.Documentation to be familiar layout that is easy to sort through quickly with no extra steps.Context about the API’s throughout the process.Directions/instructions about how to do things.Pain Points
User is not getting enough directions/instructions about the information.Getting access to API’s is time consuming.They have to use multiple sources to get all the info they need.Users get stuck when there’s an error or missing info.They don't realize there are API’s in the portal because of missing context.They don't have enough examples of how to do things.Goals
Ability to get everything from one place.
Get everything they need as quickly as possible.
Share and publish API’s.
Cut down time it takes to get authorization.
Before
After
Details
Homepage
Since this was going to be a market facing website as well as a portal for internal developers to use, the goal of this page was to visually promote Realogy API’s while offering quick access to the API products. It offers information about about what is being offered, while giving visual representations of API’s for real estate. Users have options to explore in more depth, get access or go to support.
API Products Page
API’s are now clearly laid out with new title’s and descriptions that provide context about what that product is for. Icon’s have been customized for each card, labels on the cards indicate what category the API is under (e.g. franchise, brokerage, listing, tools, leads). There are also chips on each card indicating the business unit and system.
Users are able to filter through API’s by industry, system and unit. They can add API’s that they use frequently to a “my favorites” section and will be starred.
If users are unsure or have questions, they can visit the support page or view how it works. View OAUTH is accessible for them here and on the homepage.
API Details
We found that developers are most familiar with page structures that include left hand menus. The menu on this page allows information to be broken down into sections the users can toggle between. The API summary describes the key features, requirements, how it works, what they need to use it and featured API’s. Get Access is available in both the summary page and the menu. Users are also able to add the API to their favorites section.
API Specification
The team decided to use Redocly to build the specification for each API product. The customization was limited, however we were able to adjust colors and structure to match the theme of the website.
Get Access
Users are able to request sandbox, trial or production access and receive authorization. After requesting access, users will be taken to a dashboard that shows them the status of the API’s they have requested access to. They will also receive an email when the API status is updated.
Dashboard
Due to time constraints, I designed a phase one version of the dashboard that would be easier for developers to build for the first internal launch. Most of the functionality is the same, however I updated the designs to match the theme of the website. Implementing the left hand menu will allow information to be in one place and solve the problem that developers are currently having with finding what they need.
Before:
