Resource Pages Redesign for SuperAwesome’s Website
My Role: UI and Visual Design | Agency: Rule29 | Art Direction: Andy Sauder
The Challenge:
SuperAwesome, a tech company in London, creates products to help international brands abide by data privacy regulations and protect children from data-mining on the internet. While their site had great branding, inconsistency in UI across their four resource pages created confusion and increased time needed for users to access what they were looking for. These pages also used raster text, which impeded SEO and did not comply with ADA guidelines.
The Problem: Inconsistent Design
The previous designs of the four main Resource pages featured inconsistent layout, design language, and raster text:
The Solution
I created a new consistent design and re-usable component library for each page, differentiated using the SuperAwesome brand color-coding and language. I replaced raster text with live text and improved the visual affordance of all interactive elements by using consistent, ADA-compliant styling to indicate available actions. I also replaced the inconsistent thumbnail column system with a consistent three-column grid. My responsibilities included:
Wireframe Creation, UI, Visual Design
Component Features I Designed
Three-column grid with a featured post header for all four pages helps reduce the user’s cognitive load by placing content in a predictable, consistent layout.
All instances of icons and slanted tiles are designed to give the client the ability to edit the text. Each page is color-coded and uses its own specific icon to identify which type of resource the user is viewing.
Each thumbnail includes editable slanted tile, photo area, title, subtitle, excerpt text, and button text/color. I designed them at fixed height with an automatic cutoff of text.
User can choose which language to view the resource.
Customization for Podcast Page Components
On the podcast page, instead of multi-language dropdowns, users can choose which platform to listen to each episode.