How we helped Meralco create an app in 1 week

Words by Ceej Frankera  Graphics by Ajj Morales
Words by Ceej Frankera
Graphics by Ajj Morales

This is an in-depth case study about a Design Sprint that On-Off Group facilitated for Meralco, to help their team develop a high-fidelity prototype of a utilities management app.

Thanks to the generosity of our friends at Meralco, you can see each innovative step of a Sprint in action!

The Definition of a Design Sprint

Created by Google Ventures and made popular by AJ&Smart, a Design Sprint is a process for answering critical business questions through design, ⁣⁣⁣⁣⁣prototyping solutions to those problems, and ⁣testing those solutions with real end users— in most cases, customers. ⁣⁣⁣⁣⁣

What makes a Design Sprint such a unique project framework is how it utilizes various Design Thinking and UX methodologies in a time-constrained (usually within 1 week or less) process.

It’s worth noting that the Sprint framework is flexible enough to stretch over a longer time period.
This is often done when the team undergoing the Sprint cannot solely dedicate their time to the project.

Regardless of the timeframe used, the Sprint process is split up into five phases: ⁣⁣⁣⁣⁣a

Design Sprint Timeline.jpg

Phase 1: Understand

Day 1 kicked off with an orientation from On-Off Group’s Lead Facilitator, Phil Smithson, who took on the role of Sprint Master for this project. He began with an overview of the Design Sprint process and discussed the Design Thinking principles that would act as their ruling guidelines for the duration of the Sprint. The team went through several Discovery exercises, like as Expert Interviews with company managers and Customer Journey Mapping, to understand the context of the problem and identify the key challenges of the Sprint. The goal was to gain a deeper understanding of the problem they were trying to solve, which would align the team and make sure everyone was on the same page.

Conducting Expert Interviews

Here are examples of key questions to ask during the interview:

  • Describe what the problem is, what it does, and who uses it.
  • What is the problem your product is trying to solve?
  • Who is the current user, who do we want the user to be?
  • If there were no problems, what would the product look like in 2 years?
  • What’s our blind spot?
Meralco Design Sprint Rapid Iteration.jpg

Setting the Long-Term Goals and Sprint Question

⁣After gathering the necessary information, it was time to zero in on the problem the team needed to solve by the end of the Sprint.

The team defined a Long-Term Goal— how everything might optimistically look 2 years from now.


They also decided on the Sprint Question, or the hypothesis that would guide the output of this project.

Design Sprint How Might We.png

From this Sprint Question, the team decided that the Project Objective would be to—

Design Sprint Goal.png

Customer Journey Mapping

The team looked at existing products and services that could possibly shape their Design Challenge. ⁣

By mapping out the current journey of their target user, it allowed the team to take the best features of existing processes and adapt it to their solution.

Design Sprint Customer Journey Mapping.jpg
Design Sprint Customer Journey Map Tips.png

Phase 2: Diverge

The latter half of Day 1 was used to explore, develop, and iterate creative ways of solving the problem regardless of feasibility. During the activities of this phase, it was important that the team maintained a sense of judgement-free thinking.

Rapid Ideation

Given just a pen and post-it notes, the team was instructed to come up with as many ideas as they could within 5 minutes. This activity uses the power of free, divergent thinking to create a volume of new ideas/solutions that the team can evaluate shortly thereafter.

Rapid ideation.png
Sketching Meralco.jpg

Paper Prototyping

The chosen ideas can then be worked up into Paper Prototypes. This form of prototyping is a widely used method in the User-Centered Design process.

It is regarded as a fast and cost-effective way to imagine how the user interface might look like. This process helps developers to create software that meets the user’s expectations and needs.


Phase 3: Converge

Now that the team was able to flesh out their concepts, it was time to identify the most feasible ideas and identify them further. Day 2 began with an activity to review the Paper Prototypes that were made the day before.

Idea Museum

Just like walking through a museum, the team was instructed to review the initial solutions created the day before.


Heat Map Voting

Each member was given 30 dots, with 1 for representing 1 vote, and was instructed to pinpoint the features they liked about their fellow member’s sketches and diagrams. ⁣⁣


The Decider Vote

After the whole team votes, how do they come up with the final features?
Enter: The Decider Vote⁣⁣. Here’s how it works—

After identifying the different features, a poll is casted in order to decide what solution the team should work on. ⁣⁣The features emphasized by the Heat Map Voting may influence the outcome of the final vote but it’s ultimately up to the Decider.


The vote is facilitated by Team Members with different roles: ⁣⁣

⁣⁣Moderator— narrates each sketch, calling out standout ideas⁣⁣
⁣⁣Scribe— writes down the standout ideas ⁣⁣
⁣⁣Sketcher— reminds the team what important features they might have missed within the proposed solution⁣⁣.
⁣⁣Decider— holds the most weight in determining the final solution that will prototyped and tested⁣.
Note: While each member is able to voice out which features they want in the final prototype, through the Heat Map Voting, it is crucial that the Decider has the last say— why? ⁣⁣
Whether they’re the big boss CEO, Lead Engineer, or Project Manager, this person acting as the Decider most likely has the most tangible exposure to the problem trying to be solved.



Once the final features have been chosen, it’s time to create the Storyboard.

A Storyboard maps out each step of the experience, in this case a utilities management app, so that everybody is aligned on what goes into the prototype.

It also ensures that there is the right feature to accommodate each step of the user journey.


Why are Storyboards important? ⁣⁣
In Sprints, usually the chosen solution features aren’t drawn in a linear storyline. The team needs to create a Storyboard so they are able to: ⁣⁣

– Run cohesive User Interviews to get answers to the Sprint Questions

– Build the Prototype to be tested with Users

We begin building the Storyboard by starting with the User Test Flow. Determining the flow of user actions turns all those messy discussions into a step-by-step instruction list for the Storyboard⁣⁣.

User Test Flow

To create a User Test Flow, start by writing down the Beginning and the End Action-Steps first. ⁣⁣
Refer to the Customer Journey Map as well as the Sprint Questions— it’s likely that the real-life actions of the customer have already been captured in this activity.

In the Map, the goal of the customer (ie. his job-to-be-done) has already been illustrated so it can be used as a guide for the last action-step.⁣⁣


Phase 4: Prototype

On Day 3, the team buckled down and bent time and space to create a high fidelity prototype in just one day. They also spent this day planning out the User Interviews for Friday.

For this Sprint, the team used the app, Marvel. It’s a collaborative design platform that you can use to wireframe, prototype, design online, and create design specs all in one place!

w1200_fee4_disclaimer_text-09 v2.png

About the Prototype

The prototype created is an app that will allow Meralco post-paid users to track their consumption and receive notifications if their usage spikes or if there are any outages in the area. ⁣⁣

Users will be notified when they’re approaching their budget limit that they’ve set in the app. ⁣⁣The user can also get actionable insights based on behavior to manage energy consumption.


Phase 5: Test

On Day 4, we tested the prototype with 10 potential users. The team gathered testers through a social media post and filtered each applicant through a pre-test survey— they needed to ensure that their testers matched their target user profile.

Usability Testing

During each test, all members of the sprint team took down notes.

At the end of each test, they put all their insights and the user feedback on the whiteboard (segmented by testers) and grouped them by trends. ⁣⁣

Each participant received a gift certificate upon completion of the test. It’s important to provide an incentive or some form of compensation, in exchange for the tester’s time.


User Testing Synthesis

The part of the sprint is spent synthesizing these insights following the RITE method, in order to create a user-driven iteration of the prototype.

Every interviewee was a goldmine of feedback that needed to be taken into consideration for future iterations. ⁣
It is through the interview that the team can identify user patterns and how to improve the prototype.


⁣⁣The RITE Method⁣⁣23

Testing and gathering User Data is crucial to the process of rapid iteration or the RITE method

RITE: (Rapid Iterative Testing and Evaluation) ⁣⁣

⁣⁣This method is similar to typical usability testing in that participants are asked to complete tasks using think-aloud protocol. ⁣⁣

The major difference is that, instead of waiting until the end of the study to gather the findings and suggest improvements, the team iterates on the design as soon as issues are discovered by one or two participants. ⁣⁣

In this way, designers can quickly test and get feedback on new solutions and ideas— that is what the team did during the two batches of testing. ⁣⁣

5-Day Sprint: In Review

First of all, congratulations to this amazing cross-functional team from Meralco that came together to complete this Sprint! ⁣
⁣In just 5 days, this dynamic team created a high fidelity prototype that was built, tested, and validated with their users every step of the way.

Let’s quickly review what the team was able to accomplish—

User Feedback

The overall concept was very well received by all interviewees— they loved the idea of getting notifications to help manage their consumption. Testers reacted positively to the SMS and in-app notifications and found the user flow very easy.

We learned that users were interested to see their current usage and said that having regular updates would make them use less electricity as they approached their set budget.

The idea of a budget was foreign to some users as electricity usage has always been an expense that they felt they couldn’t control. Users were happy to submit information about appliances and household size in exchange for detailed information about their usage.

Sprint Team Feedback

The Sprint team found it incredibly useful to be locked in a room for 5 days working together and were able to easily apply the Design Sprint principle of creating tangible outputs to avoid endless discussions. Decisions were made quickly, ideas were validated and a lot was learned from the 10 customer interviews the team performed.

The key learning from the Sprint was that customers would be delighted to receive regular notifications about their energy consumption from Meralco, which answers the hypothesis that the team sought out to prove.

What made the Sprint a success:

– Having a cross-functional team work together on a problem

– Being able to share their input to create unified ideas

– Testing the product on a variety of actual customers

– Prioritizing ideas and creating a prototype very quickly

– Iterating immediately based on user feedback

– Running on a feasible Sprint question

Next Steps & Recommendations for the Sprint Team

Now that the team has experienced a Design Sprint for themselves, it’s important that they plan out the next steps of this project to keep the momentum going. Here are a few action items that our Facilitators recommend that the team do—

Immediate (1 – 2 weeks):

– Present summary of synthesis and customer feedback to stakeholders and decision makers.

– Demo the prototype and share the videos during that presentation.

– Hold an Iteration Sprint (minimum of 2 days) to iterate and re-test notification settings to try to cater to more user preferences and finalize this section.

– Validate technical feasibility and iterate design and test again based on feedback.

– Complete details of the customer journey map to see how this idea fits into the bigger Meralco landscape.

Short – medium term (1 month+):

– The team to share their stories at informal internal company events (lunch, coffee, dinner sessions etc) with the wider Meralco team to help evangelize this way of working.

– Iteratively created prototypes should be used to help create written project requirements.

– All projects should not just have written requirements but mandatory visual journey map so the bigger picture can be seen, as well as a prototype.

– Push for all employees, starting with the most senior executives down do one day frontliner customer service.