BrandZap
George Little
Its 2024. Forms are dead. Get started here.
Case Study
Ansa, a customer rewards and loyalty platform, is shaking up the small-business point-of-sale customer retention market in the US.
When Ansa reached out to BrandZap, they had just secured their Series-A funding, allowing them to expand their team, enhance their product, and revitalize their marketing efforts.
Before announcing their funding, Ansa’s Co-Founder and CEO, Sophia, wanted to redesign the company's graphic identity and build a more comprehensive website that better reflected their products and company culture. The existing website was a single-page site built on Webflow with a dark, blockchain-esque design that was inevitably targeting the wrong audience due to its appearance. The branding was limited to the website, a few collaterals, a deck, and some social banners. The logo, a circular orbiting icon, was well established and would remain unchanged.
Ansa's design team, led by Senior Product Designer Alice Tu, needed BrandZap’s expertise in guiding the rebranding process and website relaunch. Our role as a creative consulting partner and Webflow developer was to collaborate closely with Alice on design tasks, coordinating next steps, website development, and providing digital marketing advice.
The project scope was defined by the planned announcement of the Series-A raise, giving us a 10-week timeline. Our task was to establish a new brand identity, including new social templates, decks, and collaterals, and design and develop a new website on their existing Webflow property.
Ansa’s website had multiple goals: showcasing product features, conveying the company’s mission, and highlighting open positions. BrandZap guided the stakeholders through a combined wireframing and site mapping process. We explored various user experience flows to understand the necessary information and actions for different personas, such as signing up for a product demo, contacting for partnerships, or submitting job applications.
We created low-resolution wireframe mockups to define the website structure and typical page layouts. This approach allowed stakeholders to rearrange predefined layout groups, reducing back-and-forth alterations and enabling asynchronous consideration of changes.
The resulting website featured a homepage previewing the site’s content, multiple product feature pages, an integrations page, a company page with founder information, mission and vision, hiring details, a blog, and landing pages. The site was arranged to favor a buyer persona.
BrandZap’s brand revamp process is designed for efficiency. Within two weeks, we explored, critiqued, and developed 2-3 versions of Ansa’s brand. Our flexible approach allowed in-house designers and stakeholders to take ownership of the redesign process, avoiding authorship-related tension.
In close coordination with Alice, we developed a whimsical, newsprint-inspired graphic style. Using film photography, newsprint clippings, and illustrative flairs, we created a balanced graphic identity that combined startup energy with enterprise rigor and approachability.
The website's main goal is to encourage demo requests, which meant we needed to highlight the product's features and how they're used. We dedicated a significant portion of the site's graphics for this, showing the product in action in typical places like restaurants and coffee shops.
From the beginning, there was a strong interest from stakeholders to add animation to the brand’s new visual identity. Working closely with Ansa’s in-house designer, we created multi-layered animated images that added depth to the brand’s “collage” style through subtle transitions and parallax-style movement.
Most importantly, we wanted the product’s user interface on the new website to reflect the real user experience, not an idealized one that you often see on SaaS websites. This meant each screen and product moment was manually recreated for specific views or actions, giving us more flexibility and focus on the vital parts of each product graphic. We didn't want to just use screenshots. We built custom views for each use case, which we then paired with a collage-style photograph of newsprint clippings to enhance the context and add relevant detail.
To build trust with potential buyers, we've integrated case studies and a blog into the website in two main ways. First, we have a dedicated blog page, where content is neatly arranged in a grid and sorted by the date of publication. This space primarily features articles and announcements related to Ansa.
Second, we've made sure to include relevant content, like product-specific case studies, on appropriate pages as additional resources. This approach provides visitors with more info they might find interesting, right where they need it.
Once a user feels confident enough, a feeling we strive to instill within three interactions or less, they can opt for a demo via a straightforward webform or an embedded chatbot. We've made this process user-friendly and highly customizable, making it a breeze for Ansa's Marketing Manager to feed lead data into their CRM. The website's call-to-action is designed to guide visitors smoothly to a single landing page for demo sign-ups.
Ansa is currently in a stage of rapid growth, making hiring a top priority. To cater to this, we've designed the company page to speak to a broad audience – from potential hires and future investors, to prospective partners. This page boasts team photos, insider info about the founders, and a handy, embedded Lever job board.
The homepage is typically the first stop for most website users. In Ansa's case, we designed and structured the page to offer a preview of the rest of the site. The layout of each section, from top to bottom, along with factors such as section height and content density, are all thoughtfully arranged to guide a potential buyer on an ideal journey. At the same time, we made sure to include pertinent information for prospective partners, investors, and job seekers.
In addition, we created two separate service pages, each focusing on one of Ansa's primary product features. These pages delve into the specifics of each feature, clearly explaining their uses and benefits.
Given that the website was already live, we had to be careful not to interfere with the existing interface and content during redevelopment. This brought some challenges for our Webflow development team, but it made the shift to the new website smoother than if we had to create a completely new site. To manage this, we set up a hidden, password-protected directory for secure building and testing. This approach also allowed us to avoid duplicating or moving any previously published blog content.
In order to optimize our visibility on search engines, we paid close attention to the structure of each page. We made sure headings were in the right order, meta descriptions and tags were set up correctly, and load-times balanced nicely with usability scores, giving us an ideal mix of graphics and efficiency. Plus, to prevent any broken links or dips in our search ranking, we used 301 redirects to map all inbound links to their new URLs after we launched the site.
Seamless mobile usability is a big deal for most modern websites, and Ansa's site is no exception. The mobile version provides the full website experience with no restrictions or cutbacks. All the animations and interactions from the desktop site are there, so users can fully experience the new brand and product graphics. We've even whipped up a special mobile menu for easy navigation on smaller screens.
BrandZap's collaborative approach with Ansa resulted in a successful brand revamp and Webflow website redevelopment within a tight timeline. The project centered on creating a visually engaging and user-friendly platform that effectively showcased Ansa's product offerings, company culture, and open positions.
The result was a whimsical, newsprint-inspired brand identity and a comprehensive, SEO-optimized website that ensures a seamless user experience across all devices. The rebranding process and website relaunch not only enhanced Ansa's market visibility but also fostered lead generation and hiring efforts, contributing to Ansa's growth trajectory.
Strategic Advising in Design, Marketing, & Creative Direction.
.webp)
