HibahMian

Hibah Mian, A friend who is a University of Toronto professor and a art curator, approached me to design a digital home for her curatorial practice. The original site I created leaned into an elegant, exhibition like aesthetic, emphasizing simplicity and restraint, almost like walking through a gallery space. But after living with that version, she envisioned something entirely different: a more modern, dynamic, and animated site that could better reflect her evolving vision. What followed was a complete 180 in design direction, where collaboration and iteration became central to shaping the final product.

The initial site communicated professionalism and elegance, but it didn’t fully align with the new vision Hibah had for her brand. She wanted her portfolio to feel alive and interactive rather than static, with animations, dynamic content, and a stronger sense of personal aesthetic woven through every interaction. On top of this, the site also needed a CMS backend that was easy enough for her to manage herself, allowing her to upload projects without friction while keeping the design polished and cohesive.

The main objective was to reimagine the site into a modern, animated portfolio that balanced interactivity with usability. The design needed to capture her identity as both an academic and an art curator, while also serving as a functional tool for showcasing her projects. At the same time, the backend had to be simplified, giving her autonomy to keep the site updated without technical support.

I worked as the sole UI/UX designer and developer on this project. My responsibilities included creating the new brand direction, designing the logo, defining the visual system, prototyping animations and interactions, building a custom CMS in Webflow, and implementing custom code to achieve effects that went beyond standard design tools. Close collaboration with Hibah was key, we iterated together frequently, with her feedback guiding each refinement.

This project was less about traditional user interviews and more about stakeholder collaboration and iterative design feedback. I focused on understanding Hibah’s aesthetic inspirations, how she envisioned her portfolio being experienced, and what type of interactions would best embody her identity. By analyzing comparable portfolio sites and mapping out her desired workflows, I identified an opportunity: create a dynamic portfolio experience where the design itself could serve as an extension of her curatorial approach.

The redesign centered on interaction and motion. I built a design language that used minimalism as a base but layered on custom-coded animations to create moments of surprise and delight. Images only revealed their color on hover, reinforcing the idea of “discovering” the work rather than being presented it outright. An infinite CMS loop on the homepage continuously cycled through projects, symbolizing her ongoing creative process. Each interaction, from scrolling to page transitions, was carefully considered to feel both modern and artistic, avoiding gimmicks while maintaining polish.

On the backend, I developed a streamlined CMS structure that gave Hibah full control over project uploads. Each new entry auto-populated across the portfolio grid, ensuring consistency while eliminating manual adjustments. This gave her freedom to focus on her work, knowing the site would present it beautifully every time.

• Custom Hover Interactions: All project images transitioned from monochrome to full color only when hovered, turning browsing into an interactive reveal.
• Infinite CMS Loop: A custom coded animation on the homepage created a seamless, continuous carousel of projects that highlighted her portfolio.
• Simplified CMS Backend: Projects could be uploaded with minimal fields, automatically populating the portfolio pages with the correct formatting and layout.
• Modern Animations: Carefully crafted transitions and interactions elevated the experience, adding a sense of rhythm and motion throughout the site.
• Custom Design System: A unique design language paired with a newly designed logo tied the entire brand identity together.
• Animated Intro Loading Screen: A custom preloader animation created anticipation and gave the site a distinct branded entry point.
• Dynamic About Page Background: Looping image animations played in the background of the About page, adding a sense of depth and energy without distracting from the content.
• Multi-Font Typography System: Multiple typefaces were combined tastefully, balancing professionalism with creativity while maintaining legibility across devices.
• Additional Micro-Interactions: From subtle hover states to section transitions, every interaction was designed to feel intentional, ensuring the portfolio reflected both elegance and personality.

The iterative process of co-designing directly with Hibah served as a form of ongoing usability testing. Each round of feedback highlighted adjustments, whether in pacing of animations, clarity of navigation, or how projects populated in the CMS. The final site was not only visually dynamic but also practical: Hibah could now independently update her portfolio with ease, and she expressed how much more alive and aligned the new direction felt compared to the original.