Week Calendar




role

Lead / Solo Product Designer


keywords

UI/UX
Dark Mode
A/B Testing


tools

Sketch
Firebase



Week Calendar is a calendar app which is currently available to download in the App Store worldwide.


In this project, I'm responsible for design the dark mode, new subscription module, redesign how events look on the calendar and some small UI/UX changes.



Dark Mode Challenge and Research


Before diving into the design, I did lots of research, includes the dark mode documentation from Apple, Material Design and Medium articles. The biggest insight is – pick your color carefully base on the darker background color and the color contrast.

Color is also our biggest challenge because each “event” is color coded.  

By using color contrast tool and also some documentation of best practice, we decided to update the brand color with a lower hue, higher saturation and darken color


↑ New brand color for dark mode

Some other insights I learned through the research are:

  • the closer the layer is to the user, the lighter the surface area

  • avoid the large block of bright color


Base on the insights, I go through other colors that we have in the app. And here is the transformation of dark mode!



↑ Dark mode compare to light mode



A/B Testing New Subscription Module


For the new subscription module, because we already have an established user group, we want to create a data-driven project, which evolved A/B testing on different locations on the app and different devices.



↑ Icons we decided to use in the test




↑ Iterations for the badge and 1st A/B test mockup




↑ 2nd A/B test iterations



↑ Iterations on different locations of the app for A/B testing


The result for A/B testing is a little surprising. Base on the result, here are the final deliverables that improve conversions, including an 8% increase of subscription offers shown to WeekCal's 1 million MAU.




We also ran an A/B test on the iPad to see if the result tells us any difference compare to iPhone users, and it was surprisingly different. The “iPad_Badge_V6” (Gold Bolt) outran the crown icon that we decided to used on the iPhone.

The Gold Bolt icon for triggering the subscription screen has an improvement of 22-101% compared to the control group (WeekCal logo with PRO badge). Compared to all 7 variants, the Gold Bolt was ~50% better than the others. From the insight, we think it's very likely attributed to the gold color since the others were blue or used the WeekCal logo.




↑ A/B Testing icons on iPad


Customization of the App


Another challenge we facing is how to add more customization to the calendar in order to make the app more unique.

By reviewing the app with the team and thinking about what we can offer, we decide to utilize the colors in the app to add customization for the landing process by letting the user choose the icon color.



↑ New landing screen that let user to choose icon color.


New Look for Events


In the process of doing all those design projects above, I also find some elements that would be nice to update.



↑ Redesign Events

Reflection


By working on this project, the most important 2 things I learned are:

  1. Color contrast test is really important for designing dark mode.

  2. From the A/B tests, I realized we can't assume the user will react the same on different devices just because it's the same app. 



And we can't assume, the user who is using iPhone, will also use the iPad. We are testing on different user groups.


 


Mark
©Xiaoxuan Liu 2020. All rights reserved.