UIKit content reorg
1/2022 - 4/2022
Background:
Chat UIKit is a product at Sendbird that’s made up of prebuilt UI components that customers can use to implement chat services to their app. The project I was assigned to was called version 3 modularization. Starting from v3.0, the product was going to allow for more detailed customization by breaking down UI views into smaller UI components.
All three platform applications, iOS, Android, and React, were upgrading to the new version and our technical writing team decided to also add two depths to the folder structure in the left ToC.
My tasks:
I was the sole technical writer on this project and there were two main assignments: reorganizing the entire structure of the existing docs for UIKit and adding new v3.0 content to the existing docs.
Since I had to apply new changes to iOS, Android, and React, I had to quickly understand the basics of how each system works to create customizable views that execute chat functions. I met with engineers of each platform application (mobile and web) once a week to go over the specifications and changes that needed to be documented. I learned a lot about the differences between each operating system and how modules and fragments work to display UI views.
With the help of the designer and the front-end engineer of the docs site, we decided on how the layout of the Chat UIKit main page and the left ToC menu on every page should look like under all platform applications. Then, I started documenting the content of the guides, which were reviewed by the engineers on a weekly basis.
Existing content reorg
Before adding new v3.0 content to the docs, I had to reorganize the existing content shown on the left ToC. With the help of the front-end engineer, we decided to add two depths to the folder structure of the menu. As shown in the images on the right, I grouped and restructured the existing pages in version 2 into multiple categories in the new version.
I grouped the existing Send your first message and Authentication pages together under Introduction and moved all the features under Guides > Open channel and Guides > Group channel to one Features folder. I also separated the Common resources page into Common resources and Style resources with the addition of new content in each folder.
v2
v3
v2
v3
See the Chat UIKit overview page for iOS here.
See the Chat UIKit overview page for Android here.
New overview page for each platform application
In the previous version, there wasn’t a main page for each platform application that summarized the product so starting from v3.0, I added a new Overview page. The purpose of this page is to show what the new version of UIKit entails, most popular pages, recommended features, and additional resources.
See the Chat UIKit overview page for React here.
Modularization
The biggest change in content from v2 to v3 was the modularization of UI components. The purpose of modularization was to allow users to customize their UI views on a more granular level. I added two new sections to the existing ToC, which are Key functions and Modules. I explained the basic architecture of Sendbird’s UIKit and how key functions work in conjunction with modules to execute essential chat functions such as list channels and create channels. With the addition of modularization, customers can now pick and choose to customize specific components of a UI screen instead of changing the whole fragment or view controller.
The specifications of each key function and customization methods are different for each platform application so I had to write three different docs guide. While the overall content menu of the two mobile platforms were similar to each other, I designed a different left ToC for React. Instead of organizing UI screens by key functions, the React engineers and I decided to organize them under modules where I explain how to implement each module and use corresponding context objects and providers to build that UI view. See the docs for iOS, Android, and React.
iOS: I wrote all the content except for code samples under the following folders: Group Channel Views, Open Channel Views, Modules, Features, Theme and Style Resources, and Essentials.
Android: I wrote all the content except for code samples under the following folders: Group Channel Screens, Open Channel Screens, Global Customization, Features, and Essentials.
React: I wrote all the content except for code samples under the following folders: Essentials, Modules, Customization, Theme and Style Resources, and Features.