Celebrating 160 years of Singapore’s Postal Service
UX/UI, Web Design, Videography
Jul 2018 - Nov 2018
Singapore Post (Singpost) is the country’s leading service provider that prides itself in providing mail and logistics solutions, both local and worldwide. 2018 being the 160th year since the beginnings of postal service in Singapore, Singpost wanted to celebrate it by creating a campaign #Singpost160, which consisted of a microsite and video.
Together with my team in Edenspiekermann, I crafted the structure behind the website and ensured quality interactivity across devices. I also worked on the visual design of the website, then handed the design components over to the developer. Lastly, I spearheaded the production of the Singpost 160 video which was a wrap-up of the campaign.
View it here: http://160.singpost.com
Singpost intended for this microsite to highlight the historical milestones and transformation of postal service in Singapore through the years. To determine which information was best suited in the timeline, we sieved through 160 years worth of physical content - in form of articles, photographs, historical books - then used card sorting to categorize content based on decades. In our workshop, we asked our participants to label which notes they found essential, nice-to-know and not important at all.
We put up a list of styles and concepts that we liked for inspiration.
Looking at the content given, inspiration from the sites, as well as Singpost’s tagline for this campaign ‘Connecting Communities’, we then came up with principles for designing the website.
1 - Straightforward, simple
Visual presentation of dense content, like historical milestones, should contrastingly be designed in a way that is straightforward and quick for users to comprehend. The experience should be simple to use, using familiar patterns to users.
2 - Playful
A playful design will add a intimate, light-hearted twist to information that is otherwise factual and cold. This adds relatability to the content, which resonates with the tagline of the campaign.
Keeping these principles in mind, I came up with wireframes to explore presentation of content in easy, friendly manner. For every wireframe, I included a mobile version to ensure feasibility across platforms.
Simple landing page that gives a preview to all the sections
Option 1 - Timeline page that displays one year at a time. These are 2 timeline navigation bars - Vertical one for the decades, and Horizontal one for individual year
Option 2 - (Here, we had the idea of overlapping images to generate playful collages. We added info boxes to include fun facts or information elaboration, so that the overall timeline design stayed clean. I incorporated a sticky timeline navigation bar, so that users could easily jump between sections.) Collage style - Vertical scroll version
Option 3 - Collage style, horizontal scroll version
Gallery based on the themes, with tabs for easy navigation between the themes.
Option 1: Carousel gallery
Option 2: Timeline gallery
After reviewing the wireframes, we felt that collage concept for Milestones page had stronger relation to the theme of Singpost 160 campaign, since it was a more fun way to layout the images. Displaying one year at a time was visually too clinical, it would involve too much clicking, and the dual timeline navigation bars was potentially confusing.
As for the Transformation page, we went Option 2 (Timeline gallery), as it would be more dynamic - giving users the feeling of a smooth endless gallery.
Visual Design Studies - Milestones
We started visual design with the Milestones page. Together with fellow designer Fang Ting, we came up with 2 versions of the page with collage concept - Horizontal scroll and Vertical scroll.
Constructing design components
As the timeline was designed in a slightly unusual collage style, building of the page could be potentially challenging. Hence, to ensure the feasibility of development, I came up with 6 components that would be used repeatedly throughout the timeline.
In each component, there are boxes that set the boundaries of the image. There are also layers to determine which image goes in front of another (Magenta below, Green on top), differing layers crucial to enable a parallax scroll effect. The components were essential guidelines that saved time by simplifying the handing off process to developer.
To commemorate the end of the campaign, Singpost wanted to create a video to summarise the milestones of postal services. To fit the “Connecting communities” theme as well as to invoke the feeling of nostalgia, I thought of a heartwarming narrative between an ex-postman and his grandson, whereby they reminisce the history of Singapore’s postal services together. With the guidance of Singpost for the script, I directed and edited the video.
This was a wholesome project in which I was really grateful to be able to sit through till the end of the campaign - from website to video. I learnt the intricacies of designing for development, how it is not easy to replicate Sketch designs to code form especially for an unconventional collage-like layout. I also learnt how it is important for designers to be in-tune with front-end development knowledge, as it greatly aid developers in the handing off process.