Skype
Skype
UI/ UX, UX research, Design research, design workshops
Role:
Lead Designer
Feature crew: 1 Designer, 1 PM, 2 Engs
Opportunity
Opportunity
The adaptive card system for Skype was outdated and inconsistent, leading to a fragmented user experience. The challenge was to create a modern, interactive, and dynamic communication system that enhances user engagement, improves usability, and integrates seamlessly with existing workflows.
The adaptive card system for Skype was outdated and inconsistent, leading to a fragmented user experience. The challenge was to create a modern, interactive, and dynamic communication system that enhances user engagement, improves usability, and integrates seamlessly with existing workflows.
The adaptive card system for Skype was outdated and inconsistent, leading to a fragmented user experience. The challenge was to create a modern, interactive, and dynamic communication system that enhances user engagement, improves usability, and integrates seamlessly with existing workflows.
Objectives and approach
Objectives and approach
Scope
This design proposal is the first step towards
a redesign of the card system. This iteration focuses on immediate tactical fixes, and does not address longer-term, more conceptual approaches to the card framework.
This design proposal is the first step towards a redesign of the card system. This iteration focuses on immediate tactical fixes, and does not address longer-term, more conceptual approaches to the card framework.
This design proposal is the first step towards a redesign of the card system. This iteration focuses on immediate tactical fixes, and does not address longer-term, more conceptual approaches to the card framework.
Goals
Identify, categorize, and create card
templates with styling and content rules. Ensure that the existing cards fit into this tactical framework. Create an interm solution that will help the next design phase.
Identify, categorize, and create card templates with styling and content rules. Ensure that the existing cards fit into this tactical framework. Create an interm solution that will help the next design phase.
Identify, categorize, and create card templates with styling and content rules. Ensure that the existing cards fit into this tactical framework. Create an interm solution that will help the next
design phase.
Approach
Define a universal card template and content-type templates that bring consistency and alignment with OPG via Fabric. Specifically:
- Type ramp
- Spacing (4px grid)
- Color
Define a universal card template and content-type templates that bring consistency and alignment with OPG via Fabric. Specifically:
- Type ramp
- Spacing (4px grid)
- Color
Audit
Audit
Existing cards
Existing cards
DOCUMENT
DOCUMENT
PHOTO, MOJI
PHOTO, MOJI
LINK
LINK
MEDIA
ADAPTIVE
ADAPTIVE
HERO
HERO
Final designs
Final designs
Universal template
Universal template
Proposed cards
Proposed cards
DOCUMENT
PHOTO, MOJI
LINK
MEDIA
ADAPTIVE
HERO
Universal card framework
Universal card framework
All cards can fit into this base template.
All cards can fit into this base template.
Typography and styling
Typography and styling
All colors and type ramps are consistent with Fabric
All colors and type ramps are consistent with Fabric
Card templates
Card templates
Cards across breakpoints
Cards across breakpoints
Xsmall 320 x 568
Chat pane 320 x 568
Xsmall 320 x 568
Chat pane 320 x 568
Small 720 x 1280
Chat pane 400 x 1280
Small 720 x 1280
Chat pane 400 x 1280
Medium 1024 x 768
Chat pane 704 x 1440
Medium 1024 x 768
Chat pane 704 x 1440
Large 1366 x 768
Chat pane 991 x 768
Large 1366 x 768
Chat pane 991 x 768
Image scaling logic options
Image scaling logic options
Universal template
Universal template
Specific cards templates - applied
Specific cards templates - applied
DARK MODE
DARK MODE
ARTICLE
ARTICLE
MEDIA
MEDIA
MEDIA PARTNER CARD
MEDIA PARTNER CARD
DOCUMENT
DOCUMENT
DOCUMENT
DOCUMENT
