Client
Established in the early 80s, Tilemaster’s website is indistinguishable from competition: room scenes, pastel tones, overlays, text. Websites that feel cluttered and uninspired.
At this point, a website that has nothing will stand out, as will one with bright colours:
Nostalgia marketing
But what’s next? Can the design accelerate customer recognition, acquisition and retention? Trust is a feeling of familiarity, quality of pastness and prior experience. Familiarity is associated with cognitive ease and it breeds liking. If you’re like them, they will like you. If you’re one of them, they will accept you. Tilemaster has to display common frames of reference to gain trust.
Their largest customer segment is comprised of 25 to 45 year-old men and women whether they’re homeowners, decision makers, designers, influencers, handymen or contractors. What can such a diverse group of people possibly have in common with each other let alone with Tilemaster? Tilemaster as well as most of their salespeople fall within the same age group as their key customers. They’re all from around here and grew up in the 80s and 90s. Tilemaster has to show precisely that to become likeable.
Nostalgia marketing is a sure way to relate to their target market and make them trust them. Not just the film industry or old fashion brands like Adidas, Champion, Fila, Forever21, Gucci, Nike, Puma and Vans but but carmakers like Ford and Kia, food and beverage brands like Coca Cola, Doritos, KFC, Pepsi, Pizza Hut, TV networks, streaming, and video sharing like HBO, Netflix, and YouTube and many famous brands like Adobe, Amazon, Apple, British Petroleum, Disney, Facebook, Microsoft, Pixar, ToysRus, and Walmart.
Nostalgia Web Design
Anything from retro postcard or red vintage mailbox contact forms, custom iconography featuring antique cash register, pagers, pull-down maps, multicolour pens, coloured slinky and other 80s childhood memorabilia would sure put a smile on visitors’ faces:
Even the 404 page could show a 90s mouse with the removed ball and text: “Uh-oh… Someone’s dropped the ball! No biggie, just use the search bar to find it or ask for help.”
Filterable gallery
The custom vector icons may take visitors down the memory lane but they look very sleek and modern and are functional: people can check store-specific inventory, track their orders, or learn useful information about pickups and returns, see featured products and learn what time their local Tilemaster store opens, if it’s already closed for today:
Individual store pages will have polaroid pictures, on-hover pull-down maps, sticky notes, and a vintage red mailbox for the careers section:
About Us page
The about page will have resemble newspapers and feature a looped film-roll gallery:
Shop page
The old website was slow and expensive to maintain as it required creating dozens of duplicate images for every single SKU with different names and sizes for exactly the same image.
Complete variable product pages will always outperform websites with separate pages for each single product variations and unnecessary content duplication. They’re also better for user experience: imagine having to scroll through dozens of different colour variation of the same model shoes that you don’t like.
Tile collections can come in many colours. Each colour has a unique name, slug, and hex code(s) that can be grouped into different colour groups for the colour filters. Some series may have several shades of the same colour group (e.g. grey). Colour swatches will indicate additional colours and can be clicked to view the relevant product image.
When filtering products by colour, it’s possible to show all colour variations of the same variable product that fall under the same colour group. Notice how “Brazilian Slate” and “Board” series have “Silk”, “Elephant”, “Pencil”, “Dust”, “Graphite”, and “Inkwell”:
Product page
Clean minimalist product page with vertical image thumbnails above the fold:
Clicking on the shevron icon scrolls the page down to a trendy masonry layout for product sizes and specs below. Upsells and cross sells are organised into ‘People also view’, ‘Complete the look’ for visible products such as coloured grouts, silicons, profiles, and shelves, and ‘Better with’ for other installation materials like in-floor heating, membranes, mortar, and other.
This website pulls stock codes, inventory, sizes and packaging info directly from the company’s ERP system and cleans the data using long regular expressions. The technical information is displayed in masonry grid like in recent Apple keynotes. The format icons are drawn using CSS with SVG exceptions for custom formats.
This way we can automate a lot of visual information generation and make the website maintenance faster and more cost-efficient. Tilemaster offers thousands of SKUs across hundreds of product collections under extensive product categories, colours, formats, size icons, application, packaging, and SKUs with technical info and downloadable files so this really simplifies the process.
