Motion design

Problem

As codepush updates became more frequent, the occurrences of users meeting with an app that automatically restarted increased. This caused many users to think that the app is glitching, leading to a drop in confidence in the stability of the app.

Solution

Instead of auto-restarting the app to run the update, we decided to visualise the progress of the update while the codepush updates run in the background.

The team

I worked closely with 1 full-stack developer to lead the design, lay out the edge cases and changed the way codepush updates were done internally, and also experienced externally by the users of our app.

Timeline: roughly 3 weeks

Design process

Map out user flows for showing the progress update screen

Users might be in the middle of a critical screen of a user flow when the codepush is being done, and at that moment, we don’t want to interrupt the user’s flow. We decided on segmenting the flows based on the urgency of the codepush: a default codepush allows users to update the app manually, but a mandatory codepush when an update is deemed critical such as a bug fix leads users to the update automatically

Also worked closely with developers to discuss when to do a codepush

Highlight what we need to communicate to users as the codepush is happening

Concept art exploration

Final illustration and animation