Clarity Dashboard - blending analog productivity methods with nature-inspired design

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I built Clarity Dashboard, a playful yet calming space for creatives, neurodivergent brains, and anyone who thrives with analog-style productivity. Think of it as your digital planning board, filled with "Post-it" sections dedicated to Peace, Productivity, Priorities, and Plants. My goal was a minimal design that boosts focus without overstimulation, offering a serene balance amidst the workday's hustle.

Design Philosophy & Inspiration

For Clarity Dashboard's core functionality, I pulled inspiration from Kanban principles. Looking ahead, I'd love to add more structured formats for users who prefer analog planning styles, like those found in Hobonichi Techo daily planners.

The "Holistic Webdev" prompt immediately made me think of nature's intricate beauty, especially plants. I've often wondered why so many of my tech friends are so into houseplants, and I realized it's probably because they offer the joy of seeing tangible results, the calm of consistent care, and a small way to engage with the natural world's beautiful chaos. I figured this connection would resonate with many in our tech community.

The dashboard's color palette comes directly from Caladium plants, also known as Angel Wings, which set the overall aesthetic. In future updates, I plan to let users easily switch between themes or even have them rotate weekly. These will also be plant-inspired, with ideas like Monstera, Alocasia Frydek, Easter Cactus, African Violet, and Aglaonema Aurora Siam on the list to start!

Clarity as an infant wireframe, they grow up so fast 🥹.

Demo and Code

Clarity all grownup.

Clarity Demo
Code

Journey

My journey with Clarity Dashboard kicked off just two days before the deadline. I've been focusing on progress over perfection, and this challenge felt like a fun opportunity to see what I could build in about 10-15 hours. I dove into researching intranet dashboards, checking out some of Axero's impressive examples, then picked the features I wanted and jumped straight into creating Figma wireframes. Once I settled on the colors and the Angel Wings plant as the theme, I just started experimenting.

Saturday was dedicated to research, brainstorming, thinking about animations, and wireframe design. Then, Sunday evening, it was time to bring my design to life. After getting my HTML structure set up, I decided to "eat my frogs first" and really tackle the CSS. It was definitely more ambitious than I'd usually attempt, but for the sake of learning and stretching my skills, I went for it! I had one super important rule for myself: no matter what, all coding would stop at midnight. I knew I'd need time to clean up my code, write this submission, and deploy – and I really didn't want to stay up until 3 AM or get so hyper-focused on perfection that I missed the deadline completely.

So, while I didn't finish all the JavaScript functionality for Clarity, I submitted it anyway. I'm genuinely proud of how much I grew in design and CSS, and it was genuinely fun watching both the project and myself bloom over those two days.

My plan is to keep working on Clarity Dashboard throughout the summer. I'm excited to bring all those brainstormed features to life and share my progress, small wins, and lessons learned along the way.