← Processes

Custom Process

Kickoff & Discovery (Generally 2-3 weeks overall)

  1. Designer is assigned project in BC

  2. Receive Completed Discovery docs from Client

  3. Determine w/ PC when Discovery Call will be held.

  4. PC schedules call

  5. Create a new project within Figma. Go to “Active Projects” and hit plus sign or “New project”. Name project using ‘jsource_domain’ format. Then go to “WebSol Templates” and select “Custom Template.” Right-click “fi_custom” file and select “Duplicate.” Drag the copy to the FI project within “Active Projects”. Rename the file to “jsource_domain”

  6. Create a Kickoff Sitemap for Discovery Call. Open client Figma file and select “Sitemap” Page.

  7. Review Contract to declare what client has purchased

  8. When complete save as FI_sitemap-kickoff.pdf - smallest file size

  9. Prepare any additional notes, inspiration sites or questions to discuss with the client on the Discovery Call.


Discovery (60-90 min)

  1. Complete Discovery Call. Learn client goals for sitemap, color placement, fonts, components

  2. After Call, Recap with PC thru Zoom or Slack

  3. Post Recap to Basecamp.


Sitemap Phase (2-4 weeks)

Initial Sitemap (Delivered 5-7 Days after Discovery Docs are received)

  1. Open client Figma file and select “Sitemap” Page.

  2. Review Discovery Doc to determine angle of new sitemap

  3. Rework Current Pages - Decide what pages can be combined based on content

  4. Type out New Structure on the Sitemap - Determine pages needed for footer and additional pages that are not in the main nav

  5. Organize site features based on Contract

  6. lace Site Features on Pages that are needed based on content, client feedback or if indicated on Contract.

  7. When complete save as FI_sitemap.pdf - smallest file size

  8. Copy canned message from Designer Resources and attach PDF - Edit Sitemap Delivery message to apply to client.

  9. Post to BC w/ canned message and Sitemap Approval document.

Sitemap Revisions (2 Business Day Turnaround for Revisions)

  1. Receive Sitemap Edits from Client.

  2. Review Feedback / Decide if discussion or Call is needed. Work with PC, and schedule call with Client.

    • Discuss changes during call - Recap after call with clear list of revisions you will be working on/or if anything you are waiting on from the client.

  3. Make edits within 3 days. 3 Rounds of Revisions.

  4. Receive Sitemap Approval

Note - Rounds of revisions should not go over 3 versions without additional charge to the customer. Max amount should be as follows; Initial Sitemap, Sitemap v1, Sitemap v2, Sitemap v3.


Homepage (4-6 weeks)

Initial Homepage (Delivered 10-14 Business Days after Sitemap Approval)

  1. Collaborate with PC to determine date/schedule the Homepage Reveal Call.

  2. Open client Figma file.

  3. Pull logo and branding from BC and set up within Figma.

  4. Review brand guidelines if it applies. Look at inspiring sites, photography, etc.

  5. Design all viewports on Frames within the “Homepage” Page and align to pre-made grid.

  6. Refer to “Frequently Used” Page and pre-set Symbols within Figma as needed

  7. Create posting URL using FI domain name - Posting URL (1440px)

  8. Post for Peer Review. Use Homepage Design Review Outline - Web Solutions Team and edit outline to apply to your design. Post in Internal Reviews and set the message category (top left) to “Homepage Design Reviews”

  9. Read peer feedback, complete revisions.

  10. Upload final design posting URL.

  11. Reveal Call - After Call, Recap with PC thru Zoom or Slack, and Post Recap to Basecamp including the Posting URL within an hour after the call.

Homepage Revisions (3-5 Business Day Turnaround for Revisions)

  1. Receive Homepage Feedback

  2. Review Feedback / Decide if discussion or Call is needed. Work with PC, and schedule call with Client.

    • Discuss changes during call - Recap after call with clear list of revisions you will be working on/or if anything you are waiting on from the client.

  3. Make edits within 3 days. 3 Rounds of Revisions.

  4. When close to Approval (or after Approval) - Send canned message requesting for Subpage info. Subpage Information Post to Basecamp.

  5. Receive Approval


Subpages (4-6 weeks)

Initial Subpage (Delivered 10-14 Business Days after Homepage Approval)

  1. Collaborate with PC to determine date/schedule the Subpage Reveal Call.

  2. Open client Figma file. Go to “Subpages” Page.

  3. Design all standard and custom subpage layouts by referencing Sitemap and Subpage Info submitted by client using the pre-made frames and grid in ai file. Note: Standard Pages are pages that are included with all of our sites - General Subpage layout, Contact Us Form, ATM Locator. Custom Layouts are pages that are client-specific to what was purchased - ex. Product Comparison, News/Resource, or any complex Forms, etc.

    • General Subpage - Include All heading examples, bullet examples, in-line link examples, blockquotes, button examples, etc.

  4. Create an additional “subpages” posting URL - Posting URL (1440px)

  5. Post for Peer Review. Use Subpage Design Review Outline - Web Solutions Team and edit outline to apply to your design. Post in Internal Reviews - Web Solutions Team and set the message category (top left) to “Subpage Design Reviews”

  6. Read peer feedback, complete revisions.

  7. Upload final design posting URL.

  8. Reveal Call - After Call, Recap with PC thru Zoom or Slack etc., and Post Recap to Basecamp including the Posting url within an hour after the call

Subpage Revisions (3-5 Business Day Turnaround for Revisions)

  1. Receive Subpage Feedback

  2. Review Feedback / Decide if discussion or Call is needed. Work with PC, and schedule call with Client.

  • Discuss changes during call - Recap after call with clear list of revisions you will be working on/or if anything you are waiting on from the client.

  1. Make edits within 3 days. 3 Rounds of Revisions.

  2. Receive Approval


Export (2-3 days after Subpage Approval)

  1. Refer to Trello Card for Designer Pre-Development list

  2. Attach Sitemap to Card

  3. Check that all Designs are completed; All homepage and subpage viewports, layers, modals, etc.

  4. Theme Style Guide

  5. Theme Branch & ATM Locator Pins and Export as .png files

  6. Export & Create Favicons using RealFaviconGenerator and Download Favicon Package

  7. Create “dev_assets” folder in finder. Add fonts, favicon package, and branch/ATM pins. Compress folder and attach dev_assets.zip file to Card

  8. Clean Up Figma File and Make Dev Notes

  9. Complete checklist on Trello

  10. Post “Ready for Dev” Comment on Trello Card. Include: Link to FI Figma Project, Approved Posting URLs, Tag PC and Chris Struyk

  11. Double Check All Time is Logged for Project

  12. Notify Chad when Fully Exported

  13. Move Card to Bottom of “Custom Site Backlog” on Trello.


Ads (2-4 weeks)

Initial Ad Designs (Ad discussion started within 1 week after Subpage Approval, Delivered 5-7 Business Days after Ad Topics are decided)

  1. Tailor canned message Website Ads - Web Designers and send in a new “Website Ads” thread on Basecamp.

    • The amount ads can be decided by the Designer. As a rule of thumb, but not limited to: Hero Ads - If the design uses a slider, design enough ads to cover all slides in an ad slider at a minimum. Subpage ads will be determined on the number of pages in the site/style of that ad. Include any other style of ad design if it applies to your design. Overall - do not go over 30 ads to be delivered to the client.

  2. Open client Figma file. Go to “Ads” Page. Create Frames the same size as all ads in the approved design.

  3. When ready for client review, select applicable Ad Frames and “Export” as PDF files. Combine individual PDFs into one file using Adobe Acrobat. When complete save as FI_ads.pdf - smallest file size.

  4. Copy canned message from Designer Resources, attach Sitemap PDF and approval document. Edit canned message to apply to client Website Ads Delivery. Post to Basecamp.

  5. Receive Ad Feedback. Make revisions if any within 2-3 Business Days.

  6. Receive Ad Approval


Designer UAT Review (Within 3 days of receiving site from development)

  1. Receive UAT site from Dev in a Private Message on Basecamp. Complete Design/CMS review.

  2. In Basecamp project, hit “Create a Text Document” and mark hidden to client. Label document with “WIP Designer Review - [ETA Completion Date]”

  3. Copy/Paste links provided by dev as a review outline. Note your review browser and device(s).

  4. Log in to the UAT CMS https://uat.banno.com/a/login

  5. If there are any, delete/remove all Dev-added assets within CMS Assets. Upload approved ad assets OR assets from design files to test if ads are not yet approved. (Hero Images, Icons, etc.)

  6. Edit Homepage: Note - As you are checking the steps below, Start a reply message in basecamp that will house your Review.

    • Delete and Replace assets on the homepage.
    • If site is not populated with assets from the Developer, Mockup the Homepage with the assets that were approved on the design.
    • Check if Hero overlays are present with images you uploaded, if applicable.
    • Test out if content areas are editable as you would like them as a user.
      Use the copy that was on your design and make sure everything matches. Make sure the CMS is functioning in the places as you would have expected, and/or how you explained it to the client Note Edits in Basecamp

  7. Edit Style Guide Page:

    • Review General Subpage Design. Compare the Styles on this page with the Figma “Style Guide” page. Check headers, buttons, fonts (weights) are correct.
    • Delete and Replace assets on the Style Guide Page
    • If page is not populated with assets from the Developer, Mockup the Style Guide page with the assets and headers that were approved on the design.
    • Check if Hero overlays are present with images you uploaded, if applicable.
    • Test out if content areas are editable as you would like them as a user.
    • Use the copy that was on your design and make sure everything matches.
    • Make sure the CMS is functioning in the places as you would have expected, and/or how you explained it to the client
    • Relay Edits in Basecamp

  8. Edit All Custom Templates:

    • Review Custom Design Layouts with approved design.
    • Delete and Replace assets on the Custom Layouts with assets on approved design.
    • If page is not populated with assets from the Developer, Mockup the Custom Layouts with the assets and headers that were approved on the design.
    • Check if Hero overlays are present with images you uploaded, if applicable.
    • Test out if content areas are editable as you would like them as a user.
    • Use the copy that was on your design and make sure everything matches.
    • Make sure the CMS is functioning in the places as you would have expected, and/or how you explained it to the client
    • Relay Edits in Basecamp

  9. Check Designs at Tablet and mobile views. Use different devices if available. Note edits in Basecamp.

  10. Finish writing review message and send a notification to PC and Dev when complete through Basecamp.


Build Complete / Pre-Launch

Final Steps: (but not limited to)

  1. When Ads are approved, export ad assets to a “cms_assets” folder. Use asset style names (ex. hero-mortgage.jpg). Full-width assets should be scaled to 1600px width during export.

  2. Create & export an icon library, including those used in ads (transparent PNG saved at 200%, using “##px.png” ending; ## equaling the original size).

  3. Create & export a library of subpage header images.

  4. Upload all approved ad assets, subpage headers, icons, etc. into CMS Assets. Label all the assets in the CMS using asset/ad style name (hero, subad, subpage headers, icons, etc.) and include asset dimensions (ex. Hero - 1440 x 500px)

  5. Write alt tag descriptions for each item.

  6. If Banno Marketing was purchased, create ZIP of all assets and send to PC via hidden BC message.

  7. Notify the PC that Ads/Assets are complete.

  8. After Dev has completed UAT Review edits, confirm style guide is accurate. Export style guide as PDF.

  9. Tailor canned message Style Guide Delivery, attach Style Guide PDF and send in a new “Style Guide” thread on Basecamp.

  10. Add Style Guide to Web Solutions Team Sharepoint Folder