New B&B Electric Services Website Creation
Project Overview
The new company, B&B Electric Services, is a large-scale electrician company. They provide services for governments, food processing plants, mining operations and more. The idea of the website was to target the audience that is associated with these large-scaled projects.
The site needed to show professionalism while building the brand of the new company. With large-budget clientele, the design needed to mimic trust and perfectionism to persuade this audience type.
Role:
Lead Designer
Co-Project Manager
Date:
08/2021 – 01/2022
Tools:
Adobe XD
Adobe Photoshop
Slack
Asana
Google Meet
Dropbox
1. Website Workshop
My role as the designer starts here at the project workshop. I meet with the client and discuss their goals for their company. What is the main function they are looking for from their website?
I carefully lead the conversation while building trust with the clientele. These initial meetings are very Q and A based, but it gives me an overall feel for where to start the research portion.
During the website workshop, I was able to facilitate the discussion and found that:
- Previous clients are individuals between the ages of 30 to 50
- The target audience typically work for large natural resource companies, or government associations.
- Typically the client is often comparing prices of multiple contractors.
- Content must be easily scannable but still hold detail.
- The main goal of the website is to generate leads for new projects.
Problem Statement:
Utilizing qualitative data gathered through the facilitation of the project workshop, I was able to diagnose the problem statement.
B&B Electric Services needs a calculated design that pushes their target audience to sign up for a quote. The site needs to highlight the core areas of service in a clear, professional design that is easy to read at any time of the day. All while building credibility and trust to the B&B Electric Services brand and the company’s values.
2. Develop The User Perspective
After the project workshop, it is important to really nail down your user persona before going into the design process.
Utilizing resources such as https://www.gminsights.com/ to analyze what type of electrical projects are going to be the biggest sellers. These findings impact the type of target market we wish to keep in mind while designing.
View the information collected below:
User Persona:
Gregory
35 YO | local government council manager
biography:
Gregory loves his city and wants the best for his community. His job is busy as he oversees lots of moving parts. Time management is essential to Greg to ensure efficiency.
GOALS:
motivations:
Finding the best qualified contractor for the best budget will be praised by not only the community for the quality, but also show that he is doing a great job as a professional.
3. Research and Design Inspiration
Next on the design agenda is to identify the colors, fonts, and additional inspiration before really piecing together the established theme.
I begin the researching phase by diving into the color scheme. What colors would work best with the logo? What colors are associated with construction or in this case, electricity? By utilizing tools such as coolors.com and analyzing other sites, I successfully found a rough draft of the colors that were to be used in the theme.
I then start the same process for the font. This process includes a cycle of questions and answers to decide the final font. For this scenario, we needed easy to read fonts that gave a “strong” appearance.
The final assets can be seen below:
Design Assets:
4. Generate The Theme Aesthetic
With the research gathered and learnings found about this company. I begin the design process.
Our research indicated that our main goal is to gently push the audience to sign up for a quote. In order to achieve this goal the theme characteristics need to aid in answering the problem statement.
We start with designing the home page. This allows me to generate a general feel for what the rest of the site is to mimic. The home page is then presented to the client where I explain the story behind the design.
5. Create The Final Solution
After the home page is approved by the client. I then follow the established site map and create the remaining templates. With the research in mind, I design and prototype the templates in Adobe Xd to function like a working website. Majority of buttons are linked and all hover features work so that both the client and the development team are able to understand how a certain portion functions.
The fully functional prototype is then sent to the client without our team to walk them through the functions. We suggest that they send this prototype to a handful of individuals so that some usability testing can occur before the site is put into development. This is often the longest process since it involves tweaking the pages, and perfecting the usability portion.
After working with the client, or performing additional research to tweak the design, the prototype is sent to our development team. Working with outsourced developers can be cost-effective and yield high-level results, but working around the communication barrier can sometimes prove its challenges. To overcome this obstacles, I have developed a document where I can take screenshots, provide videos, and external examples of how a certain feature should function. Innovation is necessary when ensuring the prototype can come to life with its fullest potential.
Final Prototype:
2-col template
about
bbelectricserviceshome
blog roll
contact
Home
industry
Our Service
single blog
6. Post-Design Process
At my current organization, I also oversee the rest of the production process. Design is important but it is crucial that the full features of the prototype are translated into the development of the site.
- Set up the domain with our hosting provider, Flywheel. I can then create the staging site.
- Create a design-to-development document. This document explains each block’s functionalities and/or links that may not have been fully understood through the XD preview. This prevents confusion with the development team, and increases efficiency.
- Send the blank staging site, the XD Preview, the XD Source File, and the design-to-development document to our development team.
- Monitor the timeline of the site when it is in development through deadlines and communication with our development team coordinator.
- Perform a functions tuning list once the beta site is finished. This internal check through essentially makes sure that all functions of the site are working correctly and that nothing is broken. In addition to checking for function errors, the mobile, tablet, and desktop sizes of the site are corrected at this time to ensure no pages are broken.
- Create and deliver content snare requests to the client once the internal checklist is complete.
- Work with the development team to ensure all the content is entered properly.
- Perform an internal tuning list that checks for broken links, another function check through, missing text, or watermarked images.
- Collaborate with the client on any missing components such as missing content or images.
- Deliver the final external tuning list to the client and coordinate with the development team for final touch ups.
- Push the beta site live via flywheel.
- Facilitate the training process for the client so that they get a basic understanding of how their website works.