/w=3840,quality=90,fit=scale-down)
Rich Storytelling and Impactful Creative Can Coexist with Accessibility in Digital Space.
Problem
When the original product assets of SanDisk are not compatible with Western Digital's digital media platforms.
Photographer
Matteo Colombo
Tool
Adobe Photoshop, Adobe XD, Lightroom, Adobe Analytics, Image Optimizer, WCAG contrast list, viewport reviewer
Solution
I solve problems through a combination of UX and visual design skills.
For UX, I focus on combining usability and accessibility to create useful, usable, and searchable solutions.
For visual design, I create product storytelling presentations that are compelling and align with the brand's style across channels.
Accessibility Impacts Usability and SEO
I am striving to create images that work well with responsive web design for our digital platforms and provide a more visually attractive representation of SanDisk products in the competitive Memory Cards market.
This is an example of the many assets I designed for Western Digital's digital media platforms. I employed creative accessibility strategies and executions for the designs.
Accessibility impacts SEO: better experience and time on site are the main factors for the Nielsen Net ratings.
As the Art Director for SanDisk's digital spaces, I led the design and introduction of new product images on StoreFront, the retail website of Western Digital.
My design aims to ensure that:
Make sure that the title, tagline text, and call-to-action buttons are not only easily readable for general users, but also compliant with WCAG and ADA standards for readers on both desktop and mobile devices.
Cohesive styles across the product line, including SanDisk branding and the Western Digital Storefront.
Create a strong visual presentation that resonates with SanDisk's target audience.
Design responsively with accessibility in mind for AEM, the Adobe Experience Manager for digital content management system.
Providing ongoing support with optimized deliverables for web engineers and documenting them in the brand library.
Design Skill for Business Goal
With limited resources, within a timely manner.
+
Accessibility
/w=1200,quality=90,fit=scale-down)
/w=1200,quality=90,fit=scale-down)
/w=1200,quality=90,fit=scale-down)
Function First Usability
I have control over how the images are aligned and zoomed to fit the mobile viewports. As a result, I designed the images to fit two specific edge cases to optimize accessibility for other viewport sizes that fall in between them.
"Accessibility is about making it easier for everyone." - Don Norman In the user-friendly digital space, the text should always have sufficient contrast with the background color, be easy to read, and be easily navigable, regardless of browser and device compatibility. Deliverable images are optimized to ensure fast loading times for web pages.
Image implementation mockup with UX System developed for Western Digital StoreFront for the largest desktop viewport. The size was chosen from the majority of visitors according to Adobe analyst reports.
Image cropping and alignment mockup and specification for the smallest mobile device.
Trade-offs in Design
The CTA component for the full-sized banner was originally designed to be transparent with a frame for calls to action. This maximized storytelling design and worked well with images on desktop views. However, after a few iterations and reviews, I refined the CTA to have a solid style. This trade-off enhances readability and accessibility, particularly on mobile devices.
CTAs with a solid style improve accessibility.
During the staging and pre-publishing phases, I double-check the text arrangement, readability, CATs, and image cropping and alignment on various mobile devices to ensure a fully responsive presentation.
Mobile viewports review
Check out my other works related to Art Direction in Digital Space