Case study: Re-designing the Drukpa Calendar
Re-designing an app, I choose the following screen for redesign this app.
brief for this project was to re-design a mobile app, I focusing on 3 screens in 3 days working alone. This project focuses on UI and understands the Heuristics design principles, detail are below.
I choose “Drukpa Calendar” app, Drukpa calendar is based on a set of lunisolar calendar, traditional calendar widely used in Tibet. According to tradition, a unique calendar which is used to calculate day, month, and year according to the waxing and waning of the moon, was created by Tibetan people more than 3,000 years ago.
App provides you notification of important days, months of Buddhist calendar.
The task was to choose a flow from Drukpa calendar, create a moodboard and re-design the flow by using the moodboard. Designing a new logo and the icons was optional, but changing the brand color was an obligation. Making changes to UX was not accepted.
It was to keep Drukpa calendar as traditional. Keeping the app with minimize the content and simplified it.
Heuristics: Design Principles
First process is, I tried to find out what are the problems with current Drukpa app.
What are the user pain points while using this app?
I did Heuristics evaluation, marked all the issue based on experience for problems-solving. Tried to possible outcomes quickly and arrive at a solution that may solve my problem. Following figure is current Drukpa calendar
Problems in current Drukpa calendar app
· Inconsistency on navigator bar, missing navigator and icons are to big, header and back arrow is not clear.
· Text in the body are too many, used several font style, mixed two language, different font color for same level of style.
· In monthly calendar current day is not enough color contrast.
· Inconsistency in text alignment, not having enough line spacing.
To find out the solution for all above problems, I looked into other apps like google calendar, bon calendar and Sakya calendar
I came up with below ides that can be done to solve current user issues
· Create a navigation bar in a component and variant, used every screens also reduce the icons size, header arrow change to simple with active variant, also added home icons.
· Reduce font style one primary and one secondary, created a toggle button to change the language, put different background for same level of paragraph, so easy to categories.
· More contrast on current day in monthly calendar
· Place all the paragraph to left alignment for consistence
I checked three similar competitor, screenshot those and analysis based on design principles and color guideline.
To search for the visuals that will help me in the design process, I started with a brainstorming based on my goal that is keeping the app look traditional. I let my mind come up with as many words and color as possible when I think about Traditional. five elements in Buddhist thought of earth, water, fire, wind and void. The concept is related to Buddhist Mahābhūta the image below is the Moodboard.
Based on the Moodboard, I created the style guides, which includes:
I went for a five color representing the energy of the five elements and connection between traditional and people.
I used “Estedad-VF” font which I wanted to be modern, welcoming and legible.
I used the following icons.
I used my icons as components for navigate the different screens, following components created for more consistencies for UI.
The new screens that I re-designed are as follows, Second and third screen are one screen with scroll vertical.
- Test the prototype
- Complete the remaining screens of the app
- Wan to continue on Tibetan language
Thank you very much for reading this article, I would really appreciate your feedback about this first redesign project!