home_and_garden com

This project is a custom-developed Webfow website made to stand out for Bonus Track agency. The website features many animations and coded elements.

Case Study Contains
Bonus Track
Project Summary
Brand Vision's Role
Our Deliverables
Client's Responses
Bonus Track is a creative agency. They curate and produce pitch-perfect creative, content, design, branding and beyond.


At Brand Vision, we pride ourselves on delivering top-quality web design services to our clients. For this particular project, we were tasked with creating a visually striking and modern website for a creative agency. We understood the importance of showcasing the agency's portfolio of work and providing information about their services and team, and we were determined to deliver a website that would stand out among the competition.

To achieve this, we began by conducting extensive research on the client, Bonus Track. We wanted to fully understand their needs and goals, as well as their target audience, branding, and desired functionality for the website. We gathered all of this information through thorough interviews and discussions with the client, and used it to inform our design process.

Using Webflow, a website design and development platform that allows for the creation of custom-coded elements, we were able to create a unique and visually striking design that effectively conveyed Bonus Track's brand and message. We paid close attention to the user experience, ensuring that the website was easy to navigate and provided a seamless browsing experience for visitors.

Overall, our team at Brand Vision is proud of the work we did on this web design project. We believe that our extensive research and attention to detail helped to create a website that truly stands out in the creative agency space, and we are confident that it will help Bonus Track succeed in achieving their business goals.

The design and development of this website followed these steps:

Step 1: Site goals review - Before beginning the design and development process, we at Brand Vision took the time to review and understand the goals of the website. This included discussing the desired functionality and overall purpose of the site with the client, Bonus Track.

Step 2: User persona - To better understand the target audience for the website, we created user personas that represented the types of individuals who would be visiting the site. This helped us to tailor the design and content of the website to the needs and interests of these users.

Step 3: Sitemap creation - Based on the goals and target audience of the website, we developed a sitemap outlining the structure and hierarchy of the site's pages and content. This sitemap served as a roadmap for the rest of the design and development process.

Step 4: Sketched low - fidelity wireframesUsing the sitemap as a guide, we created low-fidelity wireframes to visualize the layout and structure of each page on the website. These wireframes served as a rough draft for the design of the site, and allowed us to make changes and adjustments before moving on to more detailed designs.

Step 5: UX and UI design - After refining the wireframes, we moved on to designing the user experience (UX) and user interface (UI) of the website. This included deciding on the look and feel of the site, as well as the placement of elements such as buttons and forms.

Step 6: Mobile design - To ensure that the website was fully responsive and accessible on mobile devices, we designed a separate version of the site specifically for mobile users.

Step 7: Figma prototypes - Using Figma, a design prototyping tool, we created interactive prototypes of the website to test and refine the design before moving on to development.

Step 8: Mockups - Using the prototypes as a guide, we created high-fidelity mockups of the website to serve as a visual reference for the development process.

Step 9: General website development - Using the mockups as a blueprint, we began the process of building the actual website. This included front-end development, such as coding the HTML, CSS, and JavaScript that make up the site's design and functionality.

Step 10: Front-end mobile development - In addition to general website development, we also focused on front-end development for the mobile version of the site.

Step 11: Plugin/API implementation & optimization - To enhance the functionality of the website, we implemented various plugins and APIs as needed. We also optimized the site to ensure that it was running smoothly and efficiently.

Step 12: Cross-browser and device testing - Before launching the website, we thoroughly tested it on a variety of browsers and devices to ensure that it was fully compatible and looked and functioned as intended.

Step 13: User testing - To get feedback on the website from actual users, we conducted user testing to gather insights and identify any areas for improvement.

Step 14: Hosting setup - Once the website was fully developed and tested, we set up hosting for the site and prepared it for launch.

Step 15: Launching and support - Finally, we launched the website and provided ongoing support to ensure that it remained up-to-date and functioning properly.

Brand Vision’s Impact:

Brand Vision's efforts on this web design project resulted in the creation of a sleek and modern website that effectively showcased the agency's portfolio and services. The custom-coded elements added a unique touch and helped the website stand out in a crowded market. The end result was a resounding success, receiving positive feedback from both the client, Bonus Track, and their target audience. The website served as a valuable marketing tool and helped Bonus Track succeed in its industry. Our team at Brand Vision was proud to have played a role in Bonus Track's success and looked forward to continuing to support them in the future.

Share this
Insight & Blogs
See our Insights
Lets Talk
Contact us to discuss your Inquiry and we'll get back to you shortly.