In March 2021, just over a year after lockdown restrictions took over our lives and travel seemed to screech to a halt, our team at GRID was producing a collection of stories from around the country. Honing back to the notion that travel is really a visit, readers at home can visit these towns around the Philippines from those who call these places their home.
Because this was GRID’s first digital collection, my task as the web manager was to provide a home for these stories through an immersive microsite while implementing visual storytelling principles as the print magazine would.
(1) How do we structure these stories in an immersive microsite
(2) Highlight the hometown locations
(3) Adopt visual storytelling principles as a print magazine would
(4) Dedicated UGC Page
Certain restrictions included not being able to conduct user research. Our workaround for this was to consult with the editorial team and art director for insights on interactions and content flow. Referencing our site analytics also showed us how more users visit on mobile devices, so we gave more attention to testing on mobile.
Defining what GRID's Digital Collection is/can be
Because this was our first fully-digital collection, we went back to what we knew best — the print magazine. Through observing my own interaction with print magazines and ideating with the GRID team, I identified key experiences we could translate digitally.
What can web design take from the print experience?
A cover to invite readers to purchase the magazine → an enticing photo spanning the entire webpage with a catchy title
Chronologically-ordered content within categories → repurposed to scrolling interactions
Thickness/number of pages show amount of stories inside the magazine → show where in the country these stories are from
GRID's core strength is in our storytelling in visuals and in text → make room for a photography section
From these experience points, we came up with ideas and narrowed them down to a flow:
Map with story cards
Lightbox photo gallery
Upon running some ideas through the team, there was quite the excitement about having a visual representation of all our stories through a map. I tested it out with a simple css map, but through testing it showed lack of responsiveness. I had to be resourceful and found a fitting tool in Mapbox.
Through the mapbox documentation, I got to link the map pins to the Hometown story cards and the UGC’s entries.
A technical hurdle turned out to be a blessing in disguise because this made a succeeding project easier to maneuver.
Design System Stress Test
Producing the Hometown Collection's coincided with GRID's design system process at some point. Reusing our design system elements, such as buttons, typography, sections made the build quicker AND kept it true to the visual language.
We made sure the Hometown Collection had its own identity in the site. Once we had the content in place, we utilized GRID's design system to bring its visual rhythm. A new color of vibrant yellow-orange gave the Hometown Collection its own identity within the site. With the map functionality, it was most fitting to have the cards interact with a sticky scroll for smooth navigation.