Case Study / Watch App Design / Setel
My role
Product designer
Design System
Design QA
Platform
Apple Watch app
Product
Setel fuelling
Year
2021 March - 2022 May
↑ Sneak peak of Watch app
Setel is Malaysia’s first-ever e-payment app for fuel, serving since 2018. Currently, Setel is available on over 1,000 Petronas fuelling stations all around Malaysia, with over 80,000 fuel purchases per day.
Presently, the Setel app is available on iOS and Android. We identified an opportunity to bring Setel to Apple Watch. It has also been a frequent customer request.
How can we bring the fuelling experience to an Apple Watch app?
Allow users to purchase fuel via an Apple Watch app
We have been receiving feedback from customers asking for an Apple Watch app. Even though we had customer requests, the stakeholders didn’t have a clear plan for it and were uncertain. So, I decided to design a demo app, which would be helpful to visualise the possibilities. Being an Apple Watch admirer myself, I believed that it would be a great opportunity for Setel’s fuelling experience to make the app available for the Watch.
So I took a few days to research the design language of the WatchOS and analysed other Apple Watch apps. Then I planned out a flow and started drafting a design. Once the design was ready, I shared it with the stakeholders as well as the other members of the company.
↑ Shared the design with the team
I have received really good feedback from everyone. Stakeholders appreciated it and they saw the potential. Then after a few months, we decided to officially build an Apple Watch app for Setel.
First time designing an Apple Watch app → This was my first time designing for an Apple Watch. In the beginning, I had to spend more time doing research to understand the Watch App’s design experience. Also, I studied the WatchOS human interface guidelines while analysing other Watch Apps.
User testing → We didn’t have a UX research team to do the research and validate our concepts. So testing after launching was the only method we had to validate our solutions. Alternatively, I sent the designs to team members who are familiar with the Apple Watch and gathered feedback.
Apart from the fuelling experience, the Setel Mobile app offers many features. Such as Rewards, QR payment at the store, payment method management, etc. But on the Watch, we didn’t want to overwhelm the user with many features. To make it convenient, we made only the fuelling feature available on the Watch. For any other feature, users can use the iOS app.
When purchasing fuel, 98% of Setel users choose an “Amount” or “Full tank” instead of a “Litre Volume”. So we descoped the Litre option from the Watch app.
Engineers analysed and decided to build the Setel Apple Watch app as a companion app. This means the user must have an iPhone paired to their Watch and must have the Setel iOS app installed to use the Setel Apple Watch app.
Since this is a companion app, the users must be logged into the Setel app on their iPhones in order to use the Watch app. So, no login flow is required in the Watch app.
The user flow of the Watch app is as same as the mobile app’s user flow.
↑ Watch app user flow
The initial demo app I did was quite basic and had a few issues. But we didn’t scrap that idea, rather we used that design as a reference. We wanted the design and the experience to be improved in a few places but the flow remains almost the same. But before starting on revisiting the design, I decided to create a design system for the Watch app. The experience I’ve gained as the owner of the Mobile Design System, helped me to build the design system for the Watch app.
When I was designing the Design System, I used my initial demo app as the reference. This design system was inherited from the Setel Core Design System.
As I mentioned above, we didn’t scrap the idea of the demo app. We wanted to improve that.
↑ Snippets from the Initial Demo app
I reviewed the initial demo app with my design lead and noticed that it had a few experience issues. The first step was to fix those issues.
1
Pump number selection → We figured that using the native spinner won’t be easy for the user. So, we decided to change it to a full-screen pump number selection page.
2
Amount selection → The fuel amount can be any value between RM3 to RM500. So the native spinner won’t be easy to use. So we decided to include presets and also allow the user to enter a custom amount using WatchOS’s native voice/scribble input.
3
Setel PIN → The design for the Setel PIN looks similar to the native Passcode modal. So, we decided to change the design.
↑ Pump number, amount and the Setel PIN screens were updated
Apart from the above issues, I have improved the design and the experience in a few other places based on the design system
After updating the designs on the first version, I presented the designs to the stakeholders. The main feedback I received was to reduce the number of steps on the flow. This was an important feedback since the experience on the Apple Watch should be seamless with a minimum number of taps.
After analysing possible solutions, we had two ideas.
1
Show suggestions on the home page → Our idea was to show smart suggestions on the home page based on the user’s previous purchases. If they don’t have any previous purchases, we will be showing preset options. But based on our assumptions, it will be highly unlikely for a user to make their first-ever fuelling purchase via the Watch.
2
Allow the user to set presets for the Watch app → This idea was to let the users set presets for the Watch app, from their Setel iPhone app’s settings.
Both of the ideas could reduce the number of steps from 5 to 3. After discussing with the team, we decided the first option is the smartest way to solve the problem
↑ New flow with suggestions
After updating the home page design with the above amendments, we had our final designs ready for development.
↑ Snippets from the final designs
Throughout the design process, I kept the engineer in the loop. As this being my first time designing for the Apple Watch, I needed to be sure of the feasibilities. I created design handoff documents and clearly communicated with the engineer on my requirements. There were technical pushbacks from time to time but I managed to discuss with the engineer and find alternative solutions for all those concerns without sacrificing the design decisions.
I wanted to introduce the Apple Watch app to the users via the Setel iPhone app because on WatchOS, apps get automatically installed without notifying the users. Therefore, the majority of the Apple Watch users won’t even notice that they have a new Setel Watch app installed on their Apple Watch.
So, we thought of 2 places on the mobile app where we could display the Apple Watch app introduction. This banner will be visible only to those who have paired the Apple Watch to their iPhone.
1
After making a fuel purchase → On the fuel payment success screen, the user would see a banner educating them that they could use the app on their Watch for their next fuel purchase.
2
The More page → More page is one of the most visited pages on the Setel mobile app. On that, we could show a Watch app banner.
↑ Introducing Setel Watch app
The development of the Watch app is still ongoing. The tentative release date is December 2021.
I have experience working with mobile apps for over 6 years, but this was the first time I got the opportunity to design for a wearable device. It was a very challenging and exciting experience. I have been using an Apple Watch for a few years now and it was helpful to quickly understand the guidelines of the WatchOS. During a time when the company was not focusing on building an Apple Watch app, I took the initiative to design a demo app and it managed to convince the stakeholders. I’m proud of the initiative I took. Because I took that initiative, I was given the creative freedom where I explored many options and also designed Watch app introduction screens on iPhones. Throughout the time I worked on this project, I learned how to design for Apple Watch, how to design a design system from scratch, the technical limitations on WatchOS compared to iOS and also the business side of launching a new app. I am looking forward to seeing how users are going to enjoy the Watch app.
After the launch, the Setel app iOS adoption surpassed Android for the first time.
