Afternoon Umbrella Friends Website
Intro
Over the years, I’ve had the opportunity to work on several small projects that underscored the unique dynamics of collaborating with small, focused teams compared to large teams in massive organizations. Smaller teams offer a refreshing sense of agility and camaraderie, fostering an environment where creativity and collaboration naturally flourish. With fewer bureaucratic hurdles and less red tape, decisions are made swiftly, and ideas come to life with remarkable efficiency. This streamlined approach not only accelerates progress but also creates a space where innovation feels natural and tangible.
Earlier this year, I had the privilege of helping a dear friend rebrand and redesign his company’s website and brand identity. His company, Afternoon Umbrella Friends (AUF), is one of San Diego's leading music and event collectives, dedicated to turning ordinary moments into extraordinary experiences. AUF is a vibrant community of creative souls, united by a passion for music, art, and the magic of connection.
My friend approached me with a clear vision: to create a refreshed website and brand identity that set AUF apart from other collectives. He wanted a digital presence that matched the immersive quality of the events they host throughout the year.
The project kicked off in June, and by August, the new website was officially live.
Getting Started
The stakeholders in this project formed a close-knit, collaborative team, each bringing unique expertise to the table. As the designer, I focused on creating an intuitive and engaging user experience that aligned with the collective’s vibrant identity. Two of my software engineer friends, including the founder, handled the technical implementation, ensuring the website was robust and functional. A graphic designer specialized in branding and color, bringing a cohesive visual language that captured the spirit of the collective. Additionally, our group of friends who are part of the collective played an invaluable role, providing regular feedback to ensure the design resonated with the community and stayed true to its core values. Together, we combined our strengths to create a platform that truly represented the essence of Afternoon Umbrella Friends.
As part of our research phase, we analyzed the websites of similar companies, including Shotgun.live, Dice.fm, and Repopulate Mars. This process helped us identify industry standards, effective design patterns, and opportunities to differentiate our approach. By exploring these platforms, we gained valuable insights into how they handled user experience, branding, and functionality, such as ticket purchasing flows, event showcases, and community engagement. This analysis allowed us to pinpoint strengths we could draw inspiration from and gaps we could address to make Afternoon Umbrella Friends stand out. The findings from this research directly informed our design decisions, ensuring a competitive and compelling final product.
We used FigJam to sketch out initial layouts for the website. This collaborative approach allowed us to quickly create wireframes and mockups that conveyed the structure and flow of the site. By visualizing our ideas early, we could gather feedback from our team and friends in the collective, ensuring that the design aligned with the community’s vision. The interactive and intuitive nature of FigJam made it easy to iterate in real-time, refining our concepts based on input and moving efficiently toward a solid foundation for the website.
Using the base colors outlined in the branding guidelines, I developed a comprehensive color palette to provide greater flexibility and depth across the website design. Starting with the core colors, I expanded the palette by creating complementary shades, tints, and gradients that could be applied across various UI elements and backgrounds. Alongside the color palette, I established typography styles in Figma, defining fonts, weights, and sizes for headings, body text, and captions. These foundational elements ensured we had the tools to maintain visual harmony while incorporating variety to highlight content and enhance user experience. By staying rooted in the original branding, the extended palette and typography styles remained consistent with the collective’s identity while allowing for creative expression throughout the design.
I created a collection of foundational Figma components to streamline the design process and maintain consistency across the project. These components included basic elements like buttons, input fields, navigation menus, and cards, all designed to be easily reusable and customizable. By establishing this foundation early on, we were able to iterate more efficiently and ensure a cohesive design system throughout the website.
High Fidelity
We collaborated several times per week to iterate on designs quickly, ensuring that the project remained on track and responsive to feedback. Our team would gather regularly to review progress, share updates, and make adjustments based on input from each other. Additionally, we leveraged our Slack group, which included community members, to gather feedback frequently. This allowed us to stay closely connected with the people the website was intended for, ensuring that their perspectives were woven into the design at every stage. This constant feedback loop kept us aligned with the collective's needs and helped refine the user experience to be both functional and meaningful.
Responsiveness
In addition to the desktop designs, I created mobile designs to ensure the website delivered a seamless experience across devices. Rather than designing every single page, I focused on a few key templates that demonstrated how the layout and components should adapt to smaller screens. These designs provided a clear framework for responsive behavior, from navigation to content scaling. Credit goes to my developers, who skillfully took these initial designs and extended the responsiveness across the entire site, maintaining consistency and usability. Their expertise brought the mobile experience to life and ensured the website felt polished and intuitive on all devices.
Site Launch
After about 45 days of intense collaboration and iterative design, we successfully launched the website. The go-live marked a major milestone for the project, and the response has been overwhelmingly positive. Since inception, the site has garnered over 12,000 visits, with more than 500 tickets sold and $20,000 in revenue directly from the site. This strong early engagement speaks to the effectiveness of our design and the demand for the experiences AUF offers. It’s been exciting to see how quickly the website has resonated with the community, and we’re eager to continue building on this momentum as the collective grows.
Learnings
This project reinforced the power of small, focused teams in achieving high levels of effectiveness and efficiency. In our case, the tight-knit nature of our team allowed us to make quick decisions, adapt rapidly, and execute ideas without the many roadblocks and delays that often come with larger teams. In contrast, large organizations can sometimes operate like government entities, where numerous layers of bureaucracy and approvals create friction and slow progress. I believe larger companies could learn from the agility of smaller teams by allocating more resources to focused, autonomous groups that can move swiftly and get things done. Of course, I understand that larger companies face more complex challenged, such as scale and coordination, which require careful management, but there’s definitely value in embracing the efficiency smaller teams bring.
Visit the live site at www.afternoonumbrellafriends.com