Briana Scurry is a legend. This is not hyperbole.
She’s a two-time Olympic gold medalist, a World Cup champion, and is a member of the National Soccer Hall of Fame. She’s a pioneer in the sport, an advocate for athletes recovering from concussions, and an inspiring speaker for organizations all over the world.
When Briana needed a new website, she and her team turned to designer Japheth Crawford — and Webflow — to power the next phase of her multifaceted online presence.
We caught up with Briana and Japheth to ask about their experience collaborating together on the creation of her new digital home.
Briana, did you have a site before this? If so: what technology was it powered by? What compelled the switch?
Briana: I had a WordPress site before I switched. And I made the switch because Webflow is so much more user-friendly — it makes it much easier for my fans to stay up to date and connect with me.
What were your goals in creating this new site?
Briana: My main goal was to have a site that could be continuously updated to reflect new projects I’m working on, allow companies to easily book me for speaking engagements, and make it simpler for fans to connect with me.
How did you collaborate with Japheth on the design?
Briana: Japheth managed this process wonderfully. We aligned on a strategic vision for the website and established priorities for what I wanted my website to accomplish. We had weekly meetings and key deliverables due each week. He met every deliverable on time and was extremely easy to work with.
Japheth, what was on your mind as you designed and built a site for an Olympian like Briana?
Japheth: Most of the sites I build are for agencies and studios, so when Live Wire Strategic Communications reached out to me about Briana’s site, I was super excited to work on something different. Not only did I get to create something for a new audience, but it was really cool to learn about the important work that Briana is doing for the athletic community.
What were some of the inspirations for your design choices?
Japheth: I took inspiration from athletic sites and campaigns as well as clean, corporate sites. Briana’s goal for the site was to make it more exciting and much faster on the user experience side. We wanted the site to not only celebrate her athletic career, but also inform her audience about what she’s up to these days, which includes public speaking and her advocacy efforts. It needed to be fun and exciting, but also structured and clean so it could function well as a place to easily request an autograph, an interview, or schedule a talk.
The fullscreen video on the homepage gives the viewer either a reminder of her career or introduces them to her success. The subtle animations throughout the site help pull the viewer down the page and bring life to the site.
We decided on the color palette early on during an initial exploration, and we landed on a subtle electric blue gradient that Briana really liked. I kept the color palette and the rounded corners on elements pretty tight throughout to help unify different layouts across the site.
How long have you been using Webflow? Any favorite features? What has your experience been like?
Japheth: Toward the beginning of the pandemic, I spent extra time at home revisiting my motion design portfolio site. That’s when I came across Webflow. Previously, I hand-coded sites using tools like Siteleaf and WordPress with my clients, but when I saw a demo of Webflow’s client-facing Editor, I was sold. I took a couple of courses, watched mountains of Flux videos from Ran Segall, and did a lot of playing for a month or so before using it for client work. I’ve been using it for over six months now and I don’t see myself going back.
Besides the Editor, which my clients really enjoy, I loved making interactions. As a motion designer, being able to create unique interactions complete with custom easing in such an intuitive way is really awesome. I’m also looking forward to experimenting with integrating more Lottie animations into interactions.
I found Webflow to be very intuitive. I think that was due to the great training material in Webflow University as well as the generous community of Webflow Experts that put together additional learning content, custom code add-ons (like Finsweet), and cloneable projects that I could dig through and learn from.
What were the concerns you had as you were evaluating Webflow if any?
Japheth: The only concern I ever had was with hover interactions not being able to reproduce a similar effect on touch devices. I’ve since come up with workarounds, like using the hover states in the CSS and triggering some of those hover interactions while scrolling into view.
How have your fans received the new site? Any comments or behaviors that stand out?
Briana: Speaking offers and autograph requests have increased. Web traffic is up and social channels are trending higher.
Are there any things your fans can look forward to coming soon on this site or another digital platform?
Briana: I have a new book coming out Spring 2022 that will be available on my website — so keep your eye out for it!
Any advice to other visual developers or designers that might be building sites for icons like Briana?
Japheth: This is more general advice, but it’s really crucial to go over things like goals for the site, intended audience, and visual inspiration before starting on any design. It really helps inform what the site needs to accomplish rather than just what you as a designer want to build, or what you think the client wants. It lets your client know that you’re invested in the success of both them and their website, rather than working on your own portfolio.
Also, it’s key to regularly meet with your client at milestones along the way, from kickoff, to design, to development. I met with Briana and her team weekly to do milestone presentations and to give status updates throughout the process. I feel that really helps to keep things on schedule and keep everyone on the same page.