UX/UI & Visual Design -
Flashback, where history and technology come together
Comprehensive design of the visual ecosystem and UX/UI for Flashback, a 100% AMP website created to bring ABC’s historical photo archive back to life. This included site design, onboarding, registration flow and personalised newsletters.
The project
Flashback is a mobile-first AMP platform that revives ABC’s historical photo archive through a clean, editorial UX/UI design. I created the full visual system, including the site, onboarding, registration flow and newsletters
Client
Vocento Media Lab
Date
2018
My Role
Visual identity · UI design · UX flows · AMP/PWA design · Mobile-first · Component systems · Editorial layout
Vocento Media Lab is the innovation laboratory of the media group Vocento. It is a department dedicated to experimentation, measurement and the agile development of new projects. The department’s goal is to adapt to the new technological landscape by creating innovative projects in areas such as digital journalism, analytics, technology, communication and marketing
Visual Identity
The design of Flashback is based on a key premise: to highlight the historical and documentary value of Vocento’s media outlets, whose origins date back to the late 19th and early 20th centuries. Newspapers such as El Norte de Castilla (1854), Las Provincias (1866), El Comercio (1878), La Voz de Galicia (1882) and ABC (1903) share deep historical roots and an exceptional photographic archive. My design proposal was conceived as a direct tribute to this heritage.
To this end, I developed a visual identity inspired by Modernism, the artistic movement that dominated that period and reflected a cosmopolitan, artisanal and deeply decorative vision. I recovered some of its characteristic features and reinterpreted them in a clean, contemporary digital language.
The aesthetic is articulated around two main colours, black and gold, which bring elegance, contrast and a sense of recovered historical treasure. The typography combines Lovelo Black, geometric and full of personality, with Reem Kufi, with refined shapes that add an exotic touch and fit in with the modernist roots of the project. The logo also incorporates a ‘K’ transformed into a backward arrow, a visual device that synthesises the central concept: returning to the past.
Key technical aspects
Flashback is a PWA (progressive web app) that uses automated content and is powered by more than 220,000 algorithmically selected images from the ABC’s historical archive of over 20 million photos. It publishes daily events in an ‘On This Day’ format. The application incorporates a service worker, offline reading mode, push notifications and optimised AMP pages to ensure maximum speed.
Website
Every day, the application automatically publishes three snapshots of events that took place in Madrid. This selection is made using algorithms developed by Vocento’s development teams. The design highlights the importance of the image and provides context in the form of the year, hashtags and short description
The onboarding process introduces the Flashback concept via a series of screens displaying concise visual messages that explain its value: receiving historical images selected by date. The design emphasises clarity, emotion and conversion, featuring soft illustrations, visual rhythm and a consistent CTA
I designed a quick, minimalist registration process for weekly and birthday newsletters. The confirmation emails were carefully designed using a mobile-first approach to accurately explain the value and functionality of each subscription.
In the case of the birthday newsletter, users received a selection of the best historical photographs taken on the day they were born. These were ready to be viewed and shared, and users were invited to purchase them from the ABC Photo e-commerce site.
The weekly newsletter included a selection of images for the following seven days, with direct access to flashbacks for each day, and the option to purchase them through ABC Photo
Although the project was conceived with a mobile-first approach, I also designed a desktop version that is fully adapted to ensure a solid visual experience.
The importance of wireframing
Wireframes allow to define the functional structure of the product before making visual decisions, ensuring that the content hierarchy, navigation, and key flows are correct.
Furthermore, as this is a multi-device project with a 100% AMP interface, wireframes make it easier to validate interaction patterns and align all the teams involved—design, product, development, photography, and editorial—under a single structural vision.
A prominent launch in ABC and Vocento
The official communication highlighted the updated modernist design, the intuitive user experience and the project’s ability to showcase more than a century of visual memory. The extensive coverage reinforced Flashback as an internal benchmark for digital innovation.
