Seleccionar página
postales-granollers-diseño-grafico-barcelona-fotografia-impresion-papeleria

Website | Online Booking

Heroes Divers

Heroes Divers is a scuba diving center based in Costa Brava, Girona, Spain, specialized in guided diving experiences for children ages 8 to 14. Their mission combines rigorous safety standards with an educational approach, helping kids explore the underwater world while building confidence, autonomy, and a sense of adventure.

RESULTS IN NUMBERS:

%

Increase in website traffic

Catalog visualizations

Professionals visited our booths

Overview

The company required a fully new website to promote its services and enable online bookings for diving sessions. The goal was to build a visually cohesive and trustworthy digital presence that reflected both their professionalism and their unique specialization in diving activities for kids.

TIMELINE

  • 1 Week

TOOLS

  • Adobe Cloud
  • WordPress
  • Notion

ROLE

  • UX/UI, WordPress Developer

B2C PROJECT

Live in 7 days: Launching on time for the season

UI/UX WORDPRESS DEVELOPMENT UX COPYWRITING

Due to a previous failed delivery by another agency, the project ran on a 1-week accelerated timeline before summer season opening.

The brand only had a logo. No colour system, typography, visual tone, nor communication guidelines had been defined. This was discussed directly with the business owner to understand how she envisioned the brand experience online and how she wanted the centre to be perceived by families visiting the Costa Brava.

JUMP TO SECTION:

UI/UX WORDPRESS DEVELOPMENT UX COPYWRITING

Process Overview

Research & Analysis

EMPATHISE AND DEFINE

IDEATE

DESIGN & DEVELOP

FUTURE EXPANSIONS

WEBSITE · HEROES DIVERS · SCUBA DIVING · SEA · COSTA BRAVA · KIDS · SUPER HEROES

CHALLENGE

FREELANCER, 2022 – 2023

  • Launch a fully functional website within one week
  • Limited photography available from the client
  • Create a digital presence for a business from scratch
  • Translate the essence of the company into the copywriting

NEEDS

FREELANCER, 2022 – 2023

  • A clear, accessible website aligned with the parents’ decision-making process
  • Visual identity that extends beyond the logo
  • Restructuring of all provided content
  • Booking system fully integrated

THE SOLUTION

FREELANCER, 2022 – 2023

  • Using WordPress to efficiently deliver the website
  • Create a UX architecture & refine information
  • Extend the visual identity with colors & images

WEBSITE · HEROES DIVERS · SCUBA DIVING · SEA · COSTA BRAVA · KIDS · SUPER HEROES

Reaserch:

LOOKING INWARD

The business is uniquely positioned as a scuba diving school exclusively focused on children aged 7–14, filling a niche not addressed by other local centers. The owner is a certified children’s diving instructor, qualified to work with minors and children with disabilities, ensuring strict safety standards. With over seven years of experience leading guided underwater activities and educational immersions, the business combines learning, exploration, and confidence-building through play.

At the start of the project, the brand only had a logo, lacking an extended visual identity, graphic language, or digital presence. Key differentiation elements included child-focused superhero-themed wetsuits and oxygen tanks, a safety-first methodology framed in a playful and educational way, and close instructor supervision with reduced group ratios. Operationally, the company required a website urgently to launch in time for the high-tourism season, including a functional booking system to manage reservations efficiently.

LOCATION

Spain remains one of the world’s leading destinations for coastal tourism, attracting millions of international visitors every year. Costa Brava, in particular, holds a high strategic value due to its proximity to France and its strong influx of travellers from neighbouring European markets such as Germany, Belgium and Russia. The region’s consistent family-oriented tourism patterns make it an ideal environment for specialised water activities designed for children, positioning Heroes Divers in a unique and advantageous market niche.

AUDIENCE

In this case, the target is very defined, parents with children aged 8–14, middle to high purchasing power, national and international tourists, visiting or residing in the Costa Brava. They are looking for activities for their kids beyond the usual.

They have expectations of a safe enviorment with a professional’s oversight, keeping the experience unique and fun for the kids.

COMPETITORS

Costa Brava is a well-established destination for diving activities, with multiple diving centers operating during the high season. However, the existing offer is exclusively designed for adults and advanced divers, with no operators specializing in child-focused experiences.

KEY TAKEAWAYS

  • Heroes Divers fills a unique market gap by providing professional, certified supervision tailored to children, including young divers requiring additional support due to disability.
  • Heroes Divers benefits from an excellent location on the Costa Brava, a highly touristic area that attracts families from Spain and neighboring countries, providing strong potential for bookings.
  • The competitive landscape shows a gap in child-focused diving experiences, as most local centers cater exclusively to adults, giving Heroes Divers a unique position in the market.

Goals

ATTRACT TARGET AUDIENCE

Showcase the child-focused, safety-first approach and unique elements (superhero wetsuits, educational immersion) to appeal to parents seeking engaging, safe, and educational activities for their children.

LAUNCH A FUNCTIONAL WEBSITE

Develop a fully functional website to showcase services, provide information about diving programs for children, and include an integrated booking system to manage reservations efficiently.

ESTABLISH A CONSISTENT BRAND IDENTITY

Expand the initial logo into a coherent visual system for the website and future materials, including colors, typography, and tone, ensuring the brand communicates professionalism, safety, and fun.

Brand

The company had a recently updated logo but lacked supporting visual elements. I developed a broader system around it: including gradients, wave shapes, and clean graphic lines. All inspired by the idea of volume and form, key attributes of Preformatex’s products. This system allowed the brand to remain flexible while maintaining consistency across different applications.

Logo_Preformatex
postales-granollers-diseño-grafico-barcelona-fotografia-impresion-papeleria

Holistic aproach

Moving forward with the development and implementation of all updates and new media, I adopted a holistic approach to redesign every existing touchpoint and create new ones with visual and strategic cohesion. The project combines graphic design, branding, and UX principles to ensure that Preformatex communicates effectively across all channels.
To present this work clearly, the case study is divided into three areas: Digital Media, Print & Presence, and Website, all developed through a structured process of research, design, internal review, implementation, and assessment.

Website redesign & expansion

The website became the foundation for implementing the new identity digitally. I reorganized the site architecture to improve navigation and accessibility, ensuring that professionals could quickly find information about products and services. The design combines a functional layout with a renewed visual language, modern, clean, and aligned with the company’s positioning as a reliable European manufacturer.

Originally, we considered incorporating an online shop into the website. However, we decided to postpone this feature until the brand identity and all visual materials were fully aligned. Now that these foundations are in place, we have begun developing the e-commerce section, starting with Preformatex’s ready-to-ship products that do not require personalization.

Content structure - Preformatex websiteMade with: Lucid

postales-granollers-diseño-grafico-barcelona-fotografia-impresion-papeleria

PLANNING

  • Sitemap: defined the website structureand content
  • Wireframes: outline layout, user flow, and key interactions
  • WordPress: selected a scalable and cost-efficient platform

Low fidelity wireframes - Preformatex websiteMade with: Uizard

NOTES

  • Reinforced brand credibility by showcasing logos from major industry clients
  • Improved navigation structure and page hierarchy
  • Added a direct link to the online catalog on the landing page
  • Used the website to create leads, users subscribed to the newsletter or contacted Preformatex via online form
  • Implemented analytics to track traffic, user behavior, and engagement across key pages, ensuring future improvements are data-driven.

Digital Communication

Beyond the website, I adapted the refreshed identity to the company’s digital presence. This included designing new email campaigns, creating LinkedIn and Instagram visuals, and ensuring visual and tonal consistency across all digital channels. Throughout this process, we emphasized the brand’s core value: high product quality, a key differentiator with most of its competitors. The goal was to convey a professional yet approachable image, focused on quality, innovation, and trust.

APPLICATIONS

  • Newsletters, segmented campaigns
  • Social media content
  • Presentations, Banners & Graphics
  • Online forms & Bookings for meetings

Task organizing and tracking:Made with: Notion

NOTES

  • Developed templates for letters and technical sheets, enabling the team to maintain a consistent and coherent brand identity
  • Actively built a larger newsletter audience to increase reach and engagement over time
  • Developed social media posts to promote trade fair participation and provide informative content that helps audiences better understand the products
diseño-web-tienda-online-granollers-barcelona-servicio-desarrollo-wordpress-woocommerce
diseño-web-tienda-online-granollers-barcelona-servicio-desarrollo-wordpress-woocommerce
diseño-web-tienda-online-granollers-barcelona-servicio-desarrollo-wordpress-woocommerce
diseño-web-tienda-online-granollers-barcelona-servicio-desarrollo-wordpress-woocommerce

Print & Presence

The website became the foundation for implementing the new identity digitally. I reorganized the site architecture to improve navigation and accessibility, ensuring that professionals could quickly find information about products and services. The design combines a functional layout with a renewed visual language, modern, clean, and aligned with the company’s positioning as a reliable European manufacturer.

Originally, we considered incorporating an online shop into the website. However, we decided to postpone this feature until the brand identity and all visual materials were fully aligned. Now that these foundations are in place, we have begun developing the e-commerce section, starting with Preformatex’s ready-to-ship products that do not require personalization.

APPLICATIONS

  • Catalog & Flyers
  • Stationary: Bussiness cards, Letter tamplates, Technical Sheets, Client forms, etc.
  • Trade fairs: Booth design & Promotion

Brand moodboard:Made with: Canva

NOTES

  • Linked physical and online presence via QR codes
  • Created themed booths to gain visibility on each trade fair
  • Improved packaging presentation for product samples

Helping Preformatex grow through 

Results

WEBSITE RESULTS

RE-DESIGN & CONTENT EVOLUTION

The website now serves as a cohesive extension of the brand, clean, informative, and aligned with the company’s professional image.

  • Clear navigation and hierarchy improved the user experience for B2B clients
  • Simplified access to key information (products, services, catalog, contact) reduced user friction
  • Consistent use of typography, color, and imagery strengthened brand perception
  • Improved SEO structure and keyword usage, increasing visibility in search results
  • Data compilation and measured statistics via Google Analytics helped quantify improvements across traffic, performance and engagement
  • Adding a blog section helped attract new traffic to the website by offering industry-relevant insights and showcasing the company’s expertise from a professional perspective.
  • The company catalog is now easily accessible and downloadable from key areas of the website

%

Increase in Organic Search Traffic after SEO Imprementation

%

Increase in website traffic

%

Increase in time spent on key pages

%

Improvement in page load speed after optimization

%

Increase in catalog downloads

DIGITAL MEDIA

RE-DESIGN & CONTENT EVOLUTION

Through redesigned templates, clearer messaging, and consistent branding, digital communication became more coherent and professional. Social media now supports regular updates, trade fair announcements, and product education.

The brand also gained visibility in sector-specific press such as Pinker Moda and Intima Magazine, and I created visuals and copy for trade-fair newsletters, strengthening Preformatex’s presence in organizers’ promotional materials.

  • Newsletter audience grew steadily after restructuring content and templates
  • Improved engagement on Instagram and LinkedIn through consistent branding
  • Increased visibility around trade fairs through targeted and timely communication
  • Expanded brand presence in industry media
  • Reduced search time and organizational bottlenecks by establishing a structured cloud-based archive for technical sheets and essential documents

%

Increase in email click-through rates

Catalog visualizations

%

Email opening rate

%

Increase in social media impressions

PRINT & PRESENCE RESULTS

KEY TAKEWAYS

Printed and physical materials were expanded and redesigned to align with the refreshed identity and the company’s evolving needs.

Beyond updating existing assets, new tools such as order blocks, sample testing files, hangers, and presentation documents were created to support both commercial and operational workflows. The strengthened visual system ensured that catalogues, stationery, and trade fair materials all projected a consistent, professional, and recognizable brand presence..

  • Increase in inquiries during and after trade fairs thanks to the updated booth presence and printed materials
  • Creation of branded materials & accessories for products or presentations
  • Booth designs: Mare di Moda, Cannes / Interfilére, Paris / TechTextil, Frankfurt / Swimwear Barcelona, BCN
  • Improved internal efficiency in document preparation through standardized templates

Catalog copies distributed across trade fairs and client visits

Catalog copies distributed across trade fairs and client visits

Catalog copies distributed across trade fairs and client visits

Catalog copies distributed across trade fairs and client visits

Before and After design of Technical DatasheetsTemplate: Adobe Illustrator

Before After

Before and After design of Product CatalogEdited: InDesign, Photoshop & Lightroom

Before After

PREFORMATEX

What I learned:

Over these two years, I learned that design is never finished, there’s always room to improve and evolve. Once we achieved our initial goals, I kept searching for new ways to make an impact, from refreshing visuals and materials to creating new advertising approaches. This experience strengthened my adaptability and showed me how small, consistent improvements can shape a brand’s growth.

THE FUTURE OF THE PROJECT:

A strong foundation has now been established for Preformatex’s visual identity and digital presence. Although I’ve moved on to new professional challenges, I continue to collaborate with the team on key areas of their communication, refining trade fair booths, updating catalogues, and enhancing website content as the brand evolves. Our next big step is adding an online shop to the website using WooCommerce.

Other projects

GRAPHIC / WEB / MARKETING / PHOTOGRAPHY

Web Ridaura Grup

Web design & development

Desván Renovado

Branding & Content Creation

Gastro Tapes

Photography

/ Newww

Branding