uix
UI Description
Analyzing the provided screenshots, we can conclude that the site design is outdated (it looks like a template from the early 2010s). For such a specific and serious product as DNA preservation (especially in war conditions or for extreme professions), trust is a key factor. The current visual does not inspire trust. Here is a step-by-step guide on how to significantly improve the design and user experience (UX/UI): 1. General style (Colors and fonts) Color palette: Currently, white, gray, and bright red are used. Red is often associated with danger or error. I recommend switching to a more “reliable” and technological palette: deep dark blue (or graphite/black) as the main dark, white/light gray for the background, and one accent color for the buttons (for example, muted orange or gold, which echoes the color of brass/titanium). Fonts: Serif fonts in headers look old-fashioned now. Replace them with modern minimalist sans-serif fonts, such as Montserrat, Inter, Roboto or SF Pro. They are easier to read and look premium. 2. Header - Screenshot 1 Now: A lot of text, three lines (languages, contacts, menu), the logo gets lost. How to: Make the header compact and fix it when scrolling. Left: Logo. Center: Navigation (Home, About us, Catalog, Contacts). It is better to remove the forum and guestbook. Right: Phone number (clickable), language selection and a bright button "Order a token". 3. Home page (First screen) - Screenshot 1 Now: YouTube videos that do not work and an unclear hierarchy. How to: The first screen should sell the idea in 3 seconds. Make a large, high-quality banner (or background muted video). Place the Main Headline (UTP) on it. For example: “Genetic Token. Reliable storage of your DNA for 1000 years”. Under the headline - a subtitle: “For the military, extreme sports and memory preservation for posterity. Made of titanium and brass”. Large call-to-action button (CTA): “Choose a token”. Block with professions (collage): Current stock photos (especially the girl with cleavage and the flight attendant) look cheap and frivolous. Replace this block with a modern grid (Grid). Use stylish, darker photos or icons with short captions: “For the military”, “For travelers”, “For rescuers”. 4. About Us Page - Screenshot 2 Now: Huge empty fields, a tiny photo of the capsule, solid text and (which is very strange for this page) a comments block. How to: * Use a 50/50 layout. On one side, a high-quality large macro photo of the token (so that the texture of the metal, carving, tightness are visible). On the other side, text. Break the text into paragraphs, use bullet points to highlight the main points: "Why is this important?", "How does it work?", "What materials do we use?". Be sure to remove the comments form from this page, it is completely unnecessary here. Add a block with answers to frequently asked questions (FAQ). 5. Tokens Catalog - Screenshot 3 Now: A chaotic grid. The photos are taken on different backgrounds, with different lighting. Titles are written in CAPS (Caps Lock), no prices or buy buttons. How to (Product Cards): Photo: All products should be photographed in a uniform style (same scale, uniform light gray or white background). Text: Write titles in normal case (e.g., "Titanium Anodized Token", not "TITANIUM ANODISED TOKEN"). Price: Be sure to add prices! The lack of a price scares off 70% of buyers. Button: There should be a "Buy" or "More details" button under each product. Create a neat grid (3 or 4 products in a row on a computer, 1-2 in a row on mobile). Summary: You need a redesign in the Military-Tech or Premium Safety style. The site should be clean, strict, with an emphasis on the quality of the metal (titanium/brass) and the reliability of the technology. If you use website builders (WordPress, Webflow, Wix), search for modern templates using the terms "Security equipment theme" or "Tactical gear ecommerce template" and adapt them to your product.