Arizona Paint Supply Website Design Process

Arizona Paint Supply is a Benjamin Moore authorized retailer located in Scottsdale, Arizona, looking to provide Benjamin Moore paint to professionals and DIYers alike. AZ Paint Supply is owned and operated by a father-son team that wanted to give the Phoenix area a superior paint store that provides personalized service, expert advice, and superior products.

AZ Paint Supply contacted our experienced Phoenix web designers at Nuanced Media to create a website to showcase the Benjamin Moore product lines and to connect with homeowners/do-it-yourselfers, interior designers, and contractors. They wanted a user-friendly site that would provide information to their customer base and to allow customers to contact and schedule appointments with paint experts. The three-month collaborative design process was fun and exciting for all involved.

Scope of Work

The design and development of the AZ Paint Supply website were straightforward and utilized seven unique page layouts.

Research
Before design began, research was done on the paint industry, along with research on websites that accomplished similar goals and had similar audiences to that of the client’s. The goal behind this design process ultimately was to create a balance between the client, audience, and design.

Because AZ Paint Supply is an authorized Benjamin Moore Retailer, Benjamin Moore’s (BM) website was the first one looked at. The AZ Paint Supply website needed to complement and subtly mimic certain layouts on the BM site in order to connect the two and remain consistent with the brand.

Outside of the retail paint industry, a construction website, an architecture website, and a national home improvement store website were looked at for specific elements and functionality.

Inspiration Board
The inspiration board was created to show functionality inspiration from the research. This is also where style and ‘feel’ were established.

Style Tile
AZ Paint Supply came to Nuanced Media with a full brand guideline, which created a wonderful foundation for the style tile. The colors were pulled directly from the brand guideline and secondary colors were created based on the primary colors of the logo. The fonts were chosen to complement the logo and for easy readability on the website. The style tile also displayed functionality of buttons and text links in hover and inactive states.

Wireframes
There are two versions of wireframes we always complete before moving on to mockups. The first set of wireframes are functional wireframes. Functional wireframes are created in order to show the general layout and placement of elements on each templated page. The second set of wireframes are called advanced wireframes. Advanced wireframes are created to give the client a better idea of how design begins to play a role in the process, without jumping directly into the mockup phase. Since user experience is a major component of design, the wireframes go through various rounds and edits to make sure the user experience is seamless and easy. A hierarchy is created for information and to show importance. Based on that, we determine where content, imagery, and calls-to-action should be placed in order to effectively lead users through the website.

Mockups
The mockups are where the design addresses some of the purposes of the website that the functionality and hierarchy cannot. This is where the feel and emotion of the website are established.

Ultimately, AZ Paint Supply isn’t selling paint. They are selling a beautiful faux-finished wall over a fireplace, a nursery for a new baby, or the feeling you get when walking into a warm library with deep, forest green walls. The design utilizes the idea of painted walls. Large teal paint strokes are used as the background in some areas throughout the site. These “walls” are visually interesting and convey the beautiful texture of paint. Initially, these strokes were designed to move with the page scroll, but when mockups got to development, it was suggested that the paint stroke images remain fixed, while the content above it moved. In changing how the stroke laid with the other content, depth was created. Now the “walls” are in the background and the content sits in the foreground, much like an actual room.

After the paint stroke direction was established, the rest of the site’s details could be created. Overdoing the paint theme in the details was something that was carefully considered because the professionalism and cohesiveness of the site was a priority. Ultimately, the paint stroke elements were used in a few places; behind the text on hero images, as negative space in icons, and as the background in specific blocks of content.

Challenges

One of the biggest challenges of the site was designing without the content. Designing without content meant a few adjustments had to be made during development as we received content. Initially, the paint strokes in the background were intended to frame paragraphs of content because it’s hard to read body copy when it’s situated over an image. The body copy was laid out so the text could be surrounded by the teal paint texture, without the two ever touching. After content creation, this had to be reworked and a white transparent background had to be applied behind the text in order to pull it off of the texture and improve readability.

Final Product

Arizona Paint Supply needed a beautiful website to show off their paint and connect with existing and potential customers. After all was said and done, the client walked away with a complete custom website that stunningly displayed their products and connected them to their customers. Estimate the costs of your own custom website design using our Website Cost Calculator.