UX Design, Web Development

Naturally Tiles

Working with the client to design and develop a website that gets more clients through the door.

Date
2023
Role
Product Designer
Web developer
Software
Figma, Webflow
See live site
See live site

Project overview

Summary

Naturally Tiles, a boutique tile company based in Christchurch, specialises in importing premium porcelain tiles from exclusive Italian suppliers. After three years with the same website, they sought a refresh that would better showcase their high-quality products. Their goals included a visually appealing design that reflected their brand’s premium nature and the flexibility to easily update elements like colours and fonts. Additionally, they required a robust, user-friendly Content Management System (CMS) to streamline the maintenance and updating of their product catalogue.

Outputs

•A newly designed, professional website that addresses all the client’s requirements.
•Development of the website on Webflow, leveraging its flexibility and user-friendly Content Management System (CMS).

Outcomes

•The client has a visually appealing and modern online presence that enhances their brand image.
•The client can easily manage and update the website independently, improving efficiency and reducing reliance on external support.
•The website effectively communicates the quality and exclusivity of the client’s products, attracting more customers and boosting engagement.

Research

Understanding business goals & client needs

Defining the goals of the redesign and understand what success looks like.
To do this I spoke with the business owner to understand pain points, objectives, and key conversion goals. On top of this I did an analysis of existing website performance, user behaviour, and search ranking data to identify problem areas.

Competitor analysis and aesthetic inspiration

I conducted a thorough analysis of similar websites to gain insights into their design aesthetics and user experiences. Additionally I evaluated the strengths and weaknesses of competitor websites to inform the design strategy for the new project.

Design process

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

I created a styles page in Webflow, organising global elements such as colours, fonts, and button styles. This ensured consistency and efficiency during development while allowing easy updates to branding elements.

Dynamic & static pages

  • Developed dynamic tile product pages using Webflow’s CMS, enabling the client to easily add, edit, and manage products.
  • Created static pages such as Home, About, and Contact, incorporating dynamic elements like an Instagram feed that updated automatically when new posts were published.
  • Ensured that all design elements and layouts were fully responsive, providing an optimal experience across different devices and screen sizes.

CMS & Content Management

  • Built a scalable Webflow CMS that allows the client to easily add, edit, and manage new tile products without needing technical knowledge.
  • Set up dynamic product templates to ensure consistency across all product pages.
  • Created a structured CMS collection that categorises tiles based on material, colour, and usage, making it easier for customers to navigate.

SEO

  • Added meta tags, headers, and structured data to improve search engine visibility.
  • Conducted keyword research and integrated relevant keywords strategically within the content to enhance search engine rankings.
  • Optimised page load speed by compressing images and minimising unnecessary code.

Testing & Quality Assurance

  • Performed cross-browser testing to ensure consistent functionality across Chrome, Safari, Edge, and Firefox.
  • Conducted mobile responsiveness tests to verify seamless user experience on different screen sizes.
  • Debugged and refined interactions to enhance performance and usability.

Handoff

Once the website was fully developed, I conducted a comprehensive handoff session with the client to ensure they could confidently manage and update their site independently. I provided a guided walkthrough of the Webflow CMS, demonstrating how to add new tile products, update images, and modify text. Additionally, I created simple step-by-step documentation outlining key CMS functions, enabling the client to reference it whenever needed.

Final output

The completed website successfully blended aesthetic appeal with user-friendly functionality, delivering a premium online presence that met the client’s business goals. The Webflow CMS allowed the client to manage content effortlessly, while optimised SEO and responsive design ensured better engagement and visibility. The project’s structured approach, from research and design to development and deployment, resulted in a highly effective and scalable solution.

Discovery

To gain a comprehensive understanding of the Tenancy Bond System’s challenges, we used a combination of qualitative research methods and service design tools. This process enabled us to identify pain points, map the current state of the service, and uncover opportunities for improvement.

01

Current state service blueprint

I created a detailed service blueprint to map out the current state of the bond system. This visualisation captured the end-to-end user journey, internal processes, and supporting systems.The blueprint became an invaluable tool for stakeholder engagement. It facilitated discussions by clearly illustrating pain points, inefficiencies, and areas requiring further clarification.For example, when presenting the blueprint to stakeholders, we highlighted the lack of transparency in the bond processing stage, prompting them to provide additional details about internal workflows.

02

Current state issues

Paper-based and manual processes.

Inconsistent, poorly designed forms, and limited transparency.

Long processing times. Impacted by the amount of forms being filled in incorrectly.

Expensive and slow to update due to legacy technology.
Terminology not always understood

03

User Interviews

I created a detailed service blueprint to map out the current state of the bond system. This visualisation captured the end-to-end user journey, internal processes, and supporting systems.The blueprint became an invaluable tool for stakeholder engagement. It facilitated discussions by clearly illustrating pain points, inefficiencies, and areas requiring further clarification.For example, when presenting the blueprint to stakeholders, we highlighted the lack of transparency in the bond processing stage, prompting them to provide additional details about internal workflows.

04

Call centre data analysis

Using qualitative analysis, I reviewed historical call centre data to identify recurring themes and patterns in user complaints. This helped us quantify the most common pain points and validate insights gathered during interviews.

05

Support call listening

The team listened to approximately 100 live or recorded call centre interactions. This observational research method allowed us to directly hear user frustrations and understand their questions in real-time.

06

Engaging with call centre staff

In addition to analysing call data, we conducted sessions with call centre staff to gather their insights and identify recurring trends. Call centre staff had first-hand knowledge of the most common user issues and provided valuable context about the operational challenges they faced, such as dealing with incomplete or incorrect forms and answering frequent questions about bond statuses. This engagement also helped validate the themes identified during our analysis of call data and call listening sessions.

Other projects