A playful, dynamic website that showcases an agency’s diverse work.
UI / UX
web design
animation
webflow development
Overview
We wanted to build a more engaging and thorough site.
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.
year
2024
timeline
~3 Months (Nonconsecutive)
company
Contribution
I was a project leader, especially for web development and motion design.
As one of two designers, I was heavily involved in every stage of the project, including wireframing and establishing a design system. My key contributions were building the site in Webflow, designing and building the site’s animations and interactions, animating most motion assets for case studies, and creating custom code with ChatGPT.
results
The website has been well-received internally and externally.
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.
The new site embraces motion design throughout, and lets visuals speak for themselves.
Click here to visit the live site / Opens new tab
motion design
Animated interactions and easter eggs engage users and show personality.
Hover and scrolling interactions, page load animations, and playful easter eggs engage the user, reward exploration, and add color to Darling’s personality throughout the site.
visual focus
Case studies let imagery lead, without sacrificing context.
Each study consists of a full-width grid of imagery, structured to tell a story. Attention-grabbing teaser images lead, followed by a breakdown of the project’s “building blocks”, like colors and typography. Additional examples after that show depth. A short section of text at the top provides useful context.
responsive design
Just as good on the small screen.
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.
research and discovery
We explored numerous agency sites to identify successful features and industry trends.
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.
design challenge
How can we encourage users to engage with a section that is dense and important?
We first asked how we could reduce clutter and avoid displaying every section of copy simultaneously. In pursuit of this question, I considered horizontal scrolls, tabs, and accordions. However, these options all carried too high of a risk of users scrolling past the section entirely.
After refining the question, we arrived at our final solution. A scroll-triggered animation reveals copy as the user scrolls, minimizing visual clutter but still funneling the user through each section of copy before they can move on.
Variations on tabs and an accordion from my wireframes
final solution
design challenge
How can we help users quickly find relevant case studies, while leading with imagery and motion?
During the discovery phase, I often found myself wanting more project information before clicking on a case study. I asked how we could deliver this while prioritizing visuals, and without sacrificing readability.
We also knew we wanted to incorporate motion into our work tiles, but struggled to find a satisfactory and consistent method.
Our final solution was tiles that cycle continuously through 5 key static images on hover. They give the user a better idea of what the project is, add motion, and can be used consistently for any project.
Although we met most of our criteria, the tiles need refinement—the animation can get triggered unintentionally which can be overwhelming. Potential next steps include creating more space for the mouse to rest by tweaking tile size and spacing, and re-investigating the use of video.
work tile display ideation from my wireframes
final solution
reflection
Continuous refinement and adaptability were our keys to success.
Throughout this project, I was able to get us closer to our vision by adapting and learning. For example, when we 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.
next steps
Areas for improvement include earlier implementation of best practices and better accessibility features.
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.
