DCP - A product selector app and website for construction chemicals
“
Answer a few questions with pictures and get the right DCP product and how much to buy.
DCP
iOS and Android app and website, 2019 to 2020
About the project
Don Construction Products (DCP) makes construction chemicals such as tile adhesives, grouts and waterproofing, with 15 manufacturing locations and distribution to over 35 countries. In 2019 and 2020 we designed and built its product selector app for iOS and Android in English and Arabic, its website with a Product Selector section, and the backend behind both.
Project
DCP Product Selector App and Website
Industry
Construction Materials
Location
Amman, Jordan
Date
2019 to 2020
“
Client Request
DCP wanted an app that helps customers find the right product for their job, with calculators for quantity and grout color, set up for 9 countries and 4 languages.
DCP
App brief, February 2019
Design Pillars
Core UX Principles
Each question shows photos of the area or surface, like a bathroom or a pool, so people tap what they see.
A numbered bar at the top shows how far along you are, and the last step lists the suggested products.
Every suggested product has a Calculate Quantity button that turns your area into bags.
From the Brief
Built Around How DCP Sells
A Range per Country
DCP sells a different range in each country, so people pick their country in the menu and the suggestions follow it.
Recommended or Alternative
When two products fit, one carries a Recommended tag so it stands out from the alternative.
Grout You Can Preview
Customers photograph their own tile and try DCP grout colors on it before they decide.
The Challenge
Problem Statement
The Main Goal: Help Customers Pick the Right Product
DCP sells across 12 product categories, and the right adhesive, grout or sealant depends on the area, the surface, the tile and the joint. DCP gave us its selection tables for 5 application types, and the app had to turn them into short picture questions that end with a product and the quantity to buy.
“
Creating Solutions for Construction.
DCP Tagline
Don Construction Products
Our Approach
Solution
One Selector on Phone and Web
Wireframes, prototypes, the final UI and the build of the iOS and Android apps, the website and its backend, in English and Arabic. It is an example of our Mobile App Design work.
01 - Wireframes and Prototypes
Three rounds of wireframes and clickable prototypes between May and October 2019.
02 - The iOS and Android Apps
Five selection flows, three calculators, a catalog of 12 categories and saved results, in English and Arabic.
03 - Website and Product Selector
New pages in DCP’s orange and black, plus a Product Selector section with the app’s questions and calculators.
Before & After
The Blueprint & Evolution
English to Arabic
We designed the app screens in Arabic as well, mirrored for right to left reading.
Before: the home screen and suggested products in English.
After: the same two screens in Arabic.
Design
Key Features
Grout Color Preview
Take or upload a photo of a tile, crop it as 1:1, 1:2, 2:1 or mosaic, and see each grout color between the tiles.
Three Calculators
Tile adhesive, tile grout and joint sealant calculators turn an area or a joint size into bags or cartridges, using DCP’s own formulas.
Design System
Visual Identity
Bilingual Type
Francker, DCP’s brand font, for titles and product names, with Cairo for body text and every Arabic screen.
Color Palette
DCP orange #FF6C2F with black from the brand book, blue for action buttons and DCP’s division colors on the calculator icons.
Change Any Answer
A Selection Steps screen lists every answer so far, each with a Change link, so one answer can change without starting again.
Impact
Live in Both App Stores
Results for DCP
We built the apps, and DCP’s product selector is in the App Store and Google Play today, still with our photo cards, numbered steps and Recommended and Alternative product cards.
DCP
Result
By the Numbers
417 App Screens
iOS and Android, each in English and Arabic.
97 Website Layouts
Desktop and mobile pages, with the Product Selector.
4 Languages
English, Arabic, Bulgarian and Romanian.
Requirements
From Spreadsheets to Questions
DCP’s Own Selection Rules
DCP sent us a spreadsheet for each application type, matching products to each area, surface and tile, country by country. We drew each one as a tree of questions, wrote the requirements for the apps, the website and the content system, and then built all three. You can see some of the results below.
Final Showcase
The DCP Product Selector
