ANGELES ELECTRIC REDESIGN
Role
Designer + Webmaster
Client
Angeles Electric Inc
Year
2024
OVERVIEW
Angeles Electric is a small, family-owned electrician business that has been a staple of their community of Port Angeles, Washington for decades. Although their shop has been in operation for nearly 70 years, their business has largely operated solely by phone and word of mouth. They created their first web site in 2011 but it was very rudimentary and hadn’t been updated since. They reached out to me to help them do a complete overhaul of their online presence. I built them a new site from scratch using WordPress and redesigned their branding to make it responsive across screen sizes.
ROLE AND DURATION
Since this was a freelance project, I was the sole designer and webmaster for this entire project. The site was completed over the course of about 2 months. They reached out to me in August 2024. I completed their branding that same month and by the end of September the site went live.
01
PHASE ONE: CONSULTATION
When Heidi and Ken of Angeles Electric first reached out to me, I sat down with them to discuss their goals for the website and what platforms they were currently using. At the time, the only places they were online was their website and google maps. Additionally, they didn’t have a way to accept online payments from their customers. The majority of transactions were being done through checks or in person with a credit card reader.
In order to help modernize their business, I thought it would be best to start from scratch and create a digital strategy for them that made sense for their business needs.
ORIGINAL WEBSITE
Their previous website was built in 2011 using an integrated site builder that was part of a marketing platform they were subscribed to called ‘Thryv Marketing’. While there wasn’t anything explicitly wrong with the platform, many of the features it provided were simply unnecessary for their business and going unused, especially for how expensive the monthly fee was. I decided it would be best to just move them to a more modern and modular platform like DreamHost + WordPress where they could have full ownership of their domain and have the freedom to add or remove features as they saw fit. It would also save them a ton of money in the long run.
GOALS
Since the majority of their business is run offline, their vision for what the new site should look like wasn’t exactly clear so they trusted me to design whatever I thought would work best. They did however have a few things they wanted to make sure were included:
1. PRICING
One of their biggest issues were prospective customers repeatedly calling the office throughout the work day solely just to ask about their rates. To fix this, they wanted to make sure that the new site had a featured pricing section that was highly visible and easy to understand.
2. SERVICES
On multiple occasions they have had customers that would reach out to them and book appointments then later request specialty services on the job site that Angeles Electric could not provide. For this reason, it was important for them to also have a clearly defined ‘services’ section where they could list the kinds of problems they can solve to avoid confusion and manage expectations.
3. DIGITAL PAYMENTS
While they were able to accept most payments in person from their shop, they did not have any way to accept payments online. This was a constant pain point for their business and led to a lot of chasing and waiting for payments from their customers. They wanted to find a way to easily implement an online payment system and provide options like Apple Pay without shaking up their current accounting processes too much.
4. GROWTH
Their long term goals for the site were to better position themselves against competition, attract more customers, and eventually get involved in things like digital advertising. However, Ken shared that he would also like the site to eventually serve as an educational repository for their community where they could share electrical safety content and tutorials specific to living in their region. These were all great ideas so I wanted to ensure that their digital foundation was solid enough that it could expand in whichever way they want it to with minimal upkeep.
02
PHASE TWO: BRANDING
When I began drafting ideas for the site, I had asked for copies of any digital branding assets they had to get started. Unfortunately, the original design files could not be found and the existing images were too low in resolution to be usable. Creating a framework for the site was proving to be difficult without any direction, so I decided it would be best to first focus on establishing a stronger visual identity for their brand.
The clients had a deep personal attachment to the original logo and were initially unwilling to make changes. However after some convincing, I vowed that I would keep the spirit of the original design and simply update it to make it more visible and flexible across print and digital formats.
ORIGINAL LOGO
Although the original logo design was charming, the file was simply not high enough quality to display clearly across multiple screen sizes. Aside from that, it also had a lot of elements and font types that were clashing and too hard to see on a screen. Below are some of the assets I was provided which included the blueprints from the construction of their sign and the design used on their T-shirts.
DRAFTING
In addition to vectorizing the design to make it more flexible in size, I wanted to revise the framing to give the elements more separation and lean into the mid-century aesthetic to develop a stronger visual identity for the brand. Since the original logo was pretty detailed, I also wanted to create some alternative versions to make it responsive depending on the context or platform it was being used on.
I began by building a Pinterest board of vintage signage and characters for inspiration that would help me curate the ‘nifty-fifties’ vibe I was going for. Once I found a few elements I liked, I combined a few ideas to give the old logo a facelift and establish a color palette.
When choosing colors, I wanted to stick with primary colors but change them slightly to faded, mid-century tones. This way, I could still match the colors of the sign on their storefront, but make sure they wouldn’t compete for attention when used as accents on a webpage.
FIRST DRAFT
Below are the first set of designs I sent over for the main logo. At this time, I was trying to settle on the level of complexity with decorative elements. After some feedback with the client, they loved the new design and chose to go with the classic, clean option on the bottom-left. Sometimes the best design is the simplest one, and they were right!
FINAL DESIGN
After settling on the final design for the main logo, I made a couple versions to be used in different scenarios either in digital or print formats. Below is the final style guide I made for Angeles Electric.
The featured logo was meant to be used on the homepage and things like documents, receipts, or advertisements. I also made an oval version to match the design of their shirt logo and to be used for signage or stickers. The collapsed banner version was to be used in thinner areas since the square ratio of the original made it hard to fit correctly in certain places – particularly in the navbar of the site. Finally, the social version was a further condensed circular version meant to be used for profile pictures because the electrician character became difficult to see below ~600 pixels.
Additionally, I felt that the fonts they were currently using were charming but a little too decorative to be used as title or paragraph fonts for a website. I chose to reserve those solely for the branding and instead picked a third, easily legible sans-serif typeface like ‘Outfit’ to improve accessibility for the site.
03
PHASE THREE: WEBSITE CONSTRUCTION
The final part of this project consisted of finishing the build of the site in WordPress, setting up their social profiles, and finding a way for them to accept digital payments. I got started by migrating their domain to DreamHost and installing the WPBakery + Salient plugins which I used to build the entire the site.
Since branding and styling were now settled, building out the site moved much faster since I had a clearer vision of how it should look. I kept things very simple, but made sure to design the site in way where new sections or features could be added in the future with ease.
