Tokopedia iOS: Hello 2021, Rewind 2020
Year-in-review
2020 is definitely a challenging year for everyone. It challenges our productivity and the way we work. Despite this difficult time, we still managed to get a few things done, well, a lot. We’d like to share a bit about our journey in 2020.
App improvements
These are from the feature or product side that improves our user’s quality of life.
Mandiri E-Money Top Up
If you want to use toll roads in Indonesia, you have to pay using government-approved electronic cards. The traditional way to top up money in these cards is through ATM machines or local convenience stores, which is not so convenient when you’re in a rush.
Starting from this year, our users can check their Mandiri E-Money card balance and add money through their iPhones, thanks to the newest NFC API.
Tokopedia Stickers
Stickers are a thing in today’s chat apps. Indonesian people like to express themselves through stickers. We also like to join the fun by providing our own sticker packs.
You can use them to wish someone a happy birthday, expressing your surprised or happy reactions and more. These stickers are also available in our internal chat feature, making interactions between buyers and sellers to be more fun.
You can add these sticker packs to your WhatsApp by going to your account menu in your Tokopedia iOS app.
Widget
My personal favorite. Having to navigate a few screens in the app to find out your order status feels tedious to me. Thanks to the new iOS 14 Widget, I don’t even need to unlock my screen to see my orders.
There are a lot of possibilities in the Widget that we are still exploring, expect more to come soon!
You might be interested to know the details:
From Enthusiasm to Accomplishment-Speedy delivery of iOS 14 Widget
Apple Watch Support
Wearables are getting more popular in Indonesia. Apple Watch is the default choice for wearables when it comes to iPhone users (unsurprisingly). Responding to notifications from Apple Watch also feels more comfortable than pulling out phones from your pockets.
Want to know more?
From Scratch to Featured — Tokopedia Apple Watch Extension
Dark Mode Support
There are a few reasons why people use dark mode. One main reason is they are much more friendly to the eyes, especially in dark places (surprise!). I don’t know about you, but opening an app and then having greeted with a bright white color can be annoying to me.
Dark mode implementation takes much more effort compared to other improvements. We need to modify and test hundreds of view controllers to make sure they look good on dark mode.
Getting Featured in Apple Appstore
It has been 5 years since the inception of the Tokopedia iOS app and we think that it’s about time our innovation can be more widely recognized outside Indonesia.
We decided to shoot for the moon, by connecting with every Apple rep that we knew. Looking back at what we have done, support from the AppStore team gave us confidence and encouragement to bring Tokopedia App featured on AppStore’s “Great on iOS 14” section in the region.
They have been helpful by providing much insight and feedback on how we should build our feature. We would love to recommend to reach out to them if you plan to get your app featured and of course by building some great and up to date stuff to the table.
We haven’t been featured for a long time and finally did. Implementing features that utilize the most of iOS definitely helps and finally getting your work recognized is definitely feels good.
Internal Improvements
These are improvements that mostly have effects on our developer’s quality of life which in the end improves app quality and stability.
New architecture adoption
MVVM is one popular architecture that is adopted by many iOS developers for a good reason. One of the biggest advantages is you can decouple your business logic from the UI and test them in isolation.
We have been adopting this architecture for years and it works well for features with small to moderate complexity. This architecture doesn’t scale really well for complex features though.
Tokopedia’s Cart feature is an excellent example of this problem. Whenever you change a product quantity, toggled a checkbox, you need to update the total price and the quantity at the bottom bar. Toggling any product checkbox will also affect the checkbox state at the shop and topmost level.
This problem is actually has been solved in the React world by using Redux architecture. We decided to adopt the same architecture to solve this problem in Swift by using The Composable Architecture.
Moving to a new architecture is always costly, but we think this is worth doing. We’ll cover more details in a separate blog post, but in short, here are the benefits compared to MVVM:
- Scales really well from simple to complex features.
- Better code readability.
- Much easier to unit test.
10x Build Time Reduction
It takes around 40–60 minutes to build and test our app on CI machines. This leads to long build queues given our limited number of machines available. This can get worse the bigger our team and codebase gets.
Don’t you find it a waste of time if you change a value in Info.plist and have to wait for 60 minutes to distribute the build?
We adopted Bazel build system to solve this. One biggest selling points in using Bazel is the caching system, where you only need to build the modules that change. In our case, changing info.plist only takes 4 minutes of CI time now instead of 60.
On average, it takes around 5–10 minutes for testers to get a new build since the code was pushed to the repo.
Learn the details here:
How Tokopedia Achieved 1000% Faster iOS Build Time
Snapshot Testing Implementation
It takes a lot of work to make sure your user interface looks right on hundreds of screens with different devices and configurations. For each screen implemented, we need to make sure that they look right on:
- iPhones and iPads
- iPhones with notches
- iPhones and iPads with dark mode enabled
To maintain UI quality at scale, we decided to experiment with Snapshot Testing which captures the images of our UI components. We began our experiment on our product cards which have so many different configurations.
Let me show you 8 variations of around 80 generated snapshots.
Internal App Distribution and Feedback
We used to distribute our builds only to our testers and product managers in the development phase. The builds are distributed through Microsoft AppCenter which works quite well.
Recently we decided to distribute the builds for the whole company to gather more feedback during development. We can’t use AppCenter for this case because their authentication and download flow are not too friendly for non-tech users.
Using TestFlight also won’t do. If you distribute your apps using Beta Testing, you have to wait for AppStore reviewers at least a day to approve the build.
In the end, we decided to build our own distribution platform that is easy to authenticate and download builds. This platform is also used by the Android team to distribute their builds.
I think this section deserves its own blog posts later, but here’s a sneak peek for now on what it looks like.
Test coverage improvement
Tokopedia is now vital to Indonesia’s economy. The impact of having lots of bugs would be big and simply unacceptable.
We used to ship features without unit tests because we prioritized shipping fast and no one knew how to write one. Manual testing used to suffice when the number of features is small.
As time goes, our features keep growing to be more complex, and new business units show up, increasing the number of features. Manual testing is not a sustainable approach anymore.
At some time in 2020 when feature backlogs were slowing down, we invested the time to increase test coverage for existing features. The number of coverage got better since then. New features are also required to be covered with tests to make sure the code coverage stays good.
Data Tracking Accuracy
We track several metrics in the app to make business decisions based on data. Inaccurate data can do more harm than having no data at all. This is why data accuracy is so vital.
Accidents happen now and then because we lacked testing. We used to only cover business logic in our unit tests. It turns out that the data tracking logic can be tested the same way along with our business logic.
The only thing we need to do then is to increase awareness about data importance to our developers. We secured two weeks to teach our developers to cover data tracking logic in the codebase and then increase the coverage for our features.
We’ll cover more about this in a separate post!
Conclusion
We are still far away from perfection. There are still a lot of things we can do to improve both user experience and developer productivity. Let’s hope that 2021 can be another year of learning and innovations.
To wrap up, here is the timeline of all our initiatives,
