Teo Yu Siang

Teo Yu Siang

Brand new smile: Mothership’s new brand identity and website

2017branding, ux design

Mothership is Singapore’s fastest growing internet media company, with a distinct sense of humour and digestible social commentary that captured the hearts of many Singaporeans. My brother (Yu Sheng) and I were engaged to create a new brand identity and website for Mothership as it positions itself for future growth.

The brief

Mothership was established in 2013, and in a short span of time grew to become one of the nation’s most popular internet media company. Their logo, while serviceable, nevertheless did not capture the dynamism and playfulness of the brand.

Mothership’s past logos featured a blimp logomark made to look like a speech bubble

Mothership was fond of its blimp logomark and keen to retain it in some form in the new brand identity. It also wanted a complete rethink of its website, to not only improve its visual aesthetics, but also create an enhanced reading experience for devices of all sizes.

Mothership’s website (mid-2017) looks visually dated, with styles reminiscent of a personal blog

Main challenges

Brand identity

One of the main challenges of designing Mothership’s new brand identity is that it needs to be able to possess a wide emotional range, from silly stories to serious think pieces.

Other design constraints on the brand identity were:

Website

Mothership’s new website, on the other hand, should offer readers a unique experience that incentivises repeated visits to the site. It should also be relatively medium-agnostic, so mobile and desktop readers can have equally meaningful experiences.

The new visual style of the site also has to be balanced between conveying a sense of credibility (which the old, blog-like design lacks) and emotional versatility (much like the brand identity).

The process

For this project, we tackled the brand identity first, all the while keeping in mind how it will affect the website’s design.

We undertook a 5-stage process for the entire rebranding and website redesign project:

  1. Understanding Mothership
    Surveys of readers and interviews with internal stakeholders were done to get a sense of how it’s perceived currently, and where it’s headed in the future. We also looked at web traffic data to help guide our website redesign.
  2. Industry analysis
    An examination of both the brand identities and websites of local and international competitors, so that we design with the industry’s context in mind.
    Some of the local mainstream and alternate news and entertainment brands in the industry
  3. Ideation
    Free-style brainstorming to create as many ideas as possible. For the website’s design, we used tools like user journeys to help us come up with novel experiences that Mothership readers will find relevant and useful.
    Some of our (self) rejected ideas for Mothership’s logo
  4. Design constraints
    Testing our ideas against a checklist of design constraints for both the brand identity and the website.
  5. Final polishing
    Once a winning design has been selected, we do a few rounds of further polishing—because the devil is in the details.

Our process thus started with a research phase, followed by idea divergence, and then concluded via idea convergence.

Results

Brand identity

Mothership’s new brand identity is simple and malleable, with small visual twist in the form of the blimp logomark's shading, which is shaped like a smile.

For the brand’s official typefaces, we selected high quality Google Fonts, which provide personality and credibility at the low cost of zero. (Website font licences are a very expensive alternative, considering Mothership’s high readership.)

As an easter egg, we named all brand colours after popular food dishes
Animations for Mothership videos

Website

Mothership’s new website is clean and modern, but at the same time has a dense enough layout to keep it teeming with content.

One of the novel elements of the website is Story Playlists, which contains dynamically updated lists of stories grouped into trending categories. In the mornings, for instance, a “Morning Commute” playlist will appear on mobile, providing a list of the most entertaining stories.

A hybrid of Spotify’s playlists and Medium’s story categories, Story Playlists on Mothership’s website is based on our realisation that many readers start browsing the site in the early mornings and evenings, which coincides with the morning and evening commutes to and from work.

An open Story Playlist on desktop
An open Story Playlist on mobile
We created a library of icons covering a wide range of topics, so that new Story Playlists can be created easily

Teo Yu Siang

Brand identity design
Web UX design

Teo Yu Sheng

Web UX design
Web frontend (HTML, CSS, JS) implementation

Hey there!

Got a project in mind? Let's create something crazy awesome together. World domination via wicked design is just an email (and a coffee) away.

Drop me an email

Find me on Facebook