The Hometown Digital Collection

An interactive microsite housing a collection of stories from around the country told through the lens of locals themselves.

UI Design

UX Research

Webflow Development

View Project Site

View Prototype

Client

GRID Magazine

Tools Used

Figma, Webflow

Summary

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.

‍

Goals

(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

‍

Constraints

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:

Banner/cover photo

Map with story cards

Editor’s note

Lightbox photo gallery

UGC Section

‍

Mapbox

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.

‍

Design documentation

It made me appreciate the no-code power Webflow has for a small team like ours. Having working remotely for a year at that point, we had adapted to

Upon launching the Hometown Collection and User Generated Campaign, I was proud to see our concept come to life and for the team's stories to have a special home on the website. Within its first month we drove at least 15% more traffic to the site and increased time spent on the site significantly.

Our user generated campaign got us enough entries to fill up the Philippine map with a considerable amount of map pins.

‍

Some key takeaways:

Don’t bite off more that I can chew — prioritize the essentials

Initially, I was ambitious to pack so many features in the microsite, considering it was our first digital collection. But as we prototyped and tested internally, I had to decide which ones to build. In the end I chose to build the mapbox feature which would benefit even a future GRID project.

Focus on the user