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.
Web Push
App Push
SMS
Notification Center
Tab Talk
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.
Platforms
Modes
Operating System - OS
States
Interactions
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
Title Tooltip
Redesign Needed
Interactive Elements
Interactive Preview
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.