Upgrading to A Personalized, Fully Digitized New Website

Digitalization, Security and Mobile Design were the tenets of this project, aiming to refresh their brand and personalize for their audiences.

Client: Tower Transit Singapore (as That Marketing Guy)
Industry: Transportation
Duration: 3.5 months
Key Service: Project Management, Responsive Web Design, Site Migration
Role: Project Manager, Designer and Developer
towertransit.sg
Project Summary

Tower Transit Singapore had planned for a major website upgrade to address certain security and operational changes. By migrating from WordPress to Webflow, they were able to revitalize their online presence, and deliver a fully digital and personalized transport experience to commuters, corporate partners, and candidates.

Requirements
  • Redesign the site architecture. The former site was catered towards commuters only. It had bus service schedules, feedback forms, application forms and service updates. The new site needed to showcase what they stand for and the strides they are making in the bus transportation industry.
  • Create a mobile responsive design from a desktop design. A designer had already provided the overall look and feel of the site. We needed to translate that into a mobile-friendly version.
  • Rethink Security. WordPress is known to be susceptible to hacking and defacement when plugins are not updated fastidiously. Due to multiple plugins being installed, certain updates may conflict with each other.
  • Transition assets fully from offline to online. As a transport operator, they recognize that updating offline assets like posters and boards take far too long, possibly conveying outdated information to commuters. They wanted to move the majority of the assets online so that it can be updated quickly.
Methodology
  1. Conducting an existing site audit to assess the inventory of web pages, interdependent modules and forms.
  2. Performing a security assessment of various website platforms with their internal IT team to ensure that they meet the legal requirements. This included meetings with the vendor and obtaining their certifications in written form.
  3. Wireframing each screen based on the revised site architecture, catering to three different personas visiting the site. Each persona was researched to have different goals and were seeking different information, so the hierarchy of information presented had to be considered (see below).
  4. Making a mobile responsive design was important as based on the previous site analytics, more than 50% of users primarily visited the site through their mobile devices.
  5. Briefing an external agency on a bus information web app, replacing their physical brochures, in order for them to scope out a separate timeline to go live.
Persona: Commuters
Commuters have easy access to Bus Service Information through a web app, latest announcements, Lost & Found forms and feedback forms.

Persona: Corporates
Corporate stakeholders have easy access to Tower Transit's corporate information, media, and how to contact them for opportunities and partnerships.

Persona: Careers
Potential candidates have easy access to location of current recruitment centers, employee benefits, and application forms.
Solution
  • After thorough consideration, the site was migrated from WordPress to Webflow. Existing integrations with their support workflow were also carefully mapped out and replicated, as well as setting up redirects to ensure SEO and usability was not affected.
  • The bus services database was designed and hosted within the CMS to ensure that various parts of the website could reuse the information across pages with 100% accuracy. The addition of the web app allowed users to view information without zooming in as compared to downloading a PDF on their mobile devices.
  • With the addition of persona pages, the user experience was redesigned to allow for the shortest path to what users do the most. For example, commuters could still access bus service information with two taps, and potential candidates could view detailed Job Descriptions before submitting their applications online.
Results

A11y Accessibility — With the Webflow platform, the website had improved accessibility to visually impaired users, and was SEO-friendly with the introduction of clear page hierarchy and content.


Designed for Mobile — The mobile responsive site allows users to call the support hotline in case of emergency in one tap, and is dynamically updated based on their opening hours.


State-of-the-Art Security — Large improvement in the security of the website as the platform is constantly audited and updated. It even conforms to the latest protocols (like HSTS).


Operational Efficiency — More than 50% decrease in time spent updating service routes and announcements, as it can now be deployed as quickly as a single day across all pages.

Here's how you can reach me