From Scratch to Featured — Tokopedia Apple Watch Extension
Wearable — a trend catching up among the people of Indonesia. Apple tops this market with leading 35% of users worldwide. And in Indonesia, Apple is the third most popular brand.
At Tokopedia, we have a culture of focusing on consumers, and following one of the DNA — Growth MindSet, we decided to explore this form factor too.
Let’s Begin
Tokopedia Mobile apps are packed with the power of many features. I’ll be honest here, we were excited and a bit greedy 🙈 to ship many useful things in our very first Apple Watch app. Our beloved users know that we do a lot of gamification to make earning rewards and discounts fun. We thought of building those in here. But real soon we realized, it is not what the customer would like. They would like to have something quick, something important on the computer tied on their wrists and the ease in doing that.
Hammering down the scope
Still, there were many things that we can build but now it wasn’t like we want to build. It was more like what the users would want us to build.
Our developers think tank was busy thinking about the features that can be super relevant and in parallel we started to work on a POC. A proof of concept around one tiny but super relevant use-case — Order Tracking. Here was the result of that effort.
We were also able to narrow down to the features, we would like to ship with the first versions to the users.
- Search Product — With keywords
- Wishlist — User’s wishlist. Request guest user to login to see.
- Product Details — PDP with minimal details from SRP and Wishlist
- Orders List — User’s orders. Request guest user to login to see.
- Order Details — Order page with minimal details.
- Profile section — Visible only for logged in users
Hurdles which were tackled
Xcodegen. When we were done with our POC, we tried to integrate the code base with our main app project. I have mentioned earlier, our app is super packed with loads of features. So the main app project is big and we use Xcodegen for generating our iOS project. Though as documented, it supports watch extension but still, we saw a few hurdles causing issues in the connection between the extension and host (main) app. We learned that the support needs to be provided for BuildableProductRunnable in the watch scheme file. Soon with some debugging, some modification in extension, we sorted that out.
Bazel. Sometime back, our project used to take a lot of time to get build. But that is a thing of the past after we got saved by Bazel. Now the build is a lot faster than before but we knew, this could cause another hurdle. When we talked about it with the Bazel team they suggested updating it. We did some changes in Bazel to support Objective-C (just 3% of our codebase) completely. Which made it a bit difficult to update Bazel. However, our brilliant team of PEs cherrypicked the changes and did what was needed. Now for the connection between extension and main app, a method — wcSession.transferUserInfo which was working earlier stopped working. However a little bit of googling led us to use this instead wcSession.sendMessage. Voila! it is working now
Blessing in Disguise
Till now, we were working on it as a side project and we used to spare some time from our engineering bandwidth. But it wasn’t enough. Then we heard that we are going to have a day full of engineering initiatives in our team — a whole 24 hrs Hackathon, right before the weekend, 😉 IYKWIM. Few were working on some deep engineering problems, some were picking some awesome innovations on the platform, some brainstormed and worked on their own ideas. Many of those are successfully live in the production app. A tiny detour, now back to us. We invested around 50 hours in our extension. We started at this —
We were sure and committed that, after these couple of days this extension has to be done and production-ready. That way, we can finish our work on watch and win the Ship-It award too 🤓, maybe, who knows 🤞🏼. So the Initial 5–7 hours, we didn’t write a single line of code, we were drawing the designs covering the important information for the pages to keep it concise and to the point and the color scheme. And after the hackathon, here we are.
Finishing Touches
We were done, excited. Shown this to the seniors and fellow engineers. Shared the build to play around this extension and UAT as a byproduct. We limited the shown information on the extension to very important fields only, so a few of the team members noticed that they get into a flow on the extension but after a while, they get blocked. Including more info and steps looked overkill in the extension but still needed by the users.
Here comes Buka di HP (Continuing in Phone). We quickly assembled and prepared this functionality. So if user is on any page and he/she wants to see more, they tap on this button, which is present on almost all the extension screens. This sends a message to the host app.
- If the user is using the app (in foreground), it asks permission and takes the user to the page accordingly.
- If the app is killed state or in the background, it makes use of local notification to let the user decide whether they want to go there now or later.
And then this happened
We released our watch extension to the users. The extension was an instant hit and we were getting good organic traffic. We were thinking about how can we educate our users that now they can have the fun of browsing their favorite product right from their wrists and track order with max ease. We were talking to the communication teams and then this happened and solved for us — Tokopedia in Apple Watch Spotlight. And yes we won the hackathon too 😎.
Thank you so much, Aman, and Rajmani for collaborating on this project.
Cheers 🍻!!
