VERTAFORE APPLICATION CATALOG
MODERNIZATION OF THE ORANGE PARTNER CATALOG
Vertafore works with complementary companies, whose products are integrated into the Vertafore's AMS360 product. These companies, better known as "Orange Partners," can be found in the application catalog.
Goal:
Redesign the application catalog, where Orange Partners are located
-
increase intuitiveness of flow
-
update to the Vertafore design system
Deliverable:
Updated flow of the application catalog, now both intuitive and visually appealing. Quick and easy recognition of Orange Partners.
Role and Skills:
Product Designer
-
conducted internal and external research
-
planned and facilitated on-site, cross functional workshop
-
design high fidelity mock ups and prototype ready for Development team
Teammates:
-
Lou Ordorica, Principal Product Designer
-
Michaela Clancy, UX Researcher
BEFORE AND AFTER - AT A GLANCE
The AMS360 application catalog was redesigned with the goal of modernizing the look by using Vertafore's design system and creating an easy, user friendly experience.
Before:
-
outdated design
-
tight spacing, making content difficult to read
-
tiny fields
After:
-
updated layout
-
utilized white space
-
larger fields
WORKSHOP
I helped organize an on-site workshop, which included members from the Product and Development teams. Vertafore is mainly a remote company, so this workshop gave us the opportunity to strengthen relationships between teams, give a face to Design, and most importantly, allow for collaboration and ideas outside of the Design team.
To prep for a group exercise, I did a quick competitive analysis of how other companies use third party integrations, similar to AMS360's Orange Partner program. The exercise included sharing comments (with FigJam stickies) to each company's screens and grouping the similar opinions.
INTERVIEWS AND INSIGHTS
Internal
Goals:
-
gain a better understanding of the relationships between AMS360, its users, and the Orange Partners
-
understand which how the feature works
External
We conducted three rounds of interviews:
-
current use, before workshop and redesign
-
first set of iterations
-
final iteration
Insights
-
separation of "Your Integrations" and "Available Integrations" brought clarity to status of integration
-
copy was confusing
-
user(s) skipped over text
-
vertical bubble stepper was confusing
WIREFRAMES
ITERATIONS
Modal Version
Informational Modal
-
logo and name
-
contact info
-
short description
-
screens
-
Learn More and Subscribe actions
Setup Modal
-
separate modal for each step
-
vertical stepper to keep track of progress
Access Key
-
short instructions
-
button for more instructions
-
access key
-
copy key to clipboard
One Page Version
Setup Page
-
logo only
-
short description
-
all steps on one page
Access Key Page
-
longer, more complete instructions
-
button for more instructions
-
access key
-
copy key to clipboard
FINAL SCREENS - MAIN INTERACTIONS
Informational Modal
-
name and logo
-
short description
-
contact information
-
screenshots of integration
-
Learn More pop out
-
copy changed to "Set Up Integration"
Orange Partner Applications Page
-
search bar
-
integrations split by Your Integrations and Available Integrations
-
cards with company logo, name, type of integration, and Learn More function
Completed Integration Modal
-
name and logo
-
contact information
-
integration users
-
functions to add, edit, or delete users
-
option to remove integration
Set up Integration Page
-
logo
-
all steps on one page
-
open field addition for Integration Users
-
Cancel, Save and Close, and Continue buttons in anchored action bar at bottom of page
Access Key Page
-
logo for quick visual reinforcement
-
concise instructions
-
button to add additional users
-
button to copy Access Key to clipboard to underline need to copy
-
toast to confirm success copying key to clipboard