Design
Preview Pattern
Design
Preview Pattern
Design
Preview Pattern
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 our users can easily manage every product.
The final design needs to be refined and helpful. As we know, this is not the main attraction area in the design step; it needs to be a clean, elegant element that does not steal the show.
On the technical side, though, we need an excellent atomic component system backed by a good documentation.
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 our users can easily manage every product.
The final design needs to be refined and helpful. As we know, this is not the main attraction area in the design step; it needs to be a clean, elegant element that does not steal the show.
On the technical side, though, we need an excellent atomic component system backed by a good documentation.
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 our users can easily manage every product.
The final design needs to be refined and helpful. As we know, this is not the main attraction area in the design step; it needs to be a clean, elegant element that does not steal the show.
On the technical side, though, we need an excellent atomic component system backed by a good documentation.
TOKENS
Insider has a detailed design system. It is helping us a lot on the UI side and leaves us spare time to focus on building the experience.
On the preview pattern, I utilized as few elements as possible. The design needs to be lean and simple so as not to create any friction. As I stated before, this is a supporting part of the campaign design step.
Segment Element
Dropdown
Tooltips
Font, color, and shadow
Atoms and Ions
TOKENS
Insider has a detailed design system. It is helping us a lot on the UI side and leaves us spare time to focus on building the experience.
On the preview pattern, I utilized as few elements as possible. The design needs to be lean and simple so as not to create any friction. As I stated before, this is a supporting part of the campaign design step.
Segment Element
Dropdown
Tooltips
Font, color, and shadow
Atoms and Ions
TOKENS
Insider has a detailed design system. It is helping us a lot on the UI side and leaves us spare time to focus on building the experience.
On the preview pattern, I utilized as few elements as possible. The design needs to be lean and simple so as not to create any friction. As I stated before, this is a supporting part of the campaign design step.
Segment Element
Dropdown
Tooltips
Font, color, and shadow
Atoms and Ions
Segment Element
Dropdown
Styles
ATOMS AND IONS
It's good to have a design system to cover our UI elements. However, we must create a design for all platforms and operating systems. That is why I created individual preview molecules composed of their atoms.
This approach helped us to manage the component, document it, and hand off detailed but easier.
ATOMS AND IONS
It's good to have a design system to cover our UI elements. However, we must create a design for all platforms and operating systems. That is why I created individual preview molecules composed of their atoms.
This approach helped us to manage the component, document it, and hand off detailed but easier.
ATOMS AND IONS
It's good to have a design system to cover our UI elements. However, we must create a design for all platforms and operating systems. That is why I created individual preview molecules composed of their atoms.
This approach helped us to manage the component, document it, and hand off detailed but easier.
Message Title
useinsider.com
19:40
Message Description
No image uploaded
Site Settings
Message Title
useinsider.com
19:40
Message Description
No image uploaded
Site Settings
Message Title
useinsider.com
19:40
Message Description
No image uploaded
Site Settings
ANATOMY
The anatomy of the preview section has three parts: header, settings, and visual. Each part has individual parts, such as preview as user container, dark mode, or multi-preview.
Title and preview as user > Header
States, platforms, and modes > Settings
Preview image details and preview image > Preview Visuals
Behaviors
ANATOMY
The anatomy of the preview section has three parts: header, settings, and visual. Each part has individual parts, such as preview as user container, dark mode, or multi-preview.
Title and preview as user > Header
States, platforms, and modes > Settings
Preview image details and preview image > Preview Visuals
Behaviors
ANATOMY
The anatomy of the preview section has three parts: header, settings, and visual. Each part has individual parts, such as preview as user container, dark mode, or multi-preview.
Title and preview as user > Header
States, platforms, and modes > Settings
Preview image details and preview image > Preview Visuals
Behaviors
BEHAVIORS
Tooltip
Our partners, particularly the new ones, have reported difficulty in understanding the icon-only selections on our platform. These icons represent Apple, Android, and Windows but they don't clearly indicate the user's intended action. To address this issue, we have added tooltips for every element that lacks a label. This should help improve the user experience and reduce confusion.
Interactive Preview
Based on the user recordings, we have observed that our partners tend to click on the preview elements, assuming that they can interact with them. Specifically, they try to click on the message description, use the input area, and expand the notification using the chevron. This behavior indicates that they perceive these preview elements as interactive and meaningful.
Double Scroll
Lastly, some previews tend to be too long, which causes them to exceed the viewport. The default behavior is to scroll the input container along with the preview area. However, this can create issues for products that have misaligned input fields and preview elements. For instance, when I scroll down to view the Chrome web push preview, I lose sight of the message title input. To resolve this problem, we made an exception for the Web Push product and implemented double scroll zones.
BEHAVIORS
Tooltip
Our partners, particularly the new ones, have reported difficulty in understanding the icon-only selections on our platform. These icons represent Apple, Android, and Windows but they don't clearly indicate the user's intended action. To address this issue, we have added tooltips for every element that lacks a label. This should help improve the user experience and reduce confusion.
Interactive Preview
Based on the user recordings, we have observed that our partners tend to click on the preview elements, assuming that they can interact with them. Specifically, they try to click on the message description, use the input area, and expand the notification using the chevron. This behavior indicates that they perceive these preview elements as interactive and meaningful.
Double Scroll
Lastly, some previews tend to be too long, which causes them to exceed the viewport. The default behavior is to scroll the input container along with the preview area. However, this can create issues for products that have misaligned input fields and preview elements. For instance, when I scroll down to view the Chrome web push preview, I lose sight of the message title input. To resolve this problem, we made an exception for the Web Push product and implemented double scroll zones.
BEHAVIORS
Tooltip
Our partners, particularly the new ones, have reported difficulty in understanding the icon-only selections on our platform. These icons represent Apple, Android, and Windows but they don't clearly indicate the user's intended action. To address this issue, we have added tooltips for every element that lacks a label. This should help improve the user experience and reduce confusion.
Interactive Preview
Based on the user recordings, we have observed that our partners tend to click on the preview elements, assuming that they can interact with them. Specifically, they try to click on the message description, use the input area, and expand the notification using the chevron. This behavior indicates that they perceive these preview elements as interactive and meaningful.
Double Scroll
Lastly, some previews tend to be too long, which causes them to exceed the viewport. The default behavior is to scroll the input container along with the preview area. However, this can create issues for products that have misaligned input fields and preview elements. For instance, when I scroll down to view the Chrome web push preview, I lose sight of the message title input. To resolve this problem, we made an exception for the Web Push product and implemented double scroll zones.
Segment Element
Double Scroll
DOCUMENTATION
In general, a designer will hand off their design to their own team. However, if you are a design system designer or a design pattern owner, you may need to deliver and present your design to multiple teams. To handle this handoff process, I created detailed design tasks for product-related issues. Additionally, I wrote comprehensive pattern documentation for developers, project managers, and other stakeholders.
DOCUMENTATION
In general, a designer will hand off their design to their own team. However, if you are a design system designer or a design pattern owner, you may need to deliver and present your design to multiple teams. To handle this handoff process, I created detailed design tasks for product-related issues. Additionally, I wrote comprehensive pattern documentation for developers, project managers, and other stakeholders.
DOCUMENTATION
In general, a designer will hand off their design to their own team. However, if you are a design system designer or a design pattern owner, you may need to deliver and present your design to multiple teams. To handle this handoff process, I created detailed design tasks for product-related issues. Additionally, I wrote comprehensive pattern documentation for developers, project managers, and other stakeholders.
FINAL DESIGN
Below you can check various preview composition using only one master component.
FINAL DESIGN
Below you can check various preview composition using only one master component.
FINAL DESIGN
Below you can check various preview composition using only one master component.
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