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
Naturally Tiles 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.
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
- The dynamic tile product pages was set up using the CMS so content loading for all current projects as well as any new products would be easy to do so for the client.
- A filter was set up so there were different product pages for specific tile types, improving users ability to find the tiles they wanted.
- Static pages we’re created, the home page having some dynamic elements such as an Instagram link so when a new Instagram post was uploaded it would appear on the website.
- Implemented design elements and layouts that adapt to different screen resolutions, enhancing user experience.
SEO
- I added meta tags, headers, and other SEO-friendly elements for improved visibility on search engines.
- Conducted keyword research and integrated relevant keywords strategically within the content to enhance search engine rankings.
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.
