Background

I lead the design team to build end-to-end Setel POS from scratch to replace existing POS system at PETRONAS stations and providing much more seamless retail customer experience. Setel is an e-wallet service under PETRONAS Dagangan Berhad has been providing the ability for customers to fuel their vehicle through the app without using cash or the need of physical cards.

Everything that I share here might not be painting the full picture as to respect Setel privacy to internal strategies and data. It does not necessarily reflect Setel’s opinion or direction whatsoever and mainly my personal perspective of the project.

Problem

Setel customers love innovative nature of the app and wanted Setel to be more integrated to ease their needs. Below are some examples.

Consumer’s Jobs-to-be-done:

• When I’m making purchases at PETRONAS stations, I need a way to still be able to earn rewards and benefits even if I didn't bring my phone or pay via cash
• When I buy items from Deliver2me feature while I’m fuelling, I want to make sure I got exactly what I ordered quickly.

Station owner’s Jobs-to-be-done:

• I want to capture spending habits to strategize sales and maximise profit
• I want my cashiers to have an easy to use POS to complete C-store purchases
• I want my cashiers to be able to manage pump activation while also complete C-store sales without any mistakes
• I need an integrated system that can handle C-store and fuel inventory management, analytics and allow easy auditing from time to time.

Team

I was leading roughly a group of 5 designers across 7 teams each consisting of PMs, Engineers, QAs and Ops. Teams are focused on each individual features ranging from Admin Portal, POS, Customer- display-screen to Open Payment Terminal at the pump.

Process

The first step in designing a solution is to understand the problem we are trying to solve. We had a very short time to deliver our project, but we did not rush into designing without doing some research first. If we did that, we would be basing our design on assumptions that might not be true. We wanted to know how our users think and feel about the current system and the changes we are proposing. How often do you talk to your users when you make important design decisions?

We are dealing with a big challenge: changing the way PETRONAS's cashiers have been working for two decades. This is not a trivial task and we have to be careful not to disrupt their workflow or cause frustration. Some changes might seem minor, but they can have a big impact on user behaviour. We can reduce the risk by using common patterns that users are familiar with.

I interviewed cashiers and business owners to understand their needs and pain points. The cashiers are the main users of the system, but we also have to consider the business owners who have their own goals and expectations from the POS system. By listening to all stakeholders, I was able to create a holistic and seamless user experience. This leads me to the next step: defining the target users for our solution.

1. Competitor analysis

We wanted to find a POS system that could handle both Fuel and C-store transactions efficiently. We researched the products of our competitors and analyzed their design choices without judging them. We also conducted observation sessions where we watched the cashiers use the current POS system with customers for hours. This helped us understand the challenges and needs of the cashiers better.

2. User interviews

Once we have some rough ideas of what we are trying to solve, we came up with a set of questions to validate our assumptions. We made sure that user interviews are conducted strategically to make sure that the respondent are comfortable and willing to open up to share hard truths.

3. Site visits

Main purpose is empathise our merchant staff and to observe whether what say matches with what they actually do. Site visits are done at multiple locations, making sure we are capturing a wider scenario such as:

1. Stations at peak/slow hours
2. Stations at opening/closing hours
3. Stations at with most/least customers

4. Iterative design with prototypes

We enjoy brainstorming and sketching out different ideas for the design. We share our design with the stakeholders every week and get their feedback. When we are satisfied with the design, we put it on Figma mirror and test it with real users at the stations. We give them some tasks to do and observe how they use the design. We only intervene if they get stuck and ask them some questions to understand their problems.

Outcome

Within 7 months we have shipped our first MVP. Cashiers love Setel POS, Setel Admin and Setel Terminal. They feel like it is more user-friendly and love the new look which are using more common UI patterns and most importantly reflects Setel approach to user-centered design.

However we were facing a really big issue where the system was not very reliable due to it’s complexity and hardware limitations. Reliability issues are a big deal at retails stores as it reflects directly to the bottom line of the business. This was a very difficult problem to solve as reliability updates takes time, time which not all business owners are willing to risk.

1. Setel Point-of-Sale

• User-Centric Design: I initiated the design process by conducting user interviews and thorough research. Understanding the pain points of both customers and station attendants was essential.
• Design System Ownership: As the design system owner, I curated a comprehensive Concierge design framework. This system ensured consistency across various Setel products and empowered other designers.

Impact

Setel POS was released in stages throughout Malaysia. The Setel POS became a critical touchpoint for users, enhancing their fuel and c-store sales experience, streamlining transactions.

2. Cafe Mesra POS

• Collaboration and Leadership:I led a team of three designers. Together, we translated requirements from PETRONAS Dagangan Berhad into an efficient POS solution.
• User-Centric Design: Conducting interviews with cafe owners and staff, I ensured that the system met their specific needs.

Impact

PETRONAS Dagangan Bhd, the marketing arm of PETRONAS, launched Café Mesra in July 2022 – an F&B outfit offering reasonably priced handcrafted coffee and nutritious food options.

3. POS Backoffice (Web)

• Empowering Administrators: The back-office dashboard allowed administrators to manage transactions, inventory, and analytics anywhere as long as there is an internet connection.
• Design System Consistency: We extended the Portal design system to cater for complex back-office management from fuelling to C-store, ensuring a cohesive experience.

Impact

Efficient management of the entire ecosystem became possible, thanks to the POS backoffice.

4. Setel Payment Terminal (App)

• Designing for Efficiency:The Setel Payment Terminal app aimed to reduce transaction time while maintaining security.
• Deprioritized, but Valuable: Although deprioritized, this app remained a valuable concept for future enhancements.

Impact

Setel Terminal design was used as the setting stone for Sunmi Terminal's devices design solution across Setel.

5. PDT: Stock taking device (App)

• Easier inventory management:The Setel Portable Data Terminal (PDT) app aimed to simplify stock activities workflow, synced across devices.
• Shared design system:Using the same Concierge Design System, shared across POS, CDS, Terminal and OPT.

Impact

Depending on stations, some staff use the app on a daily basis to track inventory movement in the C-Store and the fuel inventory.

5. Cardless Mesra

• Security and Convenience:Customers could now use their phone numbers instead of physical cards at the counter, enhancing security and ease of use.
• Innovation at the Pump:Fuel users are able to earn points with only their phone numbers while fuelling. We also manage to capture a huge customer base who do not have Setel app installed.

Impact

Cardless Mesra simplified the retail experience at PETRONAS stations, reducing the need for physical cards. Data shows amazing take up by customers at the forecourts which then later converted to long-time customers within the Setel app.

Key takeways

Many people think that a POS system is just a simple tool for one person at the counter to process retail transactions. But that's not the whole picture. A POS system is actually a complex software ecosystem where everything is connected and integrated.

Developing it from scratch is a complex and challenging project that requires inputs from industry experts. For a solution that serves a running business, reliability and main Jobs-to-be-done are the key factors to consider. It is also important to communicate clearly with the stakeholders from the beginning and manage their expectations, as building a good product takes time.

I did not do this alone, I'm lucky to have a great design team who for the most part do the heavy lifting at crunching out these screens.

Connect with me on LinkedIn to share your thoughts on this case study!

Disclaimer: The projects mentioned are based on my personal experience and may have evolved since then.