Naturally Tiles

Summary

Naturally Tiles is a Christchurch-based boutique tile company that directly imports porcelain tiles from exclusive Italian sources. They had been using the same website for over three years and desired a new website that effectively communicated the high-quality products they offer. Functionally, the client sought the ability to easily change visual aspects of the website, such as colour and fonts. Additionally, they wanted a robust Content Management System (CMS) that was easy to maintain and update for all their products when needed.

Problem

Solution

Create a new website that addresses all of the clients issues and has a new, professional look for the business. Webflow being used as a platform as they are known to have amazing flexibility when developing websites as well as being user friendly for clients to use their CMS.

Design process

Research with Competitor Analysis

• Conduct a thorough analysis of similar websites to gain insights into their design aesthetics and user experiences.
• Evaluate the strengths and weaknesses of competitor websites to inform the design strategy for the new project.

Create Initial Wireframes

• Develop preliminary wireframes to outline the structural framework of web pages.
• Iteratively explore different configurations to determine the most effective layout and user flow.

Client Showcase of wireframes

• Present the initial wireframes to the client for feedback and discussion.
• Engage in collaborative discussions to understand client preferences and requirements.

Mock-ups

• Transition from wireframes to detailed mock-ups, adding essential design elements such as color schemes, imagery, and text.
• Aim to create a visual representation that closely aligns with the final developed version.

Client Showcase of mock-ups

• Share the comprehensive mock-ups with the client for a more tangible representation of the final design.
• Collect and incorporate client feedback to refine and enhance the design elements.

‍

This marked the initial design phase. Note that design wasrevisited as needed throughout development and other phases.

Development

Set up

When setting up the website, I created a styles page where I organised all the colours, fonts, and buttons. This streamlined development, as default values were pre-set. This facilitated a faster development process, enabling easy implementation of future changes that would affect the entire website at once.

Dynamic & static pages

SEO

Final output

The final output is a testament to the thoughtful setup and design decisions made during the development process, resulting in a website that seamlessly combines aesthetic appeal with user-friendly functionality.