Last Updated: 02/07/2025
Back
Coordinator
- Design request comes in
- Contact Customer
- Create initial ticket to communicate to the customer
- Copy this document, and fill out the info needed: Base Doc
- Ask if they have a deadline (it shouldn't take the dept more than a month to do a design anyway)
- Make we have updated versions of their logo, in high quality.
Ask them for .svg format files of their logos, illustrator files, etc.
- Get any other company branding components they might have to send.
- Get any design direction.
- Get their primary services to be highlighted for service section.
- Make sure company hours are correct or collected.
- Get Financing info
- Double check if their office is a storefront or residential
- Get/Double Check License Number
- Check if they're co-op, nbn, have a chat wiget
- Go through customer hub elements to make sure up to date
- Check cities list
- Check company hours
- Check locations
- Check the Services & SEO
- Check social media links
- Click the "Schedule Redesign" button on the customer's PagePilot Listing
- This creates a ticket that sometimes Customer Support will assign to the coordinator, but you should go grab it.
- Merge your initial contact ticket with this new ticket
- It also creates the basecamp checklist for that company
- Add the following tasks to the ticket to assign out when their steps arise:
- Content First
- Create mockup
- Design Audit
- Build HTML
- SEO audit
- Set live
- Additional tasks will probably need to be added to the main ticket when more changes come in
- If the customer sends in emails that end up making new tickets (related to the redesign), merget them in with the ticket
- Any step during the process, where the customer replaces/removes/changes the content from the original google document, make sure those changes are noted in the google document
- The "Content First" task, assign it to the SEO team, linking the google doc you created.
SEO Dept
- Content department gets content together and hands it back to the coordinator
Coordinator
- Assign the "Create Mockup" task to the design dept, with a link to the google doc, and any resources needed for the mockup
Designer
- Design department does mockup of site (Time: 40 work hours or less)
Design Mockup
- Visit customer’s exiting website, and material provided for the customer's branding
- Check company's competitors to make sure your design is not the same
- In the file server, under "Customers" > "Customer Files" > "[company name] [CID]" > "Graphics", create a new folder, title it "2025 Redesign"
(Any graphics you get/use/purchase should be copied into this folder)
- In Figma, create a new design file under "Drafts", name the file "[company name] 2025 Redesign Mockup"
- Use the figma design template to as a reference of screen sizes required (1920px wide) with other tools, including what sections to design for on the global layout
- Design Mockup accordingly (Desktop & Mobile versions of both the homepage and subpage):
Use company branding!
- Use/Make color palette from company logo/branding materials
- Pull/Match fonts from logo/branding materials
- Prioritize using photos provided by customer of jobs and locations
- If financing is provided, make sure is on the site somewhere
Homepage
Header & Hero Section
- Company Logo
- Phone Number
- Menu
- H1
- CTA (At least one obvious button like "Schedule Service")
Body
- Create sections according to design document
- Primary Services should be close to the top
- Each section does not have to be full width
Footer
- Company Logos
- License Number
- Company Hours
- Address(es)
- Social Media
- Schedule Service link
- Payment Options
- Primary Service links, and other important links (like promotions, guarantees, employment, email us)
Global Layout
Header
- Company Logo
- Phone Number
- Menu
- Page Title
- CTA (At least one obvious button like "Schedule Service")
Subpage Elements
- ssButton
- CTA Bar
- Service Boxes
- Wide CTA Bar
- Bullet List
- FAQ
- (optional) section headings
Footer
- Same points for the homepage footer, majority of the time, it's the same footer, but if you want a unique subpage one, look for the same above points
- Comment @ the coordinator a link to the figma file in the design task, and assign it to them.
Coordinator
- Send the figma link to the design auditor in the "Design Audit" task. Assign it to the designer when the audit is received back from the auditor.
Designer
- Make tweaks and adjustments according to the design audit, note the changes completed or otherwise in the audit task. Marking it as complete after commenting @ the auditor and the coordinator about the changes.
Coordinator
- Double check the design audit and make sure all the points presented were appropriately addressed
- Contact and present the customer the mockup (just the homepage, not the global layout)
- Designer and coordinator may have to go back and forth a few times making adjustments as the customer deems necessary.
- New changes to the design should result in new tasks created under the main ticket to be assigned to the designer, or design team if that designer is unavailable.
- Again, any changes to the content given in the google document should be noted if the customer changed/removed any of it.
- Once customer has given final approval, "Build HTML" task with a link to the figma file should be assigned to the graphics dept.
Designer
- Take the "Build HTML" task and build the mockup in HTML (Time: 40 work hours or less)
- Create Hidden Page for the homepage mockup
If the original site is in foundation, use CID 2053 (Bootstrap Staging), to make a new page to mock up the design in html, if the original site is already in bootstrap, make a new hidden page in the company's site.
- Create a new page for the global design test page. (You can copy the tags from here)
- In the customer's site, make 2 new layouts
Hompage Layout
- Header block with the header or hero section of the design
- Body block of just "<#Page>"
- Footer block with the footer content in
- Name it "Homepage 2025"
Global layout
- Create Header block
- Create Global Body: "<div class="container"><#Page></div>"
- Use homepage (or possibly create global) footer
- Name it "Global Layout 2025"
- I would advise adding this CSS to both the homepage and global layout. I makes the font behave more like it does in figma: html body{-webkit-font-smoothing:antialiased;}
- Assign (the new) homepage layout to the hidden homepage, and global to the hidden test page, to make sure it is working.
- If the site doesn't already have a Font Awesome Kit, create and add one (documentation)
- Build the mockup in HTML, making sure works appropriately at all screen sizes
- In the page title, there should be: "<h2>{#PageName}</h2>"
- Zoom out too, it doesnt have to be fantastic, but the content should still be accessible, and the backgrounds should not cut off on the sides up to 4k screen pixel width.
- If not on the bootstrap staging site, you can go ahead and use the new homepage layout on your mockup page in the next step
- Purchase any stock images necessary
- Make sure all the images and files related to the design are in the Redesign folder set up in their customer folder earlier
- Make sure a favicon is made if needed and updated with with the new design
- Makes sure img practices are in place on the homepage:
- loading="lazy" on all img tags (or eager in the header)
- Widths or heights on all img tags
- aspect-ratio on all img tags (documentation)
- All image files are webp, sized, and otherwise optimized
- Add all links where you possibly can (check old site for exisitng links, and use friendly urls when possible).
- Cross Browser Check (you can check on physical devices you have access to, or use the cross browser testing)
- Windows (chrome)
- Mac (chrome)
- Firefox
- Safari
- Edge
- Android (chrome)
- iPhone (safari)
- Run Lighthouse and check score, optimize where possible (This is a good time to resize your images, convert to webp, add lazy loading, and add aspect-ratios, but there is a check for that later)
- Record Lighthouse score for Mobile
- Record Lighthouse score for Desktop
- Run PagePilot Page Scanner on the homepage
- Confirm no spelling errors
- Confirm no HTML errors
- Once the HTML site is built in its entirety and checked, comment @ the coordinator with a link to the new homepage, and the global test page.
Coordinator
- In the "SEO Audit" task, link the two pages given by the design, and assign the task to the SEO team to audit the content. Make sure any customer changes to the content has been noted in the google document with all the content.
SEO Dept
- SEO department runs their audit on the mockup, making sure content is satisfactory, in-text links are added (with their hrefs) and bolding/underlining is added.
Coordinator
- Once the aduit is returned, pass it to the designer to make any appropriate changes.
Designer
- Designer ensures that the design still looks good with the current optimizations. If something absolutely cannot be reworked, then designer can contact SEO to discuss potential changes.
- Once everything is optimized and tweaked, and SEO changes are approved, it is then given to design coordinator.
Coordinator
- Double check that the SEO audit is satisfactory, and double check all the website is satisfactory.
- Contact customer for final approval of the HTML mockup, setting a date to go live (should give a few days for the designer to be able to prep for live)
- Assign the "Set Live" task to the designer with the date.
Designer
- Prep for live (make sure all is ready before the date) (Time: 1 work day)
- If your design is on the Bootstrap staging site, copy over all the html to the customer's site in a hidden page.
- If the site's on bootstrap already, add your CSS, javascript, and other site options to each layout
- Ideally the global layout only needs the CSS for the header and footer, and the ssButton. Not all the CSS from the homepage.
- Make sure link color, and heading tags style are appropriate for global
- If they arn't already, make sure all the sections on the homepage are in content blocks.
- Create social media Graphics (You can find the templates in the file server under "Graphics" > "Designers" > "social media graphics"):
- Logo (name "2025 Redesign Logo")
- OpenGraph (name "2025 Redesign OpenGraph")
- Google (name "2025 Redesign Google")
- Bing (name "2025 Redesign Bing")
- Facebook (name "2025 Redesign Facebook")
- Create Social media redesign graphic (You can find the templates in the file server under "Graphics" > "Designers" > "Social Media Announcements")
- Welcome graphic (name "2025 Redesign Graphic")
- All social media graphis should be added in the customer folder > "Graphics" > "Social Media" as both .png files and .psd files(if it's not there, create it)
- Make sure to save the .psd of these graphics in the respective graphics folder in the customer folder
- Check existing site for chat widget and others to make sure they're in the new design
- Check and make sure every anchor tag has a link
- Copy over titles and meta tags from existing homepage
- Make sure all the images and files related to the design are in the Redesign folder set up in their customer folder earlier
- Take a screenshot of the site, and add it as "2025 [company name] Design.png" in the file server "Graphics" > "Designers" > "Website Design Gallery"
- On date, set live
- If site is not already on boostrap, go the site template tool (go to site template layout tool, and in the URL bar of the browser, change "/sitetemplatelayout" to "/sitetemplate"), and choose "Bootstrap"
- Move hidden homepage to the top of the menu, right click and "set as homepage"
- Disable old homepage
- Set global layout to the whole site in layout assignments in the Site Template Layout tool
- If the site was on foundation, make sure all the styles, javascript, and options are set in the homepage and global layout
- Run PagePilot Page Scanner on the new homepage
- Confirm no broken links
- Confirm no broken images
- Confirm no spelling errors
- Confirm no HTML errors
- Cross Browser Check (you can check on physical devices you have access to, or use the cross browser testing)
- Windows (chrome)
- Mac (chrome)
- Firefox
- Safari
- Edge
- Android (chrome)
- iPhone (safari)
- Record Lighthouse score for Mobile
- Record Lighthouse score for Desktop
- Take a screenshot of the site, and add it as "2025 [company name] Redesign.png" in the file server "Graphics" > "Designers" > "Website Design Gallery"
- Complete the "Set Live" task, and comment the coordinator that the site has been set live.
Coordinator
- Do final site check
- Make sure all links (not in-text links, but the buttons, footer links, etc) are set up and working
- Make sure links to external sites have 'target="_blank"' on them
- Check the site to make sure the designer didn't miss anything
- Set the schema for the company with the new open graph image, and appropriate text.
- Check homepage title
- Check homepage description
- Make sure all social media icons are set up
- Contact customer noting the redesign being set live
- Click "Design Finished" in the company's site, and close and make sure the ticket and its tasks are done/closed, and the basecamp checklist is all checked off.
The process ends when you finish the design, but a ticket is sent to customer support "Redesign Set Live - [company name] ([CID])", which is assigned to SEO to check.