Analysis
Preview Pattern
Analysis
Preview Pattern
Analysis
Preview Pattern
Insider has seven products with preview capability. The preview area differs depending on product functions, such as an inbox and message in email and a lock screen on the mobile app. Also, UI elements were not consistent between products, causing users to experience cognitive load while switching between products.
Insider has seven products with preview capability. The preview area differs depending on product functions, such as an inbox and message in email and a lock screen on the mobile app. Also, UI elements were not consistent between products, causing users to experience cognitive load while switching between products.
Insider has seven products with preview capability. The preview area differs depending on product functions, such as an inbox and message in email and a lock screen on the mobile app. Also, UI elements were not consistent between products, causing users to experience cognitive load while switching between products.
Web Push
App Push
SMS
Notification Center
Tab Talk
Web Push
App Push
SMS
Notification Center
Tab Talk
Web Push
App Push
SMS
Notification Center
Tab Talk
Old Preview Designs




Old Preview Designs




Old Preview Designs




PRODUCT BEHAVIORS
Preview is all about showing the natural behaviors as a demo. How the design and message will look is crucial for our partner to create success. So, I unified and grouped the main behaviors like below.
PRODUCT BEHAVIORS
Preview is all about showing the natural behaviors as a demo. How the design and message will look is crucial for our partner to create success. So, I unified and grouped the main behaviors like below.
PRODUCT BEHAVIORS
Preview is all about showing the natural behaviors as a demo. How the design and message will look is crucial for our partner to create success. So, I unified and grouped the main behaviors like below.
Platforms
Desktop, Mobile, Tablet
Modes
Light and Dark Mode
Operating System - OS
iOS or Android for Mobile
Mac and Windows for Desktop
States

Lock Screen and Expanded for Mobile
Collapsed and Expanded View for Web Push
Inbox and Message for Email
Interactions
Double Scroll - Web Push
Preview as User - All Products
Full-Screen Zoom - Email
Interactive Preview - All Products
Interactive Elements - All Products
Platforms
Desktop, Mobile, Tablet
Modes
Light and Dark Mode
Operating System - OS
iOS or Android for Mobile
Mac and Windows for Desktop
States

Lock Screen and Expanded for Mobile
Collapsed and Expanded View for Web Push
Inbox and Message for Email
Interactions
Double Scroll - Web Push
Preview as User - All Products
Full-Screen Zoom - Email
Interactive Preview - All Products
Interactive Elements - All Products
Platforms
Desktop, Mobile, Tablet
Modes
Light and Dark Mode
Operating System - OS
iOS or Android for Mobile
Mac and Windows for Desktop
States

Lock Screen and Expanded for Mobile
Collapsed and Expanded View for Web Push
Inbox and Message for Email
Interactions
Double Scroll - Web Push
Preview as User - All Products
Full-Screen Zoom - Email
Interactive Preview - All Products
Interactive Elements - All Products
UNDERSTANDING NEEDS
I was the designer in the mobile area, meaning I was mainly responsible for and an expert on mobile products like App Push and App Templates. However, my knowledge of other products could have been better. Therefore, I conducted sessions with responsible designers and partners using that product to understand products and needs better.
After the sessions and partner meetings, I learned about their needs.
UNDERSTANDING NEEDS
I was the designer in the mobile area, meaning I was mainly responsible for and an expert on mobile products like App Push and App Templates. However, my knowledge of other products could have been better. Therefore, I conducted sessions with responsible designers and partners using that product to understand products and needs better.
After the sessions and partner meetings, I learned about their needs.
UNDERSTANDING NEEDS
I was the designer in the mobile area, meaning I was mainly responsible for and an expert on mobile products like App Push and App Templates. However, my knowledge of other products could have been better. Therefore, I conducted sessions with responsible designers and partners using that product to understand products and needs better.
After the sessions and partner meetings, I learned about their needs.
Zoom
Desktop, Mobile, Tablet
Title Tooltip
We can get rid of this tooltip. It is giving obvious information.
Redesign Needed
The design is old, looks ugly, and is really badly coded with a lot of bugs.
Interactive Elements
The slider or carrousel in email design should be interactive but we have an integration limitation.
Interactive Preview
Some users in Fullstory try to click the expand chevron on the preview. Making previews interactive so users can change between states would be a good improvement.
Depending on the preview element click, we can focus on the relevant input area.
Zoom
Desktop, Mobile, Tablet
Title Tooltip
We can get rid of this tooltip. It is giving obvious information.
Redesign Needed
The design is old, looks ugly, and is really badly coded with a lot of bugs.
Interactive Elements
The slider or carrousel in email design should be interactive but we have an integration limitation.
Interactive Preview
Some users in Fullstory try to click the expand chevron on the preview. Making previews interactive so users can change between states would be a good improvement.
Depending on the preview element click, we can focus on the relevant input area.
Zoom
Desktop, Mobile, Tablet
Title Tooltip
We can get rid of this tooltip. It is giving obvious information.
Redesign Needed
The design is old, looks ugly, and is really badly coded with a lot of bugs.
Interactive Elements
The slider or carrousel in email design should be interactive but we have an integration limitation.
Interactive Preview
Some users in Fullstory try to click the expand chevron on the preview. Making previews interactive so users can change between states would be a good improvement.
Depending on the preview element click, we can focus on the relevant input area.
CHECKING THE INDUSTRY
Being a pioneer in the industry requires analyzing current solutions like the Zoom case. Check solutions and see what is working and what is not. With all learning, progress further and get better.
I checked the direct and indirect competitors to understand what they have done in the preview environment. I wanted to see their structures and empathize with them and the user.
CHECKING THE INDUSTRY
Being a pioneer in the industry requires analyzing current solutions like the Zoom case. Check solutions and see what is working and what is not. With all learning, progress further and get better.
I checked the direct and indirect competitors to understand what they have done in the preview environment. I wanted to see their structures and empathize with them and the user.
CHECKING THE INDUSTRY
Being a pioneer in the industry requires analyzing current solutions like the Zoom case. Check solutions and see what is working and what is not. With all learning, progress further and get better.
I checked the direct and indirect competitors to understand what they have done in the preview environment. I wanted to see their structures and empathize with them and the user.
Industry Benchmark






ANALYSIS OUTCOME
We talked with users and had their comments. Check the industry and our product for areas for improvement. Based on the findings:
Look is important. It needs to be clean and reflect real product experience.
Each product is unique. We need to create a complex preview system offering product-based simplicity. We must handle the burden in the back so that our users can easily manage every product.
ANALYSIS OUTCOME
We talked with users and had their comments. Check the industry and our product for areas for improvement. Based on the findings:
Look is important. It needs to be clean and reflect real product experience.
Each product is unique. We need to create a complex preview system offering product-based simplicity. We must handle the burden in the back so that our users can easily manage every product.
ANALYSIS OUTCOME
We talked with users and had their comments. Check the industry and our product for areas for improvement. Based on the findings:
Look is important. It needs to be clean and reflect real product experience.
Each product is unique. We need to create a complex preview system offering product-based simplicity. We must handle the burden in the back so that our users can easily manage every product.
Erdem Ülker
Senior Product Designer based in İstanbul, Turkey
Erdem Ülker
Senior Product Designer based in İstanbul, Turkey
Erdem Ülker
Senior Product Designer based in İstanbul, Turkey