Implementing Dark Mode for the XING iOS app
How we adopted Dark Mode right in time for the official iOS 13 release.
Written by Stephan Richter, Interaction Designer in the XING iOS platform team.
We got very excited when Apple announced Dark Mode as one of the new features being shipped with iOS 13 and decided that we want to support it as quickly as possible. The announcement came while we were planning our upcoming quarter, so we were suddenly faced with a challenge we were only too happy to take up.
Nevertheless, by the time iOS 13 reached consumer devices in September, the XING iOS app already supported one of the most anticipated features for that release — Dark Mode. So how did we make it happen?
Introducing: the XING iOS platform team
One of the challenges we have to master in our everyday work at XING is the fact that our iOS app is fed by multiple teams working on different products. To complicate things further, the XING iOS development community is distributed across 16 teams working in various offices around Europe (Hamburg, Valencia, Barcelona and Porto).
Our job as a platform team is to make sure their work finds its way into the app as smoothly as possible, while maintaining a cohesive look and feel for the user. Our team consists of four iOS developers, one QA engineer, two designers and one product owner. Besides maintaining and improving the app and the code base, we consult product teams as and when needed. A great deal of the XING iOS app was built with our own Design System, which was rolled out about 3 years ago and is owned and maintained by the platform team. Various parts of the app make use of this centralised collection of components, all of which are custom-made so contributing teams can keep their time-to-market low, while maintaining a cohesive user experience.
The design process
To make Dark Mode possible from a technical perspective, iOS saw Apple introduce concepts like dynamic/semantic colours and dynamic images. These new features allow developers to support multiple appearances — in this case ‘light’ and ‘dark’ — while the operating system takes care of changing the appearance when users edit their settings.
We kicked off the Dark Mode design process by reviewing and adding to our Design System — our designers defined the colours for Dark Mode by creating an overview in Sketch that consisted of all the design elements in use in the app for both light and dark appearances. Here, we had the advantage of being able to give designers a reference tool to work with, while also identifying where our visual language wouldn’t transfer over by simply swapping out the colours. We soon knew which design elements needed some reworking and more attention, e.g. illustrations and icons. This then enabled us to adapt our current colour scheme and add variants in preparation for Dark Mode.
After deciding on the colour equivalents for Dark Mode, we created prototypes to be tested with real users. This provided us with useful insights on how users perceive the new dark appearance and where they ran into problems, e.g. with legibility. There was a lot of buzz surrounding Dark Mode, and our test users really liked the idea of having this option in our app. Given the warm reception the Dark Mode design received, we knew we were on the right track and progressed to the development phase.
Teamwork and communication
Getting the app ready for Dark Mode was essentially a joint effort that wouldn’t have worked without the commitment of all the teams involved. Implementation required the whole iOS dev community, led by the platform team as a central steering point within the organisation.
We provided knowledge and tools to help our iOS teams get started, while making central changes to components such as backgrounds, copy, buttons and icons. This groundwork and information enabled our product managers, designers, developers and QA engineers to work efficiently on the parts of the app they’re in charge of.
Bringing everyone together and keeping them informed throughout the project required a lot of communication work. To this end, we set up dedicated Slack channels, enabling teams to get in touch with the right people quickly and to ask design-related questions. We offered guidance so colleagues knew how to deal with their tasks and what they needed to contribute, adapt and fix so their products fit into the big picture. For the designers we created a UI kit in Sketch which included the most common XING interface elements, already reworked for the dark appearance. We prepared design recommendations, provided onboarding, and offered to consult remotely or even in person where needed.
Once we had everything in place, we carried out extensive QA sessions. All of the issues, bugs, glitches and potential improvements we found were documented in Jira and assigned to the responsible teams. We monitored progress centrally and helped the community on its journey towards the iOS 13 release. After several iterations we were all happy with the outcome. Then the teams started making global improvements, followed by an additional round of QA and submission to the App Store, right in time for the release of iOS 13.
Was it worth the effort?
We got our app Dark Mode ready and submitted it to the App Store right before the release of iOS 13. Thanks to our timely submission and a sprinkling of luck, Apple decided to promote the XING app in the App Store.
So far, 90% of our weekly active users have updated to iOS 13 and 35% of them use Dark Mode. The best result of all is the 300% increase in downloads we’ve seen, which we’re very happy about:
- Category: Apps with dark mode #1
- Category: Find your dream job #1
- Category: Favourite apps #3
User surveys show that our users are very happy with the Dark Mode — 60% gave it a five–star rating, while 30% gave it a four-star rating.
What we learned
Having a Design System in place really helped us speed up this project. It made it relatively easy for us to cover a lot of ground within the app. Offering guidelines, dedicated feedback channels and tools for developers and designers helped to align every project member throughout the entire process.
Many thanks to the XING iOS platform team, Nicolas Zimmel, Matthias Zielinski and Asja Baidakova for their visual work and all others who supporting this article with their feedback.
