A playful, dynamic website that showcases an agency’s diverse work.
Role
Lead Designer + Developer
Skills
Web Design, Interaction Design, Prototyping, Webflow Development, Animation, AI Prompting
Overview
Challenge
Jump to: goals & metrics
Darling’s site lacked interaction design and didn’t fully reflect its capabilities or personality. We wanted to create a site that would show off the true depth and breadth of Darling’s work, and give clients a fuller picture of what the agency could do for them.
results
jump to: key features
Darling has gotten several leads in the two months since launch. At least two of the potential clients have cited the website as the reason for their interest. The site received overwhelmingly positive internal feedback as well.
key learnings
jump to: reflection & learning
I honed my understanding of how motion adds to or detracts from the user experience and fleshed out my end-to-end understanding of design systems. On the technical side, this project increased my Webflow expertise and knowledge of web best practices (like a living style guide).
Goals & Metrics
Goals
Communicate Darling's value to potential clients
Make the site dynamic, responsive, and engaging
Showcase work in a fresh way
Key Metrics
New client leads (CTA clicks, calls scheduled, proposals submitted)
Professional reception
Internal reception and morale
Research
In order to analyze industry trends and identify layouts and user experiences we thought were successful, we explored a wide variety of other agencies' websites.
Fun animations show personality, but feel overwhelming and unfocused.
Large images are a beautiful and thorough showcase of project imagery, but critical info was buried.
Engaging animated tiles, but inconsistent use of static images and videos.
Key Features
nav, menu, and team page interactions
Motion Design Integration
what it is
Playful animations and interactions throughout the site.
why it matters
We wanted to show Darling's personality and engage users. Also, we saw motion design in most of the sites we explored during the research phase, and we wanted to be on the same level as our competitors.
how we approached it
Scroll-triggered page color changes, titles popping up on page load, and hover effects like a tilting logo and menu in the nav bar. Easter eggs, like silly team photos and a footer animation, reward users for exploring deeper.
project page scroll
Visual Storytelling
what it is
A shift from copy-heavy to a "show-don't-tell" storytelling approach.
why it matters
Most of our design projects are visual-focused, so we wanted to demonstrate our ability to create effective visuals. We thought the best way to do that would be to tell the story through images and videos, rather than text.
how we approached it
A full-width grid of imagery, structured to tell a story: attention-grabbing teaser images, breaking down the “building blocks” of the design, like colors and typography, followed by additional examples to show depth. A short section of text at the top provides useful context.
alternate concepts
Some initial ideas included funky grids with horizontal scrolling, and reorganizing the header layout to include more text. Ultimately, we decided the simpler we could make work pages, the better, as we wanted to put as much focus on imagery as possible.
preview tile interaction
Project Preview Tile
what it is
Hover-triggered tiles that cycle through key images.
why it matters
Potential clients probably don’t want to click through every piece of work. Providing a preview of each project helps the user decide where to focus their attention and spend their time more efficiently. Moving preview tiles are also more engaging than static images.
how we approached it
5 key static images per project that cycle continuously on hover. We initially experimented with video, but couldn’t find a way to make it compatible with our CMS.
is it successful?
The tiles need refinement—the animation can get triggered unintentionally which can be overwhelming. I would revisit the tile size and spacing, to create more space for the mouse to rest. Another solution might be using custom code to incorporate video clips instead.
alternate concepts
Our initial designs included a variety of ways to display work tiles on the Home and Work pages. We rejected ideas that didn't strike the right balance between bold imagery and clearly displaying key project information, such as client and project name. We also decided against any sections that would be too tedious to scroll through, such as the horizontal layout or the full-page tiles.
scroll interaction
Continuous Scroll Format
what it is
Funneling users through a particular section as they progress down the page.
why it matters
Key content might be skipped if hidden behind tabs or accordions. A static layout showing all the content at once would be cluttered. Walking the user through one section at a time as they scroll seemed like the best way to encourage them to read it all.
how we approached it
Designing the page so users must scroll through each part of the “Services” section before moving on. A changing visual aims to support the copy and prevent scroll burnout.
alternate concepts
Our initial primary goal was to avoid displaying every item in the Services section at once, so we started by playing with ways to keep content hidden, such as horizontal scrolls, tabs, and accordions. Once we decided the content was too important to potentially get skipped, we changed course.
adapted headings and services scroll for mobile
Mobile Optimization
what it is
Adapting text hierarchy and interactions for small screens.
why it matters
In line with modern best practices, we wanted a mobile browsing experience as user-friendly as on desktop, without sacrificing the feel of our design.
how we approached it
A reworked text hierarchy maintains the boldness of the headers without breaking the content unnaturally. We replaced scroll-triggered animations containing important copy with less complex, more reliable layouts that still had some motion.
Reflection & Learning
what went well?
I am proud of my resourceful problem-solving skills on this project. For example, when I needed custom code, I learned how to prompt ChatGPT. Testing and troubleshooting GPT's code also helped me learn about HTML and JavaScript myself.
As a team, we were relentless in our pursuit of excellence. If we weren’t satisfied with something, we’d revisit it until we figured out how to meet our standards. This commitment to refining our work was crucial to delivering creative, polished results.
what would I do differently?
Next time I work on a project like this, I will prioritize setting up a design system as soon as possible. I created a living style guide towards the end of the build with future updates in mind, but doing it earlier would have streamlined our process.
For version 1.1, I would start by revisiting the aforementioned hover animation on the work tiles. I would also investigate how we can better meet accessibility standards--for example, adding controls to autoplay videos.
Behind The Scenes
hover to preview
tap to see more
To create the hero video on the homepage that follows the user's mouse, I prompted ChatGPT to write custom code!
We didn't want to default the obvious choice of work tiles without some exploration. We thought vertical and horizontal scrolling cards might celebrate the work visuals, but found them too cumbersome. We didn’t want to force users to scroll through a large amount of content, and horizontal scrolling in particular can often be confusing.
