Vistafication
Vistafication
Vistafication
Vistafication
Synchrony's Consumer Center platform manages user logins, while their newer platform Vista handles card management. But similar account management overlap began the initiative to unify the product experience by integrating Consumer Center into Vista. My role involved redesigning the login flow within Vista, focusing on enhanced error prevention and accessibility.
Synchrony's Consumer Center platform manages user logins, while their newer platform Vista handles card management. But similar account management overlap began the initiative to unify the product experience by integrating Consumer Center into Vista. My role involved redesigning the login flow within Vista, focusing on enhanced error prevention and accessibility.
Synchrony's Consumer Center platform manages user logins, while their newer platform Vista handles card management. But similar account management overlap began the initiative to unify the product experience by integrating Consumer Center into Vista. My role involved redesigning the login flow within Vista, focusing on enhanced error prevention and accessibility.
Synchrony's Consumer Center platform manages user logins, while their newer platform Vista handles card management. But similar account management overlap began the initiative to unify the product experience by integrating Consumer Center into Vista. My role involved redesigning the login flow within Vista, focusing on enhanced error prevention and accessibility.
📌
📌
Due to an NDA I am only able to show limited examples of design work
Due to an NDA I am only able to show limited examples of design work
Due to an NDA I am only able to show limited examples of design work
ROLE
UI/UX Designer
TEAM
Corinne Driban
James Farrand
DURATION
4 Months
TOOLS
Figma
Invision
Sketch
Context
Context
Context
Synchrony is one of the largest private label credit card providers 💳
Synchrony is one of the largest private label credit card providers 💳
Synchrony is one of the largest private label credit card providers 💳
Synchrony is one of the largest private label credit card providers 💳
Synchrony partners with many major retailers and service providers across various industries:
Synchrony partners with many major retailers and service providers across various industries:
Synchrony partners with many major retailers and service providers across various industries:
Sitting in 71 million active customers pockets are Synchrony cards that users previously managed through the Consumer Center.
Sitting in 71 million active customers pockets are Synchrony cards that users previously managed through the Consumer Center.
Sitting in 71 million active customers pockets are Synchrony cards that users previously managed through the Consumer Center.
Sitting in 71 million active customers pockets are Synchrony cards that users previously managed through the Consumer Center.
with Invisions discontinuing services, the design team needed to plan a seamless transition of these demos for diverse use cases within the company and public access.
with Invisions discontinuing services, the design team needed to plan a seamless transition of these demos for diverse use cases within the company and public access.
with Invisions discontinuing services, the design team needed to plan a seamless transition of these demos for diverse use cases within the company and public access.
The Probelm
The Probelm
The Probelm
Logging-in Felt Fragmented…
Logging-in Felt Fragmented…
Logging-in Felt Fragmented…
Logging-in Felt Fragmented…
Consumer Center and Vista have different UI and making the overall experience across platforms feel detached.
Consumer Center and Vista have different UI and making the overall experience across platforms feel detached.
Consumer Center and Vista have different UI and making the overall experience across platforms feel detached.
Consumer Center
Consumer Center
Consumer Center
Vista
Vista
Vista
This difference would be highlighted in the future merge of the Consumer Center Login into Vista, thus requiring the design team to push redesigning this login experience.
This difference would be highlighted in the future merge of the Consumer Center Login into Vista, thus requiring the design team to push redesigning this login experience.
This difference would be highlighted in the future merge of the Consumer Center Login into Vista, thus requiring the design team to push redesigning this login experience.
Our Goal
“How might we integrate the Consumer Center Login into Vista to create a more cohesive journey and facilitate a seamless future platform integration?
Our Goal
“How might we integrate the Consumer Center Login into Vista to create a more cohesive journey and facilitate a seamless future platform integration?
Our Goal
“How might we integrate the Consumer Center Login into Vista to create a more cohesive journey and facilitate a seamless future platform integration?
Our Goal
“How might we integrate the Consumer Center Login into Vista to create a more cohesive journey and facilitate a seamless future platform integration?
The Solution
The Solution
The Solution
Begin "Vistafication" of Consumer Center ✨
Begin "Vistafication" of Consumer Center ✨
Begin "Vistafication" of Consumer Center ✨
Begin "Vistafication" of Consumer Center ✨
Consumer Center and Vista have different UI and making the overall experience across platforms feel detached.
Consumer Center and Vista have different UI and making the overall experience across platforms feel detached.
Consumer Center and Vista have different UI and making the overall experience across platforms feel detached.
📲
📲
📲
Consumer Center
Consumer
Center
Consumer Center
User Login
User Login
User Login
🤝
🤝
🤝
🔵
🔵
🔵
Vista
Vista
Vista
Card Management
Card Management
Card Management
“A design to handhold the platforms and make migration easier instead of jumping blind.”
- James Farrand, VP UI Design
“A design to handhold the platforms and make migration easier instead of jumping blind.”
- James Farrand, VP UI Design
“A design to handhold the platforms and make migration easier instead of jumping blind.”
- James Farrand, VP UI Design
“A design to handhold the platforms and make migration easier instead of jumping blind.”
- James Farrand, VP UI Design
Design Approach
Design Approach
Design Approach
Building For Fast Sprints
Building For Fast Sprints
Building For Fast Sprints
Building For Fast Sprints
Responsive Design
Responsive Design
Responsive Design
We did not have a working file of Consumer Center, and all screens needed to be reconstructed from desktop screenshots. Our development team needed us to be able to design fast for both web and mobile to review
We did not have a working file of Consumer Center, and all screens needed to be reconstructed from desktop screenshots. Our development team needed us to be able to design fast for both web and mobile to review
We did not have a working file of Consumer Center, and all screens needed to be reconstructed from desktop screenshots. Our development team needed us to be able to design fast for both web and mobile to review
Individual Reference States
Individual Reference States
Individual Reference States
Our develop team needed screens for each state, error, and edge case that may occur in the user journey. We made sure to account for every state in our high fidelity designs and organized them for clear development.
Our develop team needed screens for each state, error, and edge case that may occur in the user journey. We made sure to account for every state in our high fidelity designs and organized them for clear development.
Our develop team needed screens for each state, error, and edge case that may occur in the user journey. We made sure to account for every state in our high fidelity designs and organized them for clear development.
Patterns & Components
Patterns & Components
Patterns & Components
With interactions being a large part of the dashboard, it was key to establish a design system that could allow for micro interactions and on going text updates.
With interactions being a large part of the dashboard, it was key to establish a design system that could allow for micro interactions and on going text updates.
With interactions being a large part of the dashboard, it was key to establish a design system that could allow for micro interactions and on going text updates.
Final Designs
Final Designs
Final Designs
Key Redesigned Elements
Key Redesigned Elements
Key Redesigned Elements
Status Indication
Status Indication
Status Indication
Before
Before
Before
Used simple UI and outdated branding to indicate steps in the login process.
After
After
After
Updated to have more visual indicators on login progress and emphasis if the login step is complete or in progress.
Password Strength
Password Strength
Password Strength
Before
Before
Before
The progress bar was vague and did not properly communicate password strength.
After
After
After
Removed the strength bar because it misrepresented password strength and opted to make clear requirements with color/iconography for visual support.
Screen- Reader Accessible Buttons
Screen- Reader Accessible Buttons
Screen- Reader Accessible Buttons
Before
Before
Before
In many screens the primary button was disabled / greyed to indicate an incomplete step. However, screen readers could not properly scan the primary button to continue.
After
After
After
We changed primary buttons to the default state to be screen reader accessible, and added more error indications for incomplete steps.
Input States
Input States
Input States
Before
Before
Before
Some fields did not properly indicate the input errors or had redundant errors.
After
After
After
Much of our process was accounting for every edge case and error screen for our developers to reference.
Learnings
Learnings
Learnings
Vistafication was Challenging
Vistafication was Challenging
Vistafication was Challenging
Celebrating the wrap of the spring semester with other interns.
⭐️️ Taking on the “Product Owner” Title
⭐️️ Taking on the “Product Owner” Title
⭐️️ Taking on the “Product Owner” Title
This was my first live project I got to work on for Synchrony, so it was extremely rewarding to take on this initiative. It was also my first time being the main contact point of design updates. I quickly learned how to document major updates present and be ready to handoff.
This was my first live project I got to work on for Synchrony, so it was extremely rewarding to take on this initiative. It was also my first time being the main contact point of design updates. I quickly learned how to document major updates present and be ready to handoff.
This was my first live project I got to work on for Synchrony, so it was extremely rewarding to take on this initiative. It was also my first time being the main contact point of design updates. I quickly learned how to document major updates present and be ready to handoff.
🐌 Invision is Slow
🐌 Invision is Slow
🐌 Invision is Slow
The design-to-dev handoff heavily relied Invision. This looked like long afternoons of updating screens across platforms to get feedback from devs + project managers. I learned how to allocate time for timely asset hand-off manage cross platform design critique.
The design-to-dev handoff heavily relied Invision. This looked like long afternoons of updating screens across platforms to get feedback from devs + project managers. I learned how to allocate time for timely asset hand-off manage cross platform design critique.
The design-to-dev handoff heavily relied Invision. This looked like long afternoons of updating screens across platforms to get feedback from devs + project managers. I learned how to allocate time for timely asset hand-off manage cross platform design critique.
🫣️ Ongoing Design System Updates
🫣️ Ongoing Design System Updates
🫣️ Ongoing Design System Updates
Our design system was getting some renovation making components randomly break. This introduced additional updates and confusion across teams. I learned to review design work daily in case of errors and quickly fix bugs blocking development.
Our design system was getting some renovation making components randomly break. This introduced additional updates and confusion across teams. I learned to review design work daily in case of errors and quickly fix bugs blocking development.
Our design system was getting some renovation making components randomly break. This introduced additional updates and confusion across teams. I learned to review design work daily in case of errors and quickly fix bugs blocking development.
Thank you for reading <3
Thank you for reading <3
You’ve gotten to the end of this project, but here is some more of my work to explore :3
You’ve gotten to the end of this project, but here is some more of my work to explore :3
Synchrony Product Demo Dashboard
Synchrony Product Demo Dashboard
Synchrony Product Demo Dashboard
Redesigning Synchrony's one stop shop for product demos.
Redesigning Synchrony's one stop shop for product demos.
Meraki: Preschool Resource Dashboard
Meraki: Preschool Resource Dashboard
Meraki: Preschool Resource Dashboard
A platform to help government officials fund regional preschools.
A platform to help government officials fund regional preschools.
