Problem Statement 1
Image Caching for Flock
Implementing the above feature using the Design Thinking methodology would have looked something like the following.
Step 1: Empathize
Develop a deep understanding of the challenge/problem
I've been working with Flock for over 3 years and I've always felt that we could go a long way if we could improve perceived performance. As a daily user of Flock, I felt it was annoying when I'd see an empty space for a while whenever I switched chats. As an Engineer I knew that some images are bigger in size and needed more time to load, but I also knew that it didn't have to take so long every single time.
Being a communication application used in the Workspace, sometimes the HR folks would send us catchy GIFs that had a lot of animations. What that meant was, the image would be over 45MB in size and would take forever to load, every single time that image came up in the open conversation. Working remotely, I found that my internet wasn't always high speed and this is how I was able to empathize with the problem statement.
Step 2: Define
Clearly articulate the problem you want to solve
The image should load instantaneously and the user will not see a blank placeholder whenever there's an image in a chat.
Step 3: Ideate
Brainstorm potential solutions and select and develop your solution
There were a couple of ways we could go about caching images for a chat, e.g. increase the browser cache time at the CDN. However, this wouldn't have worked for us since the image URL changes every 15 minutes, i.e. the URLs were signed. So, caching via the CDN and browser were out.
The winning solution: Each image had an ID associated with it and we decided to cache the ID of the image with the URL and the URL with the image object in Cache.
Step 4: Prototype
Design a prototype to test your solution
A simple implementation of the strategy pointed out some caveats and we should be able to refine it further.
Step 5: Test
Engage in a continuous short-cycle innovation process to continually improve your design.
We could handle the caveats in this phase. The images were being served via a CDN, so their origin was different than that of our application. This caveat needed to be handled since we have an image annotation feature for which we render the image on a canvas. Therefore, we need to cache images with a CORS header.
Problem Statement 2
Performance optimizations for Flock
A Design Thinking method would have involved the following thought process.
Step 1: Empathize
Develop a deep understanding of the challenge/problem
As a user, there were a few issues related to performance with Flock. The amount of time taken for chat switching was high and it seemed like the memory consumption was high as well.
Step 2: Define
Clearly articulate the problem you want to solve
Decrease the amount of memory consumption of Flock and make user interactions feel snappy.
Step 3: Ideate
Brainstorm potential solutions and select and develop your solution
There were multiple problems with respect to performance which needed more than one approach. We could have come up with the following approaches to test:
- Measure the performance and render times of the slower interactions to form a baseline using Chrome DevTools.
- Decrease the number of re-renders in the application caused due to objects with similar values but different references.
- Identify other gaps in the data layer that could be causing the slowness.
Step 4: Prototype
Design a prototype to test your solution
Tools like Why Did You Render could help in identifying the potential pitfalls caused by re-rendering components. After that, it would be simple enough to prevent the re-renders by memoizing, selective-passing down of props and creating global objects for objects that do not change.
Using a selector library with Redux and creating memoized selectors could also help in decreasing the number of re-renders caused due to objects with similar values.
Step 5: Test
Engage in a continuous short-cycle innovation process to continually improve your design.
Measure the performance again and check the perceived gain. If this succeeds, find more interactions to fix and repeat the process.