Concretto
Building Material -
Breeze Blocks & Brick Wall Tiles
Live Project :
Multiple Devices Responsive Website
Client : Concretto Manufacturers
Timeline: 5 Weeks
Role : Research & UX/UI
Introduction
I Believe that “Construction Materials Online” is the primary utility in our country for getting core substances for construction. To get licensed substances on time to keep away from intermediary commission or price negotiation as a website itself creates authentication.
I created this project as part of my UI UX design path as a volunteer. The Problem statement for this project has been supplied by myself taking into consideration designing appropriate services for people (Builders, Owners, Contractors, etc.,).
My function in this project was both UI & UX designer as I did the entirety end-to-end, from doing user studies to creating final designs and usability tests.
Concretto
Background
Concretto –
Concretto places sustainability at the heart of its operations. With over 40 years of expertise, Concretto offers eco-friendly alternatives to traditional terracotta, including Concrete Breeze Blocks, Wall Cladding Tiles, and Panels.
These products replicate the beauty of terracotta without depleting topsoil, ensuring both durability and environmental responsibility. Concretto is committed to providing innovative, high-quality building solutions that contribute to a greener future.
Design Challenge
Educating Users on Eco-Friendly Benefits:
Simplifying the communication of environmental advantages over traditional materials through interactive infographics and comparisons.
Sustainability Transparency:
Clearly presenting detailed information on product sourcing, manufacturing, and environmental impact to build trust and promote Concretto's sustainability efforts.
Easy Communication:
Ensuring seamless communication channel for customers to inquire about products.
Easy Navigation:
Creating a user-friendly interface with clear menus and easy access to product information, sustainability details, and support resources for a smooth browsing experience.
What I Accomplished
By addressing these UX design challenges, Concretto can achieve:
Reliability: A website itself creates authentication of the brand.
Enhanced User Education: Clear, engaging content helps users understand Concretto's products' environmental benefits, leading to more informed purchasing decisions.
Improved Customization Experience: A seamless and enjoyable customization and visualization tool, that allows customers to design and preview their projects confidently.
Increased Trust and Transparency: Easy access to detailed sustainability information builds customer trust.
Streamlined Communication: Effortless customer interaction through multiple communication channels, ensuring quick responses to inquiries and improving customer satisfaction.
Intuitive Navigation: A user-friendly website that makes it easy for visitors to find the information they need, improving overall user experience and increasing conversions.
My Role
Design Strategy
Research
Problem Solution
Wire Frames
Information Architecture
Empathy Maping
Usability Testing
User Flow
Prototyping
Competitive Analysis
Visual Design
Discover
User Research
Secondary Study
Competitive Analysis
User interview
Define
User Personas
Empathy Map
Data Analysis
02
01
Ideate
Brainstorming
User Flows
Road Maping
Design
Style Guide
Concept Development / Sketches
High-Fidelity Wireframes
Prototyping /
Prototype Testing
03
04
Testing /Deliver
User Interface Design
Final Product Testing
Handover
User Feedback
Adaptive Design
05
01 Research
Target Audience
Builders
Civil Engineers
Contractors
Material Traders
Structure Engineers
Architects
Interior Designers
Locals
Defining Research Goals
Identify challenges customers face when selecting building materials, particularly eco-friendly ones, to ensure the website addresses these concerns.
Explore how much users already know about sustainable materials like Concretto’s, to determine how much educational content is needed.
Research how users typically search for and discover building materials online, so the website can be designed to facilitate easy product exploration
Assess how users trust an online platform and how to present transparent information that builds credibility.
Research how easily users can navigate the site and find information about products and customer support.
Understand users’ preferred methods of communication for building materials ordered in large quantity.
Acknowledging Asumptions
"As the only researcher on this project,
I wanted to be aware of any biases I might have from the start.
To do this, I listed my assumptions about the problem. I understood that these assumptions could be changed or corrected as the research continued. These are,"
My Assumptions:
-
Users Prioritize Sustainability: Assumption: Users who visit Concretto’s website are primarily motivated by environmental concerns and prefer eco-friendly products.
-
Users Prefer a Clean, Minimalist Design: Assumption: Users prefer a simple, clean design with minimal distractions to enhance focus and usability.
-
Users understand how concrete products (like Breeze Blocks and Cladding Tiles) work and their applications in construction.
-
Users are comfortable navigating the website.
Secondary Research
Comparative Analysis
.jpg)
Understanding the Human Psyche
I even have carried out interviews with 08 potential users among the age group of 26–58. Which gave me a clean image of what my user desires and needs. I requested them a few preferred and undertaking associated questions.
Interview Goal 01
Are your customers mostly contractors, DIY enthusiasts, or architects?
Interview Goal 02
Discover the challenges users face when navigating websites for building materials and where they encounter friction in their buying journey.
Interview Goal 03
Assess how users interact with the website’s navigation and mobile usability to ensure a seamless experience across devices.
Interview Goal 04
Identify the key factors that influence a user’s decision to purchase building materials, such as price, quality, or delivery options.
Interview Goal 05
How comfertable are they with techno , Determine how knowledgeable users are about the products being sold and if they require additional guidance or educational resources.logy ?
Interview Goal 06
Learn how users prefer to communicate with suppliers (e.g.email, phone) and how they expect support during their purchasing process.
Key Takeaways
1. Understand the Target Audience
Customer Needs: Are your customers mostly contractors, DIY enthusiasts, or architects? Understanding their specific needs and how they search for products like Breeze Blocks will inform your design.
Professional vs. Casual: Depending on whether your audience is primarily professionals or casual buyers, the tone and layout of the site may vary. Professionals will likely prefer a straightforward, information-heavy design, while casual buyers may appreciate more visual guidance and ease of use.
2. Simplify Navigation
Easy Product Discovery: Breeze blocks can come in many different types (sizes, textures, colors). Make sure to categorize the products clearly—such as by type, use case (e.g., decorative, structural), or material—so users can find what they're looking for quickly.
Clear Menu: Use clear headings and subheadings in your navigation bar to simplify browsing. Consider adding filters like size, price, or application (indoor/outdoor), and a search bar to let users find products directly.
3. Simplify Navigation
Easy Product Discovery: Breeze blocks can come in many different types (sizes, textures, colors). Make sure to categorize the products clearly—such as by type, use case (e.g., decorative, structural), or material—so users can find what they're looking for quickly.
Clear Menu: Use clear headings and subheadings in your navigation bar to simplify browsing. Consider adding filters like size, price, or application (indoor/outdoor), and a search bar to let users find products directly.
4. Visual Design
Industrial or Minimalist Style: Since you’re selling construction materials, aim for a clean, professional look. A minimalistic design with subtle industrial touches (e.g., muted colors, concrete textures) will align well with the product’s nature.
Contrast and Readability: Ensure high contrast between text and background colors. Breeze block materials can sometimes have a subtle color palette, so you’ll want to ensure the content is still easily readable.
5. Mobile Optimization
Responsive Design: Ensure that the website is fully responsive on mobile devices. Many contractors or users might be browsing while on the go, so make sure they can easily navigate the site on smartphones or tablets.
Touch-Friendly: Make sure buttons and interactive elements are large enough to be clicked comfortably on smaller screens.
6 User Journey and Conversion
Clear Call to Action (CTA): For product pages, make sure the “Add to Cart” or “Request a Quote” button is easy to find. If your products aren’t directly purchasable online, consider a prominent "Request a Quote" or "Contact Us" button.
02 Define
Breaking Down The Problem
"Having done my research,
I wanted to break down all the existing challenges users were facing.
I created problem statements based on user needs and turned
each into a User Persona to explore potential solutions for my website/app.
Persona 01
"I buy materials online to save time, but I’m picky about where I get them from. Quality matters to me, so I always stick with suppliers I trust and make sure they deliver on time."
Age:42
Job : Businessman
Education:Civil Engineering
Location : New Delhi
Meet Rajesh Kumar,
Owner of a small, growing construction business in Delhi, specializing in residential projects and home renovations. With 12 years of experience, he’s built a reputation for high-quality work. Rajesh prefers buying building materials online to save time but is cautious about choosing suppliers. He values transparency and often contacts suppliers directly to ensure product quality and reliability, seeking trusted sources for everything from cement to plumbing fixtures.
Pain Points:
-
It needs reliable and timely delivery to avoid project delays.
-
Wants high-quality products that meet building codes from trusted suppliers.
-
Prefers a seamless online shopping experience with clear product descriptions and shipping information.
-
Frustrated by late deliveries, complex return processes, and quality inconsistencies.
-
Experiences long wait times for customer service and struggle with high shipping costs.
Goals :
-
Buying materials online saves time compared to visiting physical stores.
-
Seeks bulk deals or discounts on high-quality materials to keep profit margins intact.
-
Look for trusted suppliers with high-quality materials that meet building codes and don’t compromise on quality.
-
Values a clear and easy-to-navigate website with detailed product descriptions, stock availability, and shipping information.
"I’m 65, not very tech-savvy, and just moved into a new home. My architect recommended breeze blocks, but I’m unsure what they are, how to buy them, or which ones are right for my project."
Age: 65
Job : Shop Owner
Education: Retired Professor
Location : Ludhiana
Meet Arvind Deol,
Arvind is a 65-year-old family man who recently moved into a new home with his wife. He has no prior knowledge about building materials and isn’t very tech-savvy. His architect has given him a design that includes breeze blocks, and now he needs to purchase them. Arvind feels overwhelmed and unsure about where to start, as he’s not comfortable with online shopping or understanding construction materials.
Pain Points:
-
Unfamiliar with building materials like breeze blocks and technical terms.
-
Overwhelmed by the variety of options and the complexity of online shopping.
-
Concerned about making mistakes and wasting money.
-
Struggles to find simple, easy-to-understand explanations.
-
Needs assistance with delivery logistics and handling materials.
Goals:
-
Understand what breeze blocks are and choose the right type for his project.
-
Find simple, clear product information and trusted suppliers.
-
Make informed, budget-friendly purchases without wasting money.
-
Have a smooth, easy-to-use shopping experience.
-
Get reliable customer support for any questions or concerns.
Persona 02
-
Provide guides or infographics that explain how to incorporate serums into skincare and hair care routines, emphasizing their unique benefits.
-
Personalise Recommendations to avoid dermatologists.
-
Motivation to adopt a routine and keep track.
-
Real-time reviews.
-
Showing benefits and importance of Ayurvedic body care products.
-
Ai-powered skin analytics.
-
Getting detailed information about the products.
-
Create charts that compare serums to other product types, showing why serums are superior for specific needs.
-
Giving rewards to keep users engaged
Key Features
03 Ideate
04 Design
Repeated Slideshow for engaging visuals
Homescreen
Catchy Visuals
Featuring important Committed team members
Menu Bar
Clean Branding
Prominent menu button for easy access
Contrast selection button
Minimalist yet playful visuals
Clear cut information
Product details
Easy scrollable product grid
Easy catalogue download button
Downloaded PDF
The contact space is clean and
well-organized, providing all relevant information for easy access.
Wireframes
I created wireframes to map out the basic layout and structure of the interface. They help me focus on functionality and user flow, test ideas early, and communicate effectively with stakeholders, saving time in the design process.
