Webflow Site – Teller Agency
Devin Fountain
Design
Overview
Greg Barbosa came to me in early December 2021 and wanted to redesign his agency's website to attract clients with larger budgets. I designed the website in January 2022 with the idea that I wanted the site to feel like a retro airport based in Florida. The website was developed in March 2022.
Goals
When we first talked, Greg's goals were to attract clients with higher budgets and to properly showcase the work the agency has accomplished. He also wanted a blog CMS set up so that he could improve his SEO through blog posts. The Teller agency website needed to match the quality and customer service that he provides his clients on a daily basis.
Page Content Structure
After the signed proposal, I set up the page content structure for the website to show the pages and sub pages for the website. Doing this in Notion allowed Greg to comment on the structure as soon as it was ready and rearrange the pages as he saw fit instead of multiple feedback rounds.
Visual Direction
Moodboard
The visual direction started with a moodboard based on what he told me in our discovery call. Some of the agency websites he sent over had a funky, 70s, big-typography, magazine layout look to them. I presented three directions to take the design:
- Nest Egg: Mature, grid-based, color constrained
- Holy Grail: Bold, casual, reminiscent of Sneaker-culture
- Breakfast Cereal: Playful, illustrative, casual
He chose Breakfast Cereal with some of the bold elements of Holy Grail and the grid based look from Nest Egg.
Color Palette
Based on the moodboard, I explored color profiles that matched the mood he was looking for. Using the 60/30/10 rule, I presented a grid of palettes with a miniature interface to understand how the colors interacted with one another.
Typography
At the same time the moodboard was sent off for feedback, I sent over a typographical exploration with a mix of paid and free typefaces depending on the budget he wanted to spend on the visuals. He ultimately chose Archivo Black with a mix of Archivo Narrow for larger headings.
Higher Fidelity
Based on the moodboards and strong foundational typographic/color choices, we both agreed to skip right past the wireframe stage and go right to medium/high fidelity mockups. I knew that we both wanted the designs to be heavily constrained within a grid and because the colors and general style were already decided upon, I could rapidly change the designs at a high fidelity without committing too much to one particular layout.
The end result is a website that screams '1970s airport vibes'. The typography is proud and bold, constrained within 50/50 grids, and draws the eye in a downwards manner. Every section is color blocked to give you a sense of progress, and is often used to tell the user exactly what section they're looking at. I added an overlay of grain across the site to give the design a grounded physical feel.
Development
The website was developed in Webflow over a week and a half using F'inSweet's Client First system. This was chosen as a structure for the client to be able to edit things in a minor way without breaking the entire design. It also allowed me to develop all responsive sizes with animations and a CMS for the blogging system in a rapid amount of time.
The site features custom animations for every page with staggered entrances for specific elements depending on their layout. For the logo and hero animations, I used After Effects to animate and Lottie to place them in the page.
Conclusion
Testimonial
Working with Greg is and always will be a true pleasure. When asked what he enjoyed about working with me, here's what he had to say:
The best part about working with Devin was the clear communication throughout the entire design process. Not only did I feel listened to, I never felt unclear as to where we were along the process. Feedback I shared was respected and implemented in a way that always surpassed expectations.
2022
