Member Login

Welcome to the Clubhouse Online Design Portal!

This site has been created to help you understand the different elements that lead to a successful website design project. Below you will find information on the four project phases (Discover, Define & Design, Develop and Deliver) as well as many tips to make your design project a huge success.

For more information, please see the Resources section at the bottom of the page or feel free to reach out to your Project Coordinator or Web Designer.

   

  1. *Discover 

    • This phase focuses on understanding your goals, brand, and audience. Through a collaborative design call and use of the Visual Identity Guide (VIG), we gather insights to define the problem, create a project brief, and draft the sitemap. It sets the foundation for all design decisions and ensures alignment before any visuals are created. 

    • Includes:

      • Design discovery call

      • Visual Identity Guide

      • Problem Statement

      • Sitemap

      • Content Compilation Document (CCD)

  2. *Define & Design

    • This phase turns insights from the discovery process into a focused design direction. Using the approved sitemap and clearly written problem statements, we create high-fidelity mockups that reflect your goals and brand identity. The team presents the designs with clear rationale, gather feedback, and refine the visuals to ensure they address the core problem effectively.

    • Includes:

      • Graphics Gathering

      • Mockups

      • Design Review and Revision

  3. *Develop

    • With approved mockups in place, the site is built to match the visual design and user flow outlined earlier. Designers and developers work closely to ensure accuracy, responsiveness, and functionality. Internal QA begins during this phase to catch any issues early and maintain consistency with the approved design.

    • Includes:

      • Site build, staging setup

      • Final Site Build

      • Internal Testing

      • Club Review 

  4. *Deliver 

    • In this final phase, the site undergoes internal QA and client review to ensure everything aligns with the approved design. Clients are given a staging link to provide one round of consolidated feedback focused on layout and functionality, no new content or major changes. After revisions are applied, a final QA pass is completed before launch, ensuring the site is polished, functional, and ready to go live.

    • Includes:

      • Final client feedback

      • Launch Readiness

      • QA

      • Final approval

Now let's get started!

Discover

In this phase, we collect brand assets and work with you to define the content and messaging for your site, ensuring alignment with your goals and visual identity.

Colored processes are the responsibility of the club

Sitemap

  • A visual representation of your website 
  • Maps 1-to-1 to your site's navigation (i.e. each icon represents one page or module)
  • Details which pages are public and private 
  • Includes purchased modules (Statements, Roster, Calendar, Tee Times etc.)
NOTE: Adding or removing pages after the sitemap has been approved constitutes additional billable work. View pricing here

Gather Content

Content Compilation Document

  • A Content Compilation Document (CCD) will be provided to you
  • Each page of the Content Compilation Document maps to one page of the sitemap
  • When completed it will contain all of the images, verbiage, and widgets you would like to see on each page
NOTE: Unless otherwise specified, missing information on the Content Compilation Document may not be added later without incurring an additional fee.

Images

  • Chose high quality and professional images whenever possible 
  • Banner Images - original file must be minimum 2000px wide. DO NOT enlarge image to fit this dimension. If the image is smaller we may be able to use it for a different element. Enlarging it will degrade image quality. 
  • Upload images to your club’s Dropbox 
    • Keep image names specific so they can be easily located
    • Use folders to create logical groups of similar images
Resources

NOTE: High quality images are the single most important element of a great website.

High Quality

properly size image

Low Quality

Verbiage 

  • Include all of the text you would like on each page 
  • Ensure verbiage is free of spelling and grammatical errors 
  • Note which text should be used for headers, sub headers, and body text

NOTE: Content changes made after the start of the site build are the responsibility of the club 

Widgets

  • Widgets are the building blocks of a ClubHouse Online website
  • They allow information to be arranged in a variety of different ways 
  • Widgets can be easily created and modified through Club Central, the administrative side of each ClubHouse Online website 
  • Widget types, examples, and detailed configuration instructions can be found on ClubHouse Online Support Site

Widgets Examples

Check out live examples of the different widgets

Widget Examples

Define & Design

This phase establishes the visual direction and structure of your site. Building on your brand identity and goals, we create high-fidelity mockups that incorporate your logo, colors, fonts, imagery, and layout. These mockups are guided by your problem statement and crafted to align with your audience, content, and overall user experience. Below are some examples of what we’ll review with you to help guide the design and ensure it feels true to your club.

Colored processes are the responsibility of the club

1. Logo(s)


  • App - Vector file (AI, EPS, or SVG) 

  • Website Only – 500 pixel minimum (JPG or PNG)  


 

2. Colors

  • Format - Hex Color Codes (e.g. #3FB5FF) 

  • May be taken from branding (use Jonas logo as example)
Resources

3. Fonts

Headers - Monsterrat Semi bold 600

Subheaders- Tinos Oblique

Body text - Raleway

 

NOTE: Custom fonts may be used only with a signed document agreeing to font ownership 

4. Navigation

Mockup Process

  • A mockup allows you to see how the four design elements look in combination with one another
  • A mockup will include 2-4 pages including the: home page, sample inner page, drop down navigation, and mobile view.
  • Mockup revisons include: changing navigation, altering text and/or colors, and altering logo size and/or placement
  • Mockup content (widgets, text, etc) are used to get an idea of the look and feel of the final site, and will be changed during the site build
  • The mockup will be approved when the club signs the online Mockup Approval Document.
  • After the mockup is approved, graphics elements may not be changed without incurring additional fees

NOTE: The mockup approval document must be signed before the project can proceed to the content build stage.

DEVELOP

In the Develop phase, we bring your approved designs to life. Using the finalized mockups and content, we build out the site structure and begin assembling each page. Internal testing is completed throughout this phase to ensure layout accuracy, functionality, and responsiveness across devices. Below are some of the steps we take to prepare your site for review.

Colored processes are the responsibility of the club

Initial Build

  • Using your club's Sitemap and Content Compilation Document, your designer now has all the information they need to build your website
  • The build occurs on stages, allowing clubs to review before moving forward
  • Pages built are now considered completed 

NOTE: Unless otherwise specified, any content changes made after the start of the build will either: a) be the responsibility of the club; or b) constitute additional billable work

Iterations

  • Feedback and iteration are built into every phase of the project—from discovery to deployment.

  • During the development phase, we continue refining pages as content and layout come together.

  • Before deployment, we offer one final round of client feedback, completed alongside internal QA.

  • Clients have 14 days to review the staging site and submit all final revisions in one consolidated update.

  • Submissions received after the 14-day period may be subject to additional fees.

NOTE: Additional changes beyond the final feedback round may incur extra fees.

Item  Included  Not Included 

Changing or rearranging the order/placement of content designed and laid out within the web page. 

yes 

  

Replace placeholder images already uploaded to the page. Club responsible for replacing imagery thereafter.

yes

  

Correcting any data that was mistyped onto the web page by the web designer based on Content Compilation Document (CCD) provided. 

yes

  

Updating outdated verbiage, documents (Note: This is the responsibility of the client to update outdated content. Training materials provided) 

  

no

Adding additional images on a page that were not included with CCD can drastically change the design of the page potentially requiring the page to fully be redone from scratch. Changes at this stage would be billable. 

  

no

Moving/removing/adding pages within the website navigation (These aspects would have been finalized in the sitemap process. Changes at this stage would be billable.) 

  

no

Change logo placement, site colors, themes, fonts, header/footer (These aspects would have been part of the mock-up approval. Changes at this stage would be billable.) 

  

no

Place additional content onto website pages that was not already sent in the CCD or part of content directed to be utilized during the initial website build. 

  

no

Deliver

In the Deliver phase, we prepare your site for launch by completing internal QA and collecting your final round of feedback. This phase ensures that everything—from design accuracy to functionality—is fully reviewed and aligned with the approved direction. Once final updates are applied and verified, your site is ready to go live with confidence.

Site Launch & Final Revision

  • We complete a thorough internal QA to ensure your site meets design and functionality standards

  • Once approved, your site is launched and made live for your members and visitors

  • After launch, you’ll have a 14-day window to review the site and submit any final revision requests

  • You may submit one consolidated list of changes during this period

  • We'll apply your requested updates and complete a final quality check to ensure everything is in place

NOTE: Additional changes beyond the final feedback round may incur extra fees.

Club Deliverables

   

  1. DISCOVERY

    • Club Deliverables:

      • Visual Identity Guide Participation 

      • Sitemap Review & Approval

      • Completed Content Compilation Document (CCD)

    • NOTES:

      • Use high quality, professional images

      • Changes made to content after the start of the final build are the responsibility of the club

  2. DEFINE & DESIGN

    • Club Deliverables:

      • Gather Graphics (logos, colors, fonts, navigation)

      • Mockup Review

      • Signed Mockup Approval Document (must be signed before the next phase can start)

    • NOTES:

      • A maximum of 2 mockups may be created

      • The Mockup Approval Document must be signed before the next phase may start

  3. DEVELOP & DEPLOYMENT

    • Club Deliverables:

      • Final Build Review

      • Completed Round of Changes Document

    • NOTES:

      • A single revision round is provided for each website prior to deployment.

      • Only 3 types of changes are permitted (see table above)

Example Websites

Content Resources

Image Resources

Image Resources

Compress large images for faster load times Compressor.io
Enhance low quality images Upscale Media
Online photo editor imgtools



 

Graphic Resources

Color Resources

Color Resources

Generate color hex codes from an image or logo ImageColorPicker
AI generated color combinations Coolors
Explore popular color palettes Color Hunt
Experiment with "Flat Design" color (minimal and 2D) Flat UI Color Picker
Generate tints and shades of your primary color palette Tints and Shades
Font Resources

Font Resources

AI generated font combinations Fontjoy