The Story

PacificLight is an electricity power generator and retailer committed to helping customers effectively and simply manage their energy needs.

Since 1 April 2018, Energy Market Authority (EMA) commenced the soft launch of Open Electricity Market, where households and businesses in Jurong can choose to buy electricity from retailers other than Singapore Power (SP) islandwide.


2017 to 2019

  • Personas
  • User Experience
  • User Interface
  • Prototyping
  • Frontend (HTML/CSS/JS) Development

The Problem

As one of the retailers in the Open Electricity Market, PacificLight lacked an online platform for consumers to purchase electricity and they faced stiff competition from other retailers who already had a platform at that point of time.

The Goal

Other than revamping the website, a signup portal was built to facilitate potential consumers to buy electricity at price plans that meet their needs.

The Process

In collaboration with a design agency, we focused on discovering the business intent and who are the target audience.


We held a workshop with the business stakeholders to understand the following:

  • Business Context
    – Business goals
  • Targeted Group
    – Who is this targeted at
  • Pain Points
    – obstacles that company face and foresee
  • Opportunities
    – how might we turn blockers into opportunities

This brought us to the next point; research.


Firstly, we analysed websites by existing competitors by examining their products’ features. We did a comparative competitor analysis to see the offerings and drilled down to the number of registration steps each company has on their websites.


In an effort to raise awareness of Open Electricity Market, roadshows were held at the heartlands to make known to the public of the different retailers they could purchase from.

Through this platform, we did surveys with potential customers to gather information and opinions on their necessities. Questions revolved around:

  • Gender
  • Age
  • Location
  • Occupation
  • Preferred Mode of Device
  • Priorities in Offerings
  • Source of Information about Roadshow


With the necessary information collected through the surveys, we synthesised these data and created personas with user background, environment, end goals and scenario.

In the end, we settled with two personas; Andrew (Sales Manager) and Cheryl (Housewife) as they reflect our defined target audience.

Journey Mapping

To facilitate a common understanding of the personas’ perception, we developed journey maps to let stakeholders have a glimpse of what customers perceive when they interact with the product.

Using Cheryl as an example, we see how these perceptions were split into different touchpoints that happen across multiple channels in a step-by-step process. We considered the steps, touchpoints, channels, their thoughts & emotions and potential ideas that can happen during each step.


With the personas in mind, we started developing stories as the design team worked on its components. Using the sitemap as a guideline, we established user flows and low-fidelity prototypes that defined the way Andrew and Jessica will navigate through the website.


Having defined the backlog, we prioritised the features upon speaking with stakeholders. Using the personas as a guide, we came up with stories to shape the features of the product.

Ideation / Low Fidelity Prototyping

Moving on, we started ideating by sketching variations of wireframes.

Concurrently, we went through our research findings and dissected the sign up forms of existing competitors’ websites. We looked beyond what competitors do and assessed case studies and form-based platforms such as dating websites. From there, we found an example of how they emphasised on step-by-step singular questions and we realised that may be applicable as the MVP launch would only be catering to selected areas. This also aligned to our research of implementing a multi-step form (here and here) and the usage of Hick’s Law, which states that,

The time it takes to make a decision increases with the number and complexity of choices.

This also firms up our hypothesis on how we wanted to simplify choices for users by breaking down tasks into smaller steps and onboard them progressively to reduce cognitive load for new users.

We examined each of its priority and restructured its order, going through rounds of iteration upon receiving feedback from stakeholders before moving to the user flow.

User Flow

As we refined and synthesised our ideas, we progressed to user flow concurrently to define the tasks of each page. We used the journey maps to guide us as we expanded on the ideas to develop key points to navigate the user throughout the pages, primarily the sign up portal.

High Fidelity Prototyping

Upon validating with business, we moved onto high fidelity prototyping , refining its design to move a step further to implementation.

Additionally, we developed a UI style guide so that developers have a reference when it comes to building the website.

Usability Testing

Upon implementation, usability tests were conducted with 6x shortlisted interviewees who declared their interest for this session during the roadshow. Having predefined the user journey from the perspectives of our created personas, the goal was to further test and assess learning behaviours.


We gave our users task-based scenarios to gauge on areas for improvement and recommendations. The general perception from users was positive as they highlighted its ease of use though the following cases were taken into consideration:

  1. Homepage – Request for Callback: 5x users could not identify callback icon instantly
  2. Sign Up: 4x users had difficulties proceeding to the next step, not knowing they will have to press “enter” to proceed ahead
  3. Sign Up: 3x users had difficulties differentiating the fields on the pricing page
  4. Sign Up: 2x users took a while to find Agent Details when they were tasked to key in agent code during sign-up process
  5. Price Plans: 4x users took awhile to differentiate the different plans due to its lengthy content.

Hence, we decided to improve the user interface to increase the visibility of system status for the aforementioned points.


After sitting through another round of iteration, we launched the MVP and continued to work with stakeholders to identify user behaviours and patterns so the changes were pretty much ongoing at every point of time.



Signups (& Counting)