From Enthusiasm to Accomplishment-Speedy delivery of iOS 14 Widget
The Beginning of Our Journey
Wednesday, 16 September 2020 was the day Apple officially announced the launch of iOS 14. There were a lot of exciting features and capabilities announced that day. But, from all of those features announced, there was one feature that caught our eyes: The Widget. It was simple, informative, compact, and clean. We knew from the start that this feature would be quite useful for our users. Therefore, in the spirit of Tokopedia DNA #FocusOnConsumer and #GrowthMindset, We have decided to create a few widgets for our beloved users in order to bring the best experience to tokopedia users.
In Tokopedia, we are very hungry and eager to keep on learning and trying out new and exciting features. We love being challenged and trying out things that we have never done before. Therefore, when the iOS 14 and widgets were announced, we were beyond excited and cannot wait to implement this capability on our beloved Tokopedia application.
The First Step
We started the widget project by first discussing it with our internal teams (Design, Business, and Development team). Meanwhile one of our developers did some proof of concepts on the widget. During the discussion, ideas sparkling here and there. We got a lot of ideas on what and how we should display information in the Widget. Now, we have to narrow down the idea and pick the most relevant and important for our users.
The project itself started in around the middle of August, and the team had less than 1.5 months to create the widget from scratch. This is for us to become one of the early adopters. We would like to support and be able to utilize the power of iOS 14 from day one while being the leader in the technology field. Since the widget is a newly launched feature, there were very few references for the team to learn about the widget.
Design Thinking & Process
The road we have traveled as a team was not an easy journey, it was only possible for us to accomplish the widget project by working together as a team. But, a lot of people may ask a question like “Why order tracker widget? Or Why chat widget?” Of all use cases available in our Tokopedia apps, why did we choose those two use cases to be shown on widgets?
Providing Order Tracking Capability
Let’s start with the Order Tracker Widget. Before the development processes. The design team conducted research beforehand to locate user pain points when using Tokopedia apps, particularly in the order section. They came up with lots of ideas and sticky notes came in handy for visualization of data and ideas. They wrote, removed, scratched those notes
Reading from the image can be hard and it is partly written in Bahasa, so let me help you to understand. Below are some of our pain points:
- User does not know the ETA of their order
- Important push notification order tracking are mixed with other push notifications
- Too many entry points and efforts just to track order (Have to pass multiple pages first)
Order has always been the most important thing in our user shopping journey, it is personal, it is their product, it is what they are expecting. So keeping track and seeing updates of every order placed is an endorphin source for the users. This factor alone is more than enough to encourage us to create even better shopping experiences for our users, and therefore we have decided to create a widget for order tracking.
Providing Chat-Responsive Capability
Coming up next, we have a chat widget. Based on our research, users want to take a quick glance at their chats, they want to be relevant. With this widget, users can view their messages at a quick glance without opening the Tokopedia iOS App. iOS Widget is configurable, so the next logical thing is to support switching between a buyer and seller perspective. You can get a quick look at your messages both as a buyer and seller.
After continuous development and receiving feedback from all parties, the widgets have undergone a series of improvements both from UI/UX and Technical sides. Thanks to those feedbacks, the widgets have been meticulously improved so that they could display simple, informative, and clean information.
Hurdles & Challenges
Creating a dent is never without difficulties nor without challenges. Embracing the unknown territory with newly acquired skills added the hurdles for us, exponentially! But afraid not, we have even more awesome team working hand in hand.
- The Sleek & Beautiful SwitUI
SwiftUI has been around for a while, but this is our first time embracing this for our Tokopedia app. Tokopedia as an ecosystem needs to support as many users as possible, therefore we are still supporting iOS 11 which limits us from adopting SwiftUI into our main app. The chance to adopt SwiftUI itself already sent us through the roof!
But, this provides another problem in itself. Since this is our very first time there is a lot of ground to cover. We spent some time after work to close our knowledge gap. Having a grasp of the new concept of writing UI while writing production-ready code is proven to be challenging.
- Blessings in Disguise
Tokopedia adopted Bazel to further speed up the building and compiling time of the Tokopedia iOS application [Read more here]. Bazel empowers us to deliver even faster and flexible development cycles. But this also created an issue back then. Particularly for the widget on provisioning profiles and entitlements parts. Integrating the new extension target type to the build system is proven to be challenging too.
On top of that, our in house CI/CD system needs to be upgraded too to use Xcode beta and then again once Xcode GC and release version is there. Our DevOps team is more than happy to assist us with this and do all the integrations, testing, and rolling them out. They did it in a way that does not affect our day to day development at all.
- Sharing Sensitive Information Between Main Application and Extension
Keychain access is native storage provided by Apple to store sensitive user information. During the widget development, our team encountered an issue in accessing user login data stored in the keychain when the phone is locked. This renders us unable to refresh the widget data within a designated time frame. The Keychain itself has the capability to be accessed even when the phone is locked. But that will require us to modify the metadata of the Keychain. That will require us to migrate all the data stored in old Keychain containers into a new one with correct metadata in place. The migration needs to be done in all of our users’ phones in production 😱. Yet, we managed to pull off this extremely dangerous and risky move! 🤘
- Supporting older iOS Version and error handling
Since WidgetKit is a new framework and available only for iOS 14, we also need to think about how to safely access WidgetKit specific code. This is especially important because we don’t want users of older iOS versions to experience less stable apps. Another thing we need to tackle is how to handle errors gracefully. Obviously, we don’t want our users to be confused with strange error messages on the widget.
These are just some examples of all issues encountered during our widget development. Frankly speaking, there are definitely some other minor issues that the team faced during the development. However, with solid teamwork and collaboration, the team can show our #GrowthMindset and finally release the widget to bring the best experience for Tokopedia users.
Last but not least, let’s meet the team behind the iOS widget. Please join me in saying thank you to these guys for their awesome work and collaboration🤘
