HubSpot Developer Blog

How to Maximize Your Score in HubSpot's Themes Challenge

Hub Themes Challenge_Email Hero - 960bSo, you've decided to build a theme for the hackathon. That's awesome! Here's a guide to help you understand what our judges are looking for and how they will award points so that you can maximize your final score. Please keep in mind that the official rules are the final authority on how this contest works.

Our ultimate goal is to Solve For The Customer (SFTC). In this case, that means the end-users who will eventually download themes from the Asset Marketplace and use them to build pages and websites for their organization. The better your theme is designed for these customers, the better it will perform in the marketplace and this challenge.

Quick Overview of How Judging Will Work

Our goal is to make this challenge as objective as possible while encouraging best practices. Here's an overview of how it will work: Separate judging panels will review themes and award up to 75 points based on pre-set criteria in three main categories:

  • Design & Usability
  • Comprehensiveness
  • Technical Optimization

The theme that receives the highest combined score across all of these categories will win the grand prize: Best Overall Theme. After that, the top two themes in each category will win first and second place category prizes.

Hackathon Champion

Finally, there is a bonus prize for the theme that achieves the highest score that is listed as "free" in the Asset Marketplace: Best Free Theme, and a bonus prize for Best Marketplace Listing.

To learn about the criteria that judges will be looking for in each category, continue to the next section. For a detailed explanation of the scoring system, jump to the very end of this post.

What Judges Are Looking For in Each Category

Best Designed Icon

Design & Usability

In this category, themes will be evaluated based on their visual appeal and how easy they are to navigate and use from the perspective of a website visitor. Our judges for this category have backgrounds in UX and web design. Points will be awarded in this category based on these five criteria:

1) Ease of use: how clear is the navigation? Is it easy to find important information? Are pages linked in a logical format? Etc.

2) Professional branding and polish: Does the theme have the appropriate aesthetic for the intended audience? Are the graphics, images, and visuals impactful? Are layouts easy to follow? Etc.

3) Flexibility and scalability: Is there a uniform design across pages and assets? Are designs built with modular layouts? Can content creators modify designs without breaking them? Etc.

4) Accessibility (front-end): Are designs responsive? Do images and icons have alt text? Is there enough contrast between different elements? Etc.

5) Originality and Creativity: Do the designs and layouts stand out from other themes? Do pages look unique? Are they intensional? Etc.

Most Comprehensive Icon-1

Comprehensiveness

When it comes to comprehensiveness, themes will be evaluated based on the number and quality of assets included and the experience content creators can expect when customizing a theme for their organization. Judges in this category are developers or have experience building real-world sites on HubSpot. Here are the five criteria by which points will be awarded:

1) Custom / global modules: How many quality modules are available for content creators? Does each serve a unique purpose and have a clear intent? How flexible are they? Can they be adapted for different uses? Etc.

2) Page templates: How many quality page templates are there? Have all types been considered, including landing, website, blog, and system pages? Are there unique pages (such as maps) that fit the intended audience? Etc.

Important Note: To ensure your theme is relevant for our significant number of Marketing Hub users, consider including a variety of landing pages, thank you pages, blog listing templates (single column posts, posts with sidebar, and 2 column posts), and blog post templates. Marketing Hub customers often build individual pages and blogs with HubSpot and list their main website elsewhere - but they are still potential theme customers who are looking for drag-and-drop functionality!

3) Documentation / support: Is documentation provided for the theme? How user friendly is it? Are there comprehensive examples of what is possible? How complete is the marketplace listing? Are support options straightforward and easy to find?

4) Ease of editing: What is the experience like for content creators? Are pages truly 2D drag-and-drop compatible? Are there clear tooltips and labels? Are theme settings easy to use and logically grouped and organized? Etc.

Important Note: As mentioned above, we are looking for themes to be compatible with HubSpot's visual drag-and-drop content editor. This means, as much as possible, non-technical content creators should be able to move modules up and down and left and right into sections, columns, and rows when editing your page templates.

5) Originality: Does the theme solve for the target industry and intended audience? Can it be adapted to other industries? Is it significantly different from other themes in the marketplace? Etc.

Technically Optimized IconTechnical Optimization

When it comes to technical optimization, we will be looking under the hood at how your code is organized, how well your pages perform, and how easy it is to customize your theme. Our technical judges are developers. Here are the five criteria they will award points based on:

1) Customizability: Do you have theme settings that work across page templates? How elegant and effective is the UI for content creators building with your theme? How are header tags and fonts handled? Etc.

2) Simplicity and usability: How are files and code organized and structured? Does the code follow best practices? We will generally be looking for intensionality and modularity.

3) Page speed: Have you optimized your theme to load quickly based on best practices?

4) Search Engine Optimization: Have you optimized your theme based on SEO best practices? Have you included meta tags and schema markup? Etc.

5) Accessibility (back-end): Have you followed best practices for accessibility? Is your theme designed to work with screen readers? Etc.

Detailed Description of How Scoring System Will Work

As detailed in the section above, judges will evaluate themes in each category (Technical Optimization, Comprehensiveness, and Design & Usability) based on five pre-set criteria.

There will be three judges per category, and each will individually award between zero and five points per criterion. For example:

Category: Most technically optimized theme

Criterion 1: Customizability

  • 0 to 5 points per judge x3 judges

Criterion 2: Simplicity / usability of code

  • 0 to 5 points per judge x3 judges

Criterion 3: Page speed

  • 0 to 5 points per judge x3 judges

Criterion 4: Search Engine Optimization

  • 0 to 5 points per judge x3 judges

Criterion 5: Accessibility

  • 0 to 5 points per judge x3 judges

Because individual judges can award up to 25 points, the maximum score a theme can receive is 75 points per category. For math people:

(3 Judges)*(5 Criteria)*(5 Points) = 75 maximum points per category

There are three separate categories (nine total judges), so each theme can receive a total maximum score of 225 points across categories. For math people:

(3 Categories)*(75 possible points per category) = 225 maximum points total

The theme with the highest combined score will become the hackathon champion and receive the grand prize. A tenth tiebreaker judge will settle ties.

In Conclusion

When it comes to the hackathon, our ultimate goal is to incentivize the creation of fantastic themes that will serve the needs of our customers. We also want to make the contest as objective as possible for everyone involved. That is why we have attempted to outline the specific criteria that judges will be utilizing and have created this scoring system.

Hopefully, this post will provide clarity on areas you should prioritize as you create your theme listing. If you have any hackathon specific questions, don't hesitate to post in the DevPost forum here. We look forward to receiving your entries!