GROLSCH

GROLSCH

Translating Grolsch’s social media story into a brand hub experience

Translating Grolsch’s social media story into a brand hub experience

SKILLS
Interface Design, Brand Storytelling, Information Architecture

DELIVERABLES
Sitemap, Sketches, Annotated Designs, Content Definition

GR_Cover_Light
01 SNAPSHOT

Creating a hub for Grolsch to tell its brand story and host campaign content

Creating a hub for Grolsch to tell its brand story and host campaign content

In this project, the team turned Grolsch's need for a site to host their 'As I Am' campaign into an opportunity to generate interest and curiosity for the brand. Inspired by popular social media layouts, I collaborated with a team of Creatives, a Designer and a Developer to design and launch a platform for people to discover Grolsch’s world and products.

GR_Homepage_MobileSnapshot

Credits  Agency Mirum  UI Design Stephen Verma  Developement David Riches  Creative Team JWT  Project Management Paulina Lewandowska

02 ROLE

Connecting the dots between a team of Creatives, a UI Designer and a Developer, I defined the story flow, layouts and elements of interaction of Grolsch's brand site.

Information architecture
Information architecture

Piecing together the existing content with Grolsch's requirements, I defined the sitemap and identified the key templates to form the backbone of the brand site.

Interface Design

Collaborating alternatively with the UI Designer and the Developer on the project, I defined the content hierarchy, layouts, functionalities and components of the site's pages.

Content direction

Working closely with the Creative team, I took the campaign's creative idea to the website's experience, shaping it into a story flow that best fir our users' broader online journey.

03 SITEMAP

Combining content and templates to define the overall site's structure

Putting together the brand's story and the elements from the 'As I Am' campaign, I went through a content grouping exercise to shape the base layer of the site. The final sitemap reflects the key sections and pages of Grolsch's site, to which I associated the required templates.

GR_Sitemap_V2
04 CONTENT HIERARCHY

Defining the story flow of the pages

Part of the interface design required that I define the story flow and the content hierarchy within each page. In collaboration with the Creative Team, I transposed the creative idea of the social campaign to the site, infusing elements of brand story along the way.

T02 Grid page

GR_Content_T02

T01 Homepage

GR_Content_T01

T03 Beer page

GR_Content_T03

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

05 LAYOUTS

Designing to encourage content browsing and discovery

Fast-paced sketching sessions with the UI Designer allowed us to explore solutions to serve the 'As I Am' campaign story in engaging and playful ways while promoting Grolsch's beers.

Listing pages turned into fluid grids and the navigation became highly visual. The homepage features a carousel inspired by Instagram Stories. Recommended campaign content is highlighted throughout the experience to create more continuity in the user journey. Beers' are treated like characters, with strong and distinctive attributes.

GR_Nav
GR_HP3_S
GR_HP_Stories_S
GR_HP_Beer_S
GR_Recommended_Stories
GR_Beer
GR_Portait_S
GR_Beer_S
GR_Recommended_Storie_S
06 CONTENT PRODUCTION
06 CONTENT PRODUCTION

Ensuring consistency from content production to implementation

In order to facilitate communication during the production of the copy and visual assets, I built a repository-like matrix for retouchers, graphic designers, copywriters and content publishers to curate and implement the content in the site as intended in the initial designs.

GR_Content-Matrix
07 BUILD & LAUNCH

Carrying the design vision all the way from build to launch

Carrying the design vision all the way from build to launch

I supported the UI Designer with delivering the final Sketch final, annotating the designs to indicate gesture, interactions, links and pictures ratio. Ongoing discussions were carried out with the Developer throughout the build process, until launch.

GR_Final-Sketch-File
M0_Cover_HP
NEXT PROJECT

Empowering people to drive positive environmental change at their workplace

Arrow_Right