Diagnocell

Diagnocell came from a difficult situation:

• A previous provider had left a basic and incomplete version of the site online.
• The website did not match the quality expected by the client.
• The client did not have access to their hosting server.
• The previous provider had stopped responding.

The previous site was organized around a limited navigation that prioritized IHQ, Histología, Marcas, Catálogo and Nosotros. Some product categories existed inside the site, but they were not visible from the main menu. Users had to reach them through content or PDF catalogs, which made the product offering harder to understand.

The site also lacked a proper Contact section, even though Diagnocell depends heavily on direct communication and advisory sales. The experience felt closer to a presence website, when it needed to work as a functional channel for quotation.

The discovery process was practical and based on the project's real constraints. I reviewed the existing site, used Wayback Machine to recover screenshots from previous versions and created a questionnaire-brief to gather more precise information from the client.

Through client calls, site audit and content review, I understood that the site needed to support two main types of users: technical users who look for specific products or categories, and purchasing teams that need enough information to request a quote.

The main findings were:

• Product categories were not easy to find.
• PDF catalogs were competing with product browsing.
• The navigation did not reflect how users needed to search.
• Contact and quotation actions were not visible enough.
• The Nosotros section needed to communicate more than generic mission, vision and values.
• Brands were important because they acted as trust signals for buyers in hospitals and laboratories.

The main UX decision was to shift the site from a brand-first structure to a product-and-quotation-first structure.

The final navigation gave more visibility to Productos, Marcas, Nosotros, Contacto and Solicitar Cotización. Product categories were grouped hierarchically under Productos, including IHQ, Histología, Sondas FISH / CISH, Patología Digital, Consumibles / Reactivos and Equipos.

Catálogo was moved to a secondary role and renamed Recursos in the footer. This helped reduce confusion because PDF catalogs were still useful, but they no longer needed to compete with the main product browsing and quotation experience.

The site was structured around the real business process:

• Users explore products.
• Users prepare a quotation request.
• Diagnocell reviews availability.
• Diagnocell provides guidance when needed.
• The sales team follows up through WhatsApp.

This made the site more aligned with how the company actually sells.

After validating the content, information architecture and sitemap with the client, I moved into UI design in Figma. The visual direction shifted from a generic commercial style to a more editorial and scientific experience, using microscopic textures, clearer hierarchy and a stronger sense of specialization.

The interface direction focused on:

• Making the product catalog easier to scan.
• Giving technical content a clearer structure.
• Keeping brands visible as trust signals.
• Making quotation actions easy to find.
• Translating Diagnocell's scientific context into the visual language of the site.

I created high-fidelity wireframes and redesigned the main components for the catalog, brand sections, content pages and quotation flow. That prototype helped validate how the experience would behave before development, especially around:

• Product browsing by category.
• Save-to-quote behavior.
• CTA states and product count feedback.
• Quote request review.
• Quantity adjustment before submission.

The final site was developed as a custom WordPress theme using CPTs and ACF. I also prepared catalog data for import using PDF catalogs, product names, SKUs, brand names and AI-assisted extraction. Around 500 products were imported in the first batch, and the system was left ready for future imports through CSV or manual WordPress entries.

Diagnocell now has a clearer, more complete and administrable website that supports:

• Product exploration
• Quotation requests
• Sales follow-up
• Content updates
• Product catalog growth

The new structure gives product categories more visibility, keeps brands as trust signals, and turns the site into a functional quotation channel instead of only a presence website.

The project replaced an incomplete site, improved the presentation of the brand, clarified the product structure, supported the sales process and gave the client a WordPress system they can update over time.