The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
THE CHALLENGE
Maintaining a study routine is difficult when progress is scattered across notes, timers, and apps that stop working at the exact moment a learner loses connection.
THE SOLUTION
Trilho is an offline-first study habit tracker concept built around daily focus, visible streaks, and a resilient routine that keeps moving even without an internet connection.
WHAT I BUILT
• Daily focus timer and study-session flow
• Habit tracking with streaks and calendar history
• Weekly progress charts and goal visibility
• Offline-first states with automatic sync messaging
• Responsive desktop and mobile product experience
• Accessible task controls and motivational feedback
DESIGN APPROACH
The interface pairs warm coral with lavender, cream, and deep navy to make productivity feel optimistic rather than demanding. Clear visual hierarchy keeps the daily action and progress signals easy to scan.
THE OUTCOME
A complete product demonstration that brings together mobile-first UX, habit-forming interaction design, frontend engineering, and an offline-aware experience.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic 🚀
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
Users starting compliance onboarding had no idea what documents they'd need until they hit upload screens and got stuck.
This created drop-off before users even started the actual onboarding process.
We designed welcome screens that set clear expectations upfront about what documents users will need before they begin. The screens show a complete list of required documents with brief explanations of what each one is, giving users time to gather everything before starting.
The design challenge was presenting this information without overwhelming users or making the onboarding feel complicated before they even begin. We used progressive disclosure and visual hierarchy to make the list feel manageable.
Tags: ui, ux, ui design, ux design, ui ux design, interface, interface design, product design, design inspiration, modern ui, web app design, saas design, dashboard ui, app design, startup design, fintech, finance, onboarding, interaction design, minimal ui
Making of Phantom Pops - Part 3 - Interacive Characters!
Interactive Characters! This video looks into how and why I created interactive characters as part of Phantom Pops' brand identity.
Love the characters!
I went back in tv history to one of the most Iconic broadcast experiences
The RCA Indian Head Test Pattern to bring it to the future with Interactive Design using rive ,for the #rivebroadcastchallenge
The Indian Head rigged and animated using rives mesh feature for micro animation of waving feathers
The test markers vectorized and animated with trims dashes and reveals using clips.
Converted a base vector trace to organized vectors then animated for use as an intro reel, tv hold, stream starting soon or end card, stinger, everyone's favorite gag: technical difficulties , among so many other use cases.
It was easier and faster in rive to animate this version than what it took to organize the vectors (sharpen an axe and all that IYKYK.)
Re-creation, cleanup and organization was the heavy part to create a foundation for all future iterations using almost 100 groups organizing 400 paths ( mainly to have versions that are fills and versions that are custom strokes)
Filled shapes had to be cleaned up into only strokes
With a difficulty being getting the centerline of a shape in vector software like Inkscape isn't a thing apparently, so it's manual work before the fun begins.
After that it becomes simple to take advantage of rives effect groups letting you apply specific trim effects to groups of different shapes.
Then stack most in state machine layers with a BlendState instead of one single massive timeline to manage all the greebles in a FUI like design.
sporadic timelapse of revectorization and organizing process: