Ideapaint is an innovative product that transforms any ordinary surface into a canvas for creation and a space for collaboration. It was mainly the message, not the medium that informed the design of the site, down to the UI. The doodles and inspiration that are created on top of IdeaPaint’s products are human, relatable and inspiring.
The Design Exploration is essential to my process and helps to define the visual language for the new project. This is something that I’ve evolved over the years, taking the philosophy of style tiles and adding context, interaction, user experience, tone of voice and brand story.
After talking to the client and understanding their product and their business goals, we can start exploring ways to bring the best out of the brand and get it onto the website. This gets us aligned on the big picture early and lets us make changes efficiently.
Once we iron out the visual language of the site, we start adding elements to a pattern library. A pattern library contains all elements used on the website, provides guides for interactions and helps the team maintain consistency and gain efficiency in front end development. Initially created in Photoshop, the patten library is handed over to front-end development to bring the elements to life. The pattern library is a living, breathing document that grows as the project continues.
How do you communicate all of the things that a plain bucket of white paint can do?
We came to one conclusion: It’s not about the product itself, but rather what the product can do that is inspiring to potential customers. We thought a lot about the ways customers use IdeaPaint so we could make those activities come to life on the site.
We reimagined the homepage as a continuous wall that the visitor can swipe through to explore the infinite possibilities that IdeaPaint can create. Instead of showing the product itself as the hero, the fun and collaboration that comes with the IdeaPaint experience became the hero.
Buying paint poses some unique challenges.
How do we successfully show the differences between similar products? How does the customer know how much paint to buy for their space? We showed the differences between the different type of paints (Create vs Pro) with short copy and illustrations. We created a calculator and a guide to measure so that customers are reassured that they are buying the right amount.