Metro & RNR

Website Redesigns for Metro Auto Rebuild and RNR Automotive Refinishing.



Both Metro Auto Rebuild and RNR Automotive Refinishing needed their auto body shop websites redesigned. The sites were unfinished and inaccurately reflected the brand that the shops were trying to communicate to their customers.

The shops looked great in person, but their web presence risked turning away potential customers. The websites had to be redesigned so that they could be clear, simple, and viewable from mobile devices.




Summer 2014


1 Month


Metro Auto Rebuild | RNR Automotive Refinishing


Research | Ideation | Wireframing | Web Design | Photography | Graphic Design | Implementation | Writing


Axure | Photoshop | Illustrator | Squarespace | Camera


Metro Auto Rebuild

RNR Automotive Refinishing


Metro and RNR's online presence was suffering thanks to poor site design and average google and yelp ratings. The shops were aware that their sites and online reviews could be turning away customers who might be searching for repair shops.

Many collision repair websites, rather than cater to their customers' needs, are plagued by inelegance and crowded, useless information that tends to boast about how accomplished or reliable they are. The new websites for Metro and RNR needed to reduce fluff, immediately provide visitors with contact information and appointment scheduling, and have enough quality photos to give customers a clear image of the shops. 

The old Metro Auto Rebuild website

The old RNR Automotive Refinishing website


The first step was to learn more about collision repair shops in general. While I had previously visited and done some labor work at an auto body shop, I was not aware of everything that they offered, nor how they functioned or viewed themselves. I evaluated a number of collision repair websites, dissecting what they did, said, and what made one better than another. Many sites were poorly done, but there were a few, such as Juanita Collision Center and Abra Auto Body & Glass that gave me inspiration for how to structure the FAQs or the Repair Process diagram.

I went in-depth to understand what Metro and RNR wanted for themselves and what they actually needed for their customers. This research portion involved sketching out a user flow (accident -> website -> shop -> repaired vehicle), visiting the shop, asking the clients questions, and creating personas to represent the types of people who might be visiting the shops.



Persona: Michael

Persona: Jennifer

Persona: John


It was my responsibility to recreate the entirety of both websites by looking at what needed to be changed and updated. I went through a series of sketches, gathered reference images from Pinterest and Awwwards, and produced a one-page styled wireframe to plan out the design and layout of information.

All images were shot by me at both shop locations, and the pages' text was a combination of what the sites already had, information from clients clients, and useful bits from other websites. Once the wireframe was finished, all that remained was to bring the design over to Squarespace to tweak and refine it until it matched my design goals.









The final websites can be seen below or by clicking on one of the two images. After wireframing Metro and RNR's websites, I brought everything over to Squarespace, where I knew that I could easily implement my design and rearrange elements should I have any second guesses. Squarespace allowed me to ensure that both sites and their code would be constantly supported and editable by other individuals should need ever arise.

The sites have been simplified and updated with better images and clearer contact information. Anyone with a damaged car can quickly look up either shop on their phone or desktop computer to schedule an appointment and see what their businesses have to offer.


The new RNR Automotive Refinishing website

The new RNR Automotive Refinishing website

The new Metro Auto Rebuild website

The new Metro Auto Rebuild website