Redesigning Dark Theme for Testbook-Case Study
What does Testbook do?
Testbook is an Indian ed-tech company that caters to all the study preparation needs of a student by providing them with test series, preparation strategies, courses, day-wise study plans etc. It is by far the trusted name in Government exam preparation and is known for its quality guidance and pedagogy
This is how this project started
“Let’s fix our dark theme in this sprint”. We’ve had many such occurrences where we downloaded testing apk given by our developers team for any new feature that we built recently. But as soon as we use to switch on the dark mode in our app…it looked really bad.
We’re always on tight schedule before taking any new feature live and fixing dark theme would add up delays to current projects deadlines, so we ignored for quite a while.
But then finally we decided to think on how can we improve our dark theme without too much tech effort and we could fix it.
I started with process of analysing the issues in our current dark theme. What all components we are compromising in dark, what icons, buttons are having issues.
Approach
- Finding problems in existing dark theme
- Coming up with a dark theme palette
- Redesigning current screens with new colour scheme
- Deliver theme guidelines to dev
Finding problems in existing dark theme
There were many inconsistencies in colours on every page. Every component had very less contrast and readability. Also I understood the process of how currently android developers are inverting colours on their own as there was not clear colours guidelines given to them to which they could refer to.
Below is an existing example screen of test series page & similar problems were there across the app
I identified all those inconsistencies in the current UI across the app and made a list of items that needed correction in Dark theme
- Navigation bottom & top
- Product Cards
- Background
- Progress bar
- Card overlays
- Divider lines
- Search bars
- Gradients on header and cards
Coming up with colour scheme
After identifying all the areas that needed correction, I experimented with various palettes that could fit our need. I was sure to use minimal colours to use so that it brings simplicity and consistency across the app. Also we use gradients on our various pages and product cards such a test series. And currently those solid saturated colours were looking awful on dark mode. for that I decided to use the linear gradient as second fill on top of the base card colour and kept opacity fro 40–0%.
Redesigning existing screens with new colour
After finalising the colour, I jumped on to designing few of the app screens so that the developer team could understand better. Giving just the colour codes could not have solved the problem, they needed some references to get better clarity.
New colour solved the readability & contrast issues across the app. The gradients were not very subtle and added as a secondary fill with variable opacity. Although we didn’t touched buttons & text colours as it’d have taken long to update the entire DSM again.
Conclusion
We launched the new theme with all those mentioned fixes and got a very positive user feedback. It was quite necessary for us to take quick path to solve the current Dark mode issues and we managed to pick out the major problems and tried to solve that first with less tech efforts.
