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 implementing a user-centered design process as we were designing the user’s experience rather than just a website.


We started by discussing key elements with the stakeholders. They included:

  • User/Business Goals
  • Target Audience
  • Value Proposition

We connected these elements together to guide its directions. To find out more about business objectives, we set primary questions (e.g. what is your vision offering, what worries you, how different is your product from others, how can we attract their attention) to drive us to the next point; user research.


Firstly, we analysed websites by existing competitors and similar companies that are based overseas by examining their products’ user flow. Through roadshows, surveys and interviews were conducted to gather feedback in relevance to what meet their needs.


With the necessary information collected through interviews, 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.

Backlog Prioritisation

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.

Low Fidelity Prototyping

Moving on, we started ideating with the team by sketching wireframes. We focused from a mobile-first perspective as our personas will mostly be depending on their phones to retrieve information.

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 what form-based platforms, such as dating websites are doing. From there, we found one 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.

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

Moving onto high fidelity prototyping , we refined its design to move a step further to implementation.

Usability Testing

Upon implementation, usability tests were conducted with stakeholders and a group of interviewees in person. Having predefined the user journey from the perspectives of our created personas, the goal was to further test and assess learning behaviours for feedback purposes.


We gave our users task-based scenarios to gauge on areas for improvement and recommendations. The following cases were taken into consideration:

  1. Sign Up: without navigation buttons, user does not know how to proceed
  2. Sign Up: upon selecting a plan, what if user wants to see other plans during the process?
  3. Sign Up: how do user recall what plan he signed up for during the further stage of the process?
  4. Price Plans: users took awhile to differentiate the different plans due to its lengthy text.

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)