Tecnogenn/2026
Tecnogenn
A clickable prototype of a full redesign for Tecnogenn, an Argentine audio and electronics shop: real catalogue, three-level pricing and a checkout designed end to end.
(01) Overview
Tecnogenn sells sound combos, speakers, mixers, microphones, lighting and remote controls, with more than 10,000 sales on Mercado Libre. I proposed a complete redesign of their online store and designed it from scratch as a clickable prototype: seven screens, shared modals and every state, filled with their real catalogue of 90 products in 8 categories, with prices, stock and instalments.
Client
Tecnogenn
Year
2026
Services
Design, Development, Strategy
Deliverables
UX audit, Visual direction, Design system, Clickable prototype, Screen and state designs
(A) The Challenge
An audit of the current site gave a simple verdict: it hides its products. A grey on grey menu, carousels everywhere, a banner promising 30% off while the cards say 10%, and its best trust signals buried in a paragraph. Seven concrete problems, each one a moment where a buyer hesitates.
(B) The Approach
- 01
A stage around the window
The brand lives on night and events, but a shop needs calm to compare specs and prices. So the catalogue sits on a light, clean base, while the hero, banners and footer stay graphite black, like a stage around the shop window.
- 02
One colour, one job
Each colour got a single fixed role: magenta for the main action, red for offers, green for the transfer price and availability, amber for ratings and low stock.
- 03
Price in three levels
Struck price and the usual 10% above, the price large, transfer in green with instalments on one line. The red Offer seal only appears when a discount beats that 10%, so it keeps meaning something.
- 04
A logo they already know
The logo was redrawn cleanly from the real one, the magenta circle with its rings and the TG monogram, keeping every element customers already recognise.
views designed: screens, mobile, modals and states
real products in 8 categories
problems of the current site solved
(02) Brand & Design System
My own visual direction built on the existing brand: the magenta circle with rings and the TG monogram, redrawn, and the neon glow of their current signs, now used only as decoration on dark surfaces. White and showcase grey carry the catalogue; graphite black frames the hero, banners and footer. Sora sets headlines, Geist Mono every price, label and technical figure such as power or channels, and Geist the text and interface. Simple line icons, no emojis and no abbreviations.
Palette
Typography
Sora
Sonido que se siente. $819.000
titulares y logo · Geist Mono para precios, etiquetas y datos técnicos · Geist para texto e interfaz
(03) The Product
Price in three levels, payment explained
Gallery with thumbnails, struck price and discount, the price large, the transfer price in green and interest-free instalments on one line. Stock warnings, a shipping calculator by postcode with real carriers and the technical specs below, set in a monospace so power and channels read like a spec sheet.
Filters instead of carousels
Every product visible in a grid: category chips, filters for stock, free shipping, Bluetooth, price and brand with counts, sorting and load more. On mobile the filters move to a side panel with a View N products button, so the buyer always knows what the filter leaves.
The final price for each payment method
A reduced header so nothing distracts, previous steps summarised and editable, and payment options that show their own total: bank transfer with 30% off or interest-free card instalments through Mercado Pago. The promise in the banner and the number at checkout finally match.
Results while typing
Opened from the search field or Ctrl K, it lists popular searches and categories, then results with the match highlighted and a link to see all of them in the catalogue.
Buy without leaving the list
From the card button: price levels, key specs, stock and add to cart in a modal, so comparing two speakers does not mean going back and forth between pages.
(04) The Outcome
Thirty-one views designed: fifteen desktop screens and variants, five mobile views, four modals and seven states such as loading placeholders, a lost connection, an empty cart, an unpublished product and a rejected payment. The checkout runs in three steps with shipping calculated, the price recalculated per payment method and a confirmation with the transfer details. A design system page built from the same components documents logo, colour, type, buttons, price, cards, forms, notices and states, so the store can grow without losing its order. Every one of the seven problems from the audit has its answer on screen.