Teo Yu Siang

Teo Yu Siang

Ready, set, vote: General elections 2015 microsite

2015web design

For the Singapore General Elections held in September 2015, Mothership wanted a microsite to keep readers updated of the latest news leading up to the election.

The brief

Mothership approached us to create the microsite with an open mind. There was no brief, except that they wanted the microsite to be distinct, different, and unexpectedly relevant to readers.

Main challenges

The main challenge of designing and coding the microsite was the time constraint. From the time the election was called to Election Day, we only had two months to design and build the microsite. Furthermore, we had to update the microsite live as the candidates were confirmed on Nomination Day, and as the results were announced on Election Day.

The process

With no time to spare, we kickstarted the project with the following process:

  1. Sketches and wireframes
    With no creative restrictions, we asked ourselves what we, as readers ourselves, would like to see in an election microsite. We quickly settled on two main things: a large, interactive election map showing the electoral boundaries and constituencies, and a section for each constituency depicted as a face-off between opposing candidates.
  2. Coding and creation of assets
    We went from digital prototypes to front end code, and at the same time started collecting a library of candidates’ faces using free-to-use images from the web. We also created templates of images of candidates’ quotes built for sharing on social media.
  3. Live updates to the microsite
    On Nomination Day, we updated the site as each constituency’s candidates were confirmed. For GRCs, we had to create group images of the candidate team from each candidate’s individual face photo. And on Election Day, we updated the microsite’s interactive map as the results were announced.

Results

Mothership’s GE 2015 microsite was a visually striking and distinctly playful take on coverage of the elections. With bright, bold colours, the microsite made Mothership a distinctly different site than the competition.

The first thing readers see is a large, interactive map of the constituencies

The microsite also contained a constantly updated table of rallies, with directions to the sites and recommended eateries nearby just a click away.

A key visual in the microsite was the framing of the contested constituencies as a face-off, giving it an almost Street Fighter vibe.

Each constituency was visualised as a face-off between contesting parties

In addition to the microsite, we also created images of quotes by the candidates. These were posted on social media, such as this one by Ng Eng Hen:

Read the story where this #GE2015 quote came from: http://bit.ly/1LGXqGo Follow Mothership.sg's election coverage at mothership.sg/ge2015.

Posted by Mothership.sg on Tuesday, 1 September 2015

Teo Yu Siang

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