Synchrony Product Dashboard
Synchrony Product Dashboard
Synchrony Product Dashboard
Synchrony Product Dashboard
Synchrony’s design team manages digital demos of the company’s products that customers and partner brands interact with. With Invisions discontinuing services after 2024, the design team began moving their interactive home to Figma. I came in and lead the transition of their digital demo dashboard from Invision to Figma - to reimagine their one-stop-shop for all Synchrony products.
Synchrony’s design team manages digital demos of the company’s products that customers and partner brands interact with. With Invisions discontinuing services after 2024, the design team began moving their interactive home to Figma. I came in and lead the transition of their digital demo dashboard from Invision to Figma - to reimagine their one-stop-shop for all Synchrony products.
Synchrony’s design team manages digital demos of the company’s products that customers and partner brands interact with. With Invisions discontinuing services after 2024, the design team began moving their interactive home to Figma. I came in and lead the transition of their digital demo dashboard from Invision to Figma - to reimagine their one-stop-shop for all Synchrony products.
Synchrony’s design team manages digital demos of the company’s products that customers and partner brands interact with. With Invisions discontinuing services after 2024, the design team began moving their interactive home to Figma. I came in and lead the transition of their digital demo dashboard from Invision to Figma - to reimagine their one-stop-shop for all Synchrony products.
📌
📌
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
Invision is being discontinued ...
Invision is being discontinued ...
Invision is being discontinued ...
Invision is being discontinued ...
However, key teams heavily rely on this Invision demo dashboard:
However, key teams heavily rely on this Invision demo dashboard:
However, key teams heavily rely on this Invision demo dashboard:
💼
SALES TEAM
Pitch business servicing experiences to potential partner brands.
💼
💼 SALES TEAM
Pitch business servicing experiences to potential partner brands.
💼
💼 SALES TEAM
Pitch business servicing experiences to potential partner brands.
💼
SALES TEAM
Pitch business servicing experiences to potential partner brands.
💻
TECHNOLOGY & OP. TEAM
Reference point of interactions and product experiences.
💻
💻 TECHNOLOGY & OP. TEAM
Reference point of interactions and product experiences.
💻
💻 TECHNOLOGY & OP. TEAM
Reference point of interactions and product experiences.
💻
TECHNOLOGY & OP. TEAM
Reference point of interactions and product experiences.
🧑🔧
CUSTOMER SERVICE TEAM
Assist customers through tech issues and confusions.
🧑🔧
🧑🔧 CUSTOMER SERVICE TEAM
Assist customers through tech issues and confusions.
🧑🔧
🧑🔧 CUSTOMER SERVICE TEAM
Assist customers through tech issues and confusions.
🧑🔧
CUSTOMER SERVICE TEAM
Assist customers through tech issues and confusions.
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.
Our Goal
“How might we redesign the demo dashboard to provide more user support and contextual information, ensuring seamless access & updated design practices?”
Our Goal
“How might we redesign the demo dashboard to provide more user support and contextual information, ensuring seamless access & updated design practices?”
Our Goal
“How might we redesign the demo dashboard to provide more user support and contextual information, ensuring seamless access & updated design practices?”
Our Goal
“How might we redesign the demo dashboard to provide more user support and contextual information, ensuring seamless access & updated design practices?”
Research
Research
Research
Understanding our teams
Understanding our teams
Understanding our teams
Understanding our teams
When looking into the dashboards main users as well as the designer that makes the updates, the sentiment was:
When looking into the dashboards main users as well as the designer that makes the updates, the sentiment was:
When looking into the dashboards main users as well as the designer that makes the updates, the sentiment was:
With these insights, we found our key goals:
With these insights, we found our key goals:
👯♀️
GROUPING & CONTEXT
👯♀️ GROUPING & CONTEXT
👯♀️ GROUPING & CONTEXT
GROUPING & CONTEXT
Grouping & context on how products relate to each other across the services Synchrony manages.
Grouping & context on how products relate to each other across the services Synchrony manages.
Grouping & context on how products relate to each other across the services Synchrony manages.
Grouping & context on how products relate to each other across the services Synchrony manages.
🫶
PROVIDE A FAMILAR EXPERIENCE
🫶 PROVIDE A FAMILAR EXPERIENCE
🫶 PROVIDE A FAMILAR EXPERIENCE
PROVIDE A FAMILAR EXPERIENCE
Design elements reminiscent of how teams interact with design files in the Figma workspace.
Design elements reminiscent of how teams interact with design files in the Figma workspace.
Design elements reminiscent of how teams interact with design files in the Figma workspace.
Design elements reminiscent of how teams interact with design files in the Figma workspace.
🆕
BALANCE VISUALS & EFFICIENCY
🆕 BALANCE VISUALS & EFFICIENCY
🆕 BALANCE VISUALS & EFFICIENCY
BALANCE VISUALS & EFFICIENCY
support a balance of modern ui updates with an efficient demo search experience.
support a balance of modern ui updates with an efficient demo search experience.
support a balance of modern ui updates with an efficient demo search experience.
support a balance of modern ui updates with an efficient demo search experience.
Design Approach
Design Approach
Design Approach
Phasing out the list format...
Phasing out the list format...
Phasing out the list format...
Phasing out the list format...
The first initiative was redesigning the navigation and layout away from the list format. The lack of support text in the list view made finding the correct demos difficult without prior knowledge.
The first initiative was redesigning the navigation and layout away from the list format. The lack of support text in the list view made finding the correct demos difficult without prior knowledge.
The first initiative was redesigning the navigation and layout away from the list format. The lack of support text in the list view made finding the correct demos difficult without prior knowledge.
We designed the navigation to parallel product teams in the Figma workspace. This creates a familiar experience for a non designer (ex: sales & customer service) using/finding demos within Figma.
We designed the navigation to parallel product teams in the Figma workspace. This creates a familiar experience for a non designer (ex: sales & customer service) using/finding demos within Figma.
We designed the navigation to parallel product teams in the Figma workspace. This creates a familiar experience for a non designer (ex: sales & customer service) using/finding demos within Figma.
Core Experience
Core Experience
Core Experience
Synchrony Demo Dashboad
Synchrony Demo Dashboad
Synchrony Demo Dashboad
Sidebar Menu
Sidebar Menu
Sidebar Menu
This menu change reduces the visual clutter of all demos in one location. Allowing for in-depth grouping of demos within the respective pages .
This menu change reduces the visual clutter of all demos in one location. Allowing for in-depth grouping of demos within the respective pages .
This menu change reduces the visual clutter of all demos in one location. Allowing for in-depth grouping of demos within the respective pages .
Demo Cards
Demo Cards
Demo Cards
Cards allow for more dedicated space for support text on specific demo links since on of the main pain points was not knowing what each demo is.
Cards allow for more dedicated space for support text on specific demo links since on of the main pain points was not knowing what each demo is.
Cards allow for more dedicated space for support text on specific demo links since on of the main pain points was not knowing what each demo is.
Product Banners
Product Banners
Product Banners
Color coding banners helps anchor the users eyes and differentiates between the pages.
Color coding banners helps anchor the users eyes and differentiates between the pages.
Color coding banners helps anchor the users eyes and differentiates between the pages.
Key Demo Page
Key Demo Page
Key Demo Page
Key demos allows power users of digital demos to quickly access most commonly used products in a single location.
Key demos allows power users of digital demos to quickly access most commonly used products in a single location.
Key demos allows power users of digital demos to quickly access most commonly used products in a single location.
Demo Support Page
Demo Support Page
Demo Support Page
Demos sometimes brake or need further updating. The support page allows streamlined communication to the designers supporting the demos on updates/issues.
Demos sometimes brake or need further updating. The support page allows streamlined communication to the designers supporting the demos on updates/issues.
Demos sometimes brake or need further updating. The support page allows streamlined communication to the designers supporting the demos on updates/issues.
Design System
Design System
Design System
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.
Next Steps
Next Steps
Next Steps
Testing new features & navigation
Testing new features & navigation
Testing new features & navigation
Testing new features & navigation
QR Code for Demo Sharing
QR Code for Demo Sharing
QR Code for Demo Sharing
We are exploring new features for teams that rely on sharing product demos. Here we seeing how teams share demos on mobile devices and how to make this process easier to share with external devices.
We are exploring new features for teams that rely on sharing product demos. Here we seeing how teams share demos on mobile devices and how to make this process easier to share with external devices.
We are exploring new features for teams that rely on sharing product demos. Here we seeing how teams share demos on mobile devices and how to make this process easier to share with external devices.
Testing with UserZoom
Testing with UserZoom
Testing with UserZoom
Our main initiative is creating short quantitative usability tests + A/B tests for internal testing. We outline our structure in FigJam with our research team, and testing navigation and clarity.
Our main initiative is creating short quantitative usability tests + A/B tests for internal testing. We outline our structure in FigJam with our research team, and testing navigation and clarity.
Our main initiative is creating short quantitative usability tests + A/B tests for internal testing. We outline our structure in FigJam with our research team, and testing navigation and clarity.
Learnings
Learnings
Learnings
Reflecting on a summer + fall of work
Reflecting on a summer + fall of work
Reflecting on a summer + fall of work
Fun intern acceptance graphics I also had the opportunity to create as a fun side project for the HR team.
Fun intern acceptance graphics I also had the opportunity to create as a fun side project for the HR team.
Fun intern acceptance graphics I also had the opportunity to create as a fun side project for the HR team.
✨ My Impact at Synchrony
✨ My Impact at Synchrony
✨ My Impact at Synchrony
Working on the demo dashboard has been one most impactful projects for both myself and its place within the company. It was funny seeing how far I have grown since my first project on design systems, and now working on live products with my teams full trust.
Working on the demo dashboard has been one most impactful projects for both myself and its place within the company. It was funny seeing how far I have grown since my first project on design systems, and now working on live products with my teams full trust.
Working on the demo dashboard has been one most impactful projects for both myself and its place within the company. It was funny seeing how far I have grown since my first project on design systems, and now working on live products with my teams full trust.
🔃 Design Migration
🔃 Design Migration
🔃 Design Migration
This challenge presented a unique opportunity to modernize a design solution that gets to have both internal and external impact to Synchrony. I had the opportunity to present my work to our design, tech, and sales teams and get feedback on how the dashboard can continue to grow.
This challenge presented a unique opportunity to modernize a design solution that gets to have both internal and external impact to Synchrony. I had the opportunity to present my work to our design, tech, and sales teams and get feedback on how the dashboard can continue to grow.
This challenge presented a unique opportunity to modernize a design solution that gets to have both internal and external impact to Synchrony. I had the opportunity to present my work to our design, tech, and sales teams and get feedback on how the dashboard can continue to grow.
😶🌫️ Pushing Ambiguity & New Features
😶🌫️ Pushing Ambiguity & New Features
😶🌫️ Pushing Ambiguity & New Features
Initially I was uncertain on how much I could change the original design. I learned that curiosity and fresh ideas could guide the design's evolution when navigating the ambiguity around in scope.
Initially I was uncertain on how much I could change the original design. I learned that curiosity and fresh ideas could guide the design's evolution when navigating the ambiguity around in scope.
Initially I was uncertain on how much I could change the original design. I learned that curiosity and fresh ideas could guide the design's evolution when navigating the ambiguity around in scope.
Thank you for reading <3
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.
You’ve gotten to the end of this project, but here is some more of my work to explore.
Synchrony Vistafication
Synchrony Vistafication
Synchrony Vistafication
Unifying account login & management platforms.
Unifying account login & management platforms.
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.
