Collaborating with a Growing Startup to Craft a Future-proof Site

Attain Data, a visionary company, is committed to creating a more equitable and efficient data-sharing ecosystem. In 2019, their co-founder and CEO Brian Mandelbaum developed a platform that empowers consumers to capitalize on their most valuable asset—their data—by offering them modern financial services such as savings tools, early wages, and rewards without hidden costs or fees. In return, consumers allow Attain Data to use their real-time data for research, insights, and targeted advertising.

In pursuit of a more robust website that could accommodate growth and provide a competitive edge, Katie Berry, the VP of Business Operations at Attain Data, reached out to us for our help transforming their existing one-page brochure site. However, Attain Data had a strict budget, presenting us with the challenge of balancing superior design quality and cost considerations. As a result, our joint objective was to craft an inventive solution that would not only align with Attain’s budgetary limits but also guarantee the future scalability of the website.

The Attain team entered the project with a well-defined vision. Before meeting with our UX designers, their team had already prepared documentation for the new website’s information architecture, content-block wireframes for each page they deemed necessary, and meticulously planned how they wanted the navigation functionality to work. This clarity and preparation underscored their commitment to the project and made our collaboration more efficient.

Building on the solid foundation laid by the Attain team, our UX designers got to work. Serving as expert guides, we fostered a constant dialogue, asking insightful questions to ensure that both teams remained aligned with the project's objectives. The most impactful point of our collaboration came when we evaluated their proposed homepage wireframe. We encouraged the Attain team to step back and think about the narrative they wished to convey. After some reflection, it became apparent that the existing wireframe did not quite encapsulate this story. To rectify this, we initiated a content-blocking exercise, leading to the creation of a new homepage. This revised version was tailored to address the specific needs of their sales team and customers more effectively, thereby encapsulating the core narrative the Attain team wanted to express.

To ensure a smooth transition to the project's remaining stages, we focused on two crucial aspects to stay within budget expectations: extending the brand without building something from scratch and balancing the development of a custom website without limiting content editors' flexibility.

Although Attain Data came to us with a pre-existing brand, it lacked the breadth they desired. Their previous use of fully opaque brand colors resulted in a youthful, toy-like aesthetic. To address this issue, they produced an expanded color palette with a range of shades. Concurrently, we conducted a thorough assessment of their other brand elements, pinpointing which aspects to keep, modify, or replace.

We created two design exploration boards to showcase different design approaches to fulfill the need for a more comprehensive and versatile brand identity. Both approaches considered the client's existing brand but intentionally diverged in their use of color, type treatment, and other design elements. For example, one direction utilized a data-pixel-grid graphic, while the other featured a daisy chain of Attain icons. 

In the end, we decided to iterate on the data-pixel-grid device throughout the remainder of the design phase, refining it into a mono-color, smaller pattern blended with a gradient. We devised this specific design element to represent the data Attain collects and how they transform that data into valuable insights for their customers.

The Attain team's solid groundwork and understanding of design were instrumental in the project, allowing us to allocate additional time to the development phase. 

To create the new Attain website, we harnessed the power of WordPress and integrated our proprietary component-based system. This system uses flexible components, which serve as customizable building blocks within the page templates that can be effortlessly manipulated or replaced by content editors to construct custom pages tailored to their specific needs and objectives.

Our efficiency in building the bulk of the site allowed our developers and designers to work in tandem to embed custom features, elevating the overall user experience. The homepage, the major standout bespoke page on the Attain website, reflects this collaboration as we opted for a more intricate layout, incorporating eye-catching elements to capture the user's attention.

Among these standout elements is the parallax roundel scrolling section. Its creation required a delicate balance of timing, scale, and subtle visual changes to deliver a satisfying and engaging experience for the end user.

Stepping outside the confines of the homepage, we brought our customization skills to other segments of the site. For instance, we introduced fully custom header and footer layouts, with the header featuring three distinct dropdown styles. Notably, one of these styles accommodates a sub-menu complete with unique hover and tab states, significantly improving the navigation experience.

Lastly, we enhanced the website's index pages by integrating custom filtering and pagination through the use of ListJS. This improvement fosters a lightweight, seamless navigation experience while ensuring minimal effect on page load times. As a whole, the harmonious blend of design efficiency and customized developmental elements in this project led to the creation of a dynamic, user-friendly website for Attain.

As we pause to reflect on this project, it’s become clear to us that limitations and challenges can be powerful drivers of creativity and innovation. Our dedication to maintaining the highest standards of design and user experience, combined with our client's support and trust, has resulted in a website that we are incredibly proud of.