Livtra Item States

Some product work I did for Livtra, an app for tracking your life and goals.

This is the final structure and activity for Items that I designed and developed for Livtra. Each was designed and coded to be movable, editable, informative, responsive, and able to increment part of the constraints set.

Each of these Items has internal nesting for other information and rich content, meaning they have to look and feel like they're own individual piece of the puzzle while fitting into different grouping and movement methods.

The dark tooltips represent additional information and actions that can be taken on each item on hover. The white with purple shows action items on click based on the state of the item. The differentiation here is crucial to add a layer of recognition throughout the app when these patterns are reused on other elements like Spaces and even Settings.

Small details like bringing more attention to item options with brightness or having an ellipses to show leading to another action or even animation delays and transforms to these states really makes Livtra look and feel great.

I love sharing these seemingly small elements of projects that have hours upon hours of thought and planning put into them to be a core element of a larger system and language in the app.

I'll be sharing more little by little over the next few weeks!