Discovery
Content Strategy
Visual Strategy
Final Design
Results
Discovery
Content Strategy
Visual Strategy
Final Design
Results

A website fit for an artist

( a case study )

The challenge

Petillo Guitars makes and repairs some of the finest guitars in the world. Their list of clients includes some of the biggest names in music. Unfortunately, their website was outdated and didn't properly show how their expertise and craftsmanship set them apart from their competition.

The solution

Over the course of a couple of months, I worked together with them to design and build an entirely new website. By giving the business a brand new online presence (one that is now mobile-friendly), e-commerce capability, and a way to showcase their talent and unique story, Petillo Guitars is now prepared to attract new business and increase revenue.

Blue guitar

Discovery

Good design follows good content

As with all things, the first step was understanding the problem, We discussed, at length, what they wanted their new website to accomplish as well as their business, history, and goals for the future. Afterward, I scoured the internet and their social media for as much supplemental information I could find. This helped me understand how unique their history is and the quality of their work.

It became clear early on that the most effective way to show how inspired and talented these craftsmen are would be to let the work speak for itself. So, I took a number of the most impressive images from their social media accounts and enhanced them each according to what they needed to make them really pop.

After gathering the information and enhancing the images, I had what I needed to mold the content into the solutions they needed. Now it was time to figure out the structure of the site.

examples of Petillo's work

Content Strategy

User-centric design

A good site map takes everything a business wants its customers to know and structures it in a way that makes it easy for the user to find. The best ones take this user-centric approach a step further and try to anticipate the customers' needs and guide them to where they want to go with the least amount of friction possible.

Petillo Guitars wanted the new website to show their:

  • range of services
  • consistent quality of work
  • unique history
  • products and merch available to purchase online

They also requested:

  • an email form as a way to reduce phone calls coming into the shop
  • an updated look for the whole site
  • the site to be mobile-friendly

To figure out the users' needs, I used the combination of competitive analysis of other websites in their field and the process of creating personas for a diverse mix of potential clients in order to consider the needs of an array of potential customers. By doing this, I gained a sense of what people visiting the site would be looking for.

The marriage of both the clients' and the users' needs resulted in the site map shown below.

Examples of questions about the new websiteSite map structure

Visual Strategy

Finding the feel

Now that the website's content structure was established, it was time to create its look and feel. This involved creating wireframes to show what the site will look like from a structural standpoint. It also meant deciding on a color palette, fonts, spacing, etc.

This exploratory process is an important one b/c it exposes ideas that do not work for a fraction of the time and money it would cost to remedy them later on.

Wireframe of home pageWireframe of about pageWireframe of craftsmanship pageWireframe of gallery pageWireframe of merch page
Wireframe of the product pageWireframe of shopping cartWireframe of contact form

Color palette

The 60 / 30 / 10 split is a proven method for balancing the dominant, secondary, and accent colors

Color palette

Typography

H1 Alex Brush:
variable
H2 Playfair Display:
64 medium
H3 Playfair Display: 32 medium
Body text: Poppins 16 light
Poppins 20 medium
(button not fully functional)

Final Design

User-centric design

After an intense process of experimenting with competing layouts, themes, visuals, and content, the overall design emerged. Now it was time to incorporate all the best ideas into a cohesive and beautiful design across every page.

(Building the actual website presents a new range of possibilities. These choices are not presented here, but can be seen on the website).

The final design of the home pageThe final design of the about pageThe final design of the craftsmanship pageThe final design of the gallery pageThe final design of the merch page
The final design of the product pageThe final design of the cart pageThe final design of the content form

Results

It's all about the process

This was a challenging yet rewarding project to work on. From a strategic standpoint, the toughest challenge was figuring out how to deliver on the Petillos' request to emphasize the custom guitar aspect of the business over the repairs without neglecting the repair side of their business. Even though repairs brought in most of the income, they wanted to shift that balance in favor of increasing their custom work.

The solution to prioritizing their custom work while still representing their successful repair business was to provide examples of both on the page that mentions their services while displaying examples of their custom guitar work on every other page. This way the repairs are represented, but the users see examples of their custom work throughout the site.

There were plenty of other challenges, but they were all overcome by using open communication with the client and a solid design process.

Each website has its own requirements, depending on the business, intended audience, and unique problems that need solving. Investing in the process laid out in this case study is what will make a website, and the business that owns it, stand above its competition.

Example of the original websiteExample of the original website
Original site
The final design of the home page
Redesigned site
Visit the siteBack to portfolio

Note: This is a concept piece. All images are real examples of Petillo Guitars' incredible work, but everything else is a mockup and does not represent Petillo Guitars.