Comex
UX & UI Project
E-mail UX design.
​
Target used: Latin American homeowners.
Sector: Construction and home improvement.
My Role: Data analysis, UX strategy, UI style, prototyping and layout.
Location: Central America.
Language: Spanish
Design problem: How to turn best printed performing ads into emails.
Tools: Adobe XD and Adobe Creative Suite.
​
Research & UX Strategy​
​
Comex Paints is a brand of architectural paint locally managed in El Salvador by Riot\TBWA where I used to work.
​
My responsibility during that time was to design newspaper ads, take the best-performing ones, and turn them into newsletter emails for Comex subscribers.
​
To do that, I had to acquire data and feedback from the marketing team and then study each ad, subtract the best graphic elements, and assemble a brand new design specifically designed for mobile users.
​
Every design decision was based on marketing data, UX research, and A\B testing.
Typography​
​
Comex Paint has created its own family font. However, I picked only a few styles due to their readability and accessibility, which help the hierarchy of elements in the email template layout.
​
Furthermore, I tested and studied the best weights and sizes for the suitable navigation of the email template.
Colorgraphy​
​
Comex Paints like any other brand has a corporate color palette and a second one used for advertising. For the design of the newsletters, I slightly modified the codes so they are ADA-proved without losing the branded color tones from the very strict brand guidelines.
​
​
Spacing and CTA
The horizontal layout is specially designed to improve legibility. It ensures a flexible layout design. Additionally, I have defined a set of different distances that will be used consistently depending on content and design requirements.
​
The CTA is designed to be short with 2 to 3 words. The height of the buttons is 46px, which is slightly higher than the minimum recommended. It also follows the brand style, and its roundness is more prone to being seen as a pleasant shape feature than sharpness, hence providing a friendly and inviting visual appeal.
​
​
Iconography​
​
A special grid has been carefully designed to contain and align all icons needed for the newsletter template. The icons are simple and easy to recognize, they can be used as an outline or as a solid shape; hence they can be used in different ways. The style does not compromise legibility.
Each icon is worth 1,000 words.
Components
The template has two different modules or components that will not structurally change regardless of the offer or content. They are designed to keep consistency, enhance hierarchy, and readability, and maintain brand awareness through user experience. Each component is responsive and editable depending on the marketing requirements.
Template structure
After analyzing, prototyping, testing and most importantly consulting developers and marketing specialists, I built a functional design template that was used for years.
Header section:
• 1 second to capture the user’s attention.
• Bold and colorful.
• A\B tested.
• Curved elements break the frame and show better results.
• Design elements are directly taken from press advertising.
• Compact menu for fast accessibility.
• Very flexible design.
Featured product component:
• Reserved for best-selling products.
• The back circle serves as a spotlight element.
• CTA aligned with the overall design.
• On brand and familiar to the user.
Seasonal component:
• Reserved for one-time year products.
• Designed to feature both spaces and products.
• Copies can be larger and more detailed.
• Created to break the color template.
• It increased conversion rates on seasonal products by 16% on online platforms.
Club membership call-out:
• Most successful component. It increased the volume of new members by 23%
• It was A\B Tested.
• Icons are self-explanatory.
• Visually appealing and on-brand.
Adobe XD final designs
I have picked the best-performing newsletters for you to visualize, each one shows different offers, content, and colors:
