Redesign Process

Niq's OA Resources

Redesign Process

Back

Last Updated: 03/24/2026

Content First

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

Design Mockup

(Time Anticipated: 40 work hours or less)

Designer

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 "2026 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] 2026 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
Check that sesonal sections are designed accordingly (Outside the file should be a mockup of what other seasons should look like)

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

Make sure to check what blocks are marked as global in the design doc, and include them.
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

Once the mockup is built in figma, post 4 figma preview links (for homepage/global, desktop/mobile) in a comment on the design task, @'ing the coordinator, then assign it to them.

Design Audit

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. Make sure the link has the subpage design on it

Auditor

Check the figma file, and compare it to the design document. Make sure the points and sections were appropriately made, and critique elements of the design to bring them to the desire of the customer, and see any minor flaws or suggestions are fixed or made.

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. Also if it hasn't been shared already, make sure a preview link to the figma mockup, both the desktop and mobile are on the task (the global layout is not needed).

Design Changes

Coordinator

Double check the design audit and make sure all the points presented were appropriately addressed
Design coordinator gets approval from customer then hands it to designer.

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 is that designer is unavailable.
Any changes to the content given in the google document should be noted if the customer changed/removed any of it.

Designer

From the '4. Design Changes' task, make adjustment to the mockup as listed. There will most likely be back-and-forth, since customer input and changes will happen.
Make sure customer changes are noted in the task, not just verbally talked about, or on slack.

Coordinator

Once customer has final approval, assign the "build HTML" task to the design team.

HTML Build

(Time: 40 work hours or less)

Designer/Coder

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)
Add some styles to the body to makes sure the font behaves like figma, and that the text has the font family and colors from the design: html body{ -webkit-font-smoothing:antialiased; font-family: [put font family here]; color: [put text color here]; }
When making the hero section, preload the background image using this code: <link rel="preload" as="image" href="[insert image link here]" fetchpriority="high">
- If the hero background has a desktop and mobile image, do this twice: one for both image versions
If the site doesn't already have a Font Awesome Kit, create and add one (documentation)

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 2026"

Assign (the new) homepage layout to the hidden homepage, make sure it is working.
Build the mockup in HTML using the existing homepage, making sure works appropriately at all screen sizes

Zoom out too, it doesn't have to be fantastic, but the content should still be accessible, and the backgrounds should not cut off on the sizes up to 4k, and the content should stay away from the sides of the pages.

Purchase any stock images necessary
Make sure all the images and files related to the design are in the design folder set up in their customer folder earlier
Makes sure img practices are in place:

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

Create Global Layout

In the Site Template Layout Tool, make a new layout titled "2026 Global Layout" that consists of:
- A "2026 Global Header" block, with the content block for that
- A "Global Body" Block that is the page tag surrounded in a container (<div class="container"><#Page></div>}
- A "2026 Global Footer" block, with the content block for that
Assign that layout to the hidden test page, make sure its working.
Design the page according to the mockup.

Final Housekeeping

Make sure the design is as faithful to the mockup as possible. If there are struggles getting it close in some areas, reach out to your supervisor.
Make sure a favicon is made if needed and updated with with the new design
Cross Browser Check the homepage (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 PagePilot Page Scanner on the homepage

Confirm no spelling errors
Confirm no HTML errors

Run Google PageSpeed Insights on your homepage design, take care of any further optimizations that you can.
Make sure all the images and files related to the design are in the Graphics folder set up in their customer folder earlier.

Once the HTML site is built in its entirety and checked, comment @ the coordinator with a link to the homepage and the test subpage, and assign the task to them.

UIUX Audit

Coordinator

In the "6. Design UIUX Audit" task, link the homepage and test subpage, and link the base figma file. Make an @ comment to the auditor, and assign the task to them.

Auditor

Compare the HTML build to the figma file, checking desktop then mobile. Making note of discrepancies, try to note where it can be as close as possible, but apply reason.
Check the in-between sizes, while they weren't mocked up, it is good to make sure the sections still look good on every size, the content flows appropriately, etc.
Repeat for the subpage layout
Comment notes back to the coordinator

Coordinator

Once the audit is returned, pass it to the designer to make any appropriate changes.

Designer

Make changes as possible according the notes of the auditor. Reach out for clarification or help.
Reassign to coordinator when done, with any notes of non-changes with reasoning, or just that they're complete

SEO Audit

Coordinator

In the "SEO Audit" task, link the homepage and test subpage, 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 audit 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 is to contact SEO to discuss potential changes.
Follow the Requirements listed in the audit, making sure to change what you can, or explain why it can't or isn't the way they said it should be.
Look over the Comments/Concerns section. Do not make notes if you do or don't do them, but make sure to look over them, consider them, and apply what makes sense.
Once everything is optimized and tweaked, and SEO changes are approved, it is then given to design coordinator and marked as complete.

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 "Live Prep" task to the designer with the date, having contacted them to find the date suitable for that

Going Live

(Time: 1 Work Day)

Designer

Prep for live (before live date)

Make sure your global layout is updated to reflect any design changes, and homepage layout is also established.
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
Make sure your homepage section are in content blocks

Make sure there are settings for the headings and links in the STL for the global layout

Double check there is the ssButton class available in the global layout
Create social media Graphics (You can find the templates in the file server under "Graphics" > "Designers" > "social media graphics"):

Logo (name "2026 Redesign Logo")
OpenGraph (name "2026 Redesign OpenGraph")
Google (name "2026 Redesign Google")
Bing (name "2026 Redesign Bing")
Facebook (name "2026 Redesign Facebook")

Create Social media redesign graphic (You can find the templates in the file server under "Graphics" > "Designers" > "Social Media Announcements")

Redesign graphic (name "2026 Redesign Graphic")

All social media graphics 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 all the images and files related to the design are in the Redesign folder set up in their customer folder earlier
Check and make sure every anchor tag has a link
Copy over titles and meta tags from existing homepage

Live Day

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
Check some of the common subpages, like contact us, about, schedule, etc. to make sure they work. And make sure list tags, paragraph, heading, table tags all are inheriting styles.
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
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)

Check some of the common subpages, like contact us, about, schedule, etc. to make sure they work. And make sure list tags, paragraph, heading, table tags all are inheriting styles.
Take a screenshot of the site, and add it as "2026 [company name] Redesign.png" in the file server "Graphics" > "Designers" > "Website Design Gallery"

Comment @ the coordinator in the task that the site is ready to go live, and assign the task to them.

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.