Background:
Timepath already possed a product and functionalities that allow the users to customize their timelines and have interactive content in them. The problem was that their "Customize" tool was too simple and generic.
These three images (bellow) are the previous interface before we redesigned the "Customize" panel.
These three images (bellow) are the previous interface before we redesigned the "Customize" panel.
Some sketches of the process considering requirements such as the hierarchy of the information, grid, padding, components and user-friendliness in general.
TOOL SIDEBAR - New design
(Image bellow) When clicking on the "tool" icon (at the top-left corner) the sidebar panel opens and displays all the settings grouped in drop-down menus.
(Image bellow) The sidebar contains many layers of submenus that allow the users to fine-tune their timelines.
Guidelines for development:
(Image bellow) Sketches of different alternatives for the Cover image settings icon.
We selected a group of icons that could be familiar to the users and could fit well into Timepath design system family, but we needed to create new icons to show particular functions that Timepath has.
(Image bellow) New icons to represent "Timeline" settings and "Cover image" settings in the Customize tool.
(Image bellow) New icons to represent "Timeline" settings and "Cover image" settings in the Customize tool.
