Mobile App User Flow

New clock feature within a mobile app: mockups are focused on the settings screen where users can customize the clock.




‘Show Moon’ should be the last in sequence, as it is not frequently used by the majority of users. 

While ‘Set Time’ and ‘Show Moon’ are in the title case, ‘Time zones’ is in the sentence case. Need uniformity for UI consistency. As per Google guidelines, all should be in sentence case.


In subscreens, it is inconsistent UI to have switches in one and checkbox in one. Should opt for one format. 

The label of  the setting that opens a group should match the subscreen title. Should be either ‘Show moon’ or ‘Moon’.

The ‘help’ icon should be present in all the subscreens. Especially here, because the majority of users may need to know more about the moon phases.

‘Save changes’ is not concise.

‘Back’ button in all caps has an inconsistent UI. It is also not present in other subscreens.


‘Display analog’ and ‘Digital display’ are written in an inconsistent format. They also need to be in bold as they refer to the toggle switch.

Switches, further, for both analog and digital display are redundant. Turning one option off will turn the other option on. 

Similarly, just ‘24-hour’ or ‘12-hour’ is sufficient for AM/PM to be shown automatically. 

By putting labels ‘Enter time’, ‘AM/PM’, ‘24-hour or 12-hour’ in the fields, you present users with a challenge to their short term memory. The label disappears when users start typing, and there is no way for them to go back and remember what they were supposed to provide here.

Cancel & Save buttons are not in a uniform order in the subscreen.


A circle before the secondary time zone is inconsistent UI. 

Just showing the text fields for different time zones are not enough for the user, who would want to see the respective clocks.

‘Save’ button in all caps is inconsistent UI.

Cancel & Save buttons are not in a uniform order in the subscreen.