ShowCode
Social code competition platform

ShowCode is a modern-day web application targeted at developers (students & professionals alike) to enter and compete in coding contests. There is also a strong emphasis on ‘community’ whereby ShowCode hosts events and shares informative content.

We worked closely with ShowCode to create the initial foundation of the platform, from how feature development can be flexible and scalable, communicating KPIs to ShowCode partners and sponsors along with the initial branding concept.

ShowCode-Large-Device

Player profile building & development

Entering contests for prizes is a simple idea for players to understand, but we needed to find a solution to help create loyalty beyond prizes. 

A simple, organic profile building tool allows the player to capture their personality, skills and interests. This includes an achievement system that invokes personal growth as a developer – solving problems quickly, creatively with quality and consistency.

ShowCode-Large-Explore
ShowCode-Large-Activity

Competing in contests

Contests need to be relatable to the developers prefered language and interests and are designed to be flexible, to improve personal development and act as a form of skill validation.

Players can easily search for contests and explore what prizes and challenges await.

ShowCode-Large-contest
ShowCode-Large-challenge
ShowCode-Large-leaderboard

Contests & player insights

When players join contests hosted by ShowCode partners, they can consent to be contacted by the partner to open a potential employment conversation—creating an engaging and fun way for both the players and sponsors to approach talent acquisition.

The initial release of the partner portal measures the engagement of contests and the most performant player profiles.

ShowCode partners could personalise their contest pages to help maximise on brand affiliation and loyalty.

ShowCode-Large-sponsor
ShowCode-Large-customise

Design consistency and future-proofing

As a start-up, ShowCode needs to quickly iterate its features with confidence, and teams need access to a single source of truth that allows for a scalable UI language and streamlined UX guidelines.

We devised an early-stage design system to help keep future iterations of the product consistent; in the documentations, we included UI style guides, elements, modules, templates and interaction patterns.

ShowCode-Large-Ui-Kit
ShowCode-Large-profile-panel
ShowCode-small-profile-label
ShowCode-small-challenge-label
Large-chart@1x

Building a brand

To help ShowCode maximise impact when launching their new product suite, we designed and built a new brand. The guidelines included logo, typeface, colour palette and other visual patterns.

We based the logotype on a hybrid between the typical monospaced fonts used in code editor software and a clean san serif to help modernise the style.

Logo-ShowCode@1x
Logo-UniCode@1x
Logo-ProCode@1x

A splash of colour

We devised a highly saturated colour palette to reflect the digital tech world that ShowCode and its users relate to.

The palette was grouped by Primary colours – core colours used across all touchpoints; Secondary colours – used for all sub-brands or competitions; and finally, System colours – used to help contextualise product messaging.

Primary-palette-1@1x
Secondary-palette-1-@1x

Brand collateral

We created a set of brand visual assets to be used for imagery and communication. The imagery helped enhance the individuality of the products visual style.

Patterns-Copy-3@1x
Patterns-Copy-2@1x
Patterns-Copy-4@1x
Icon-library-Primary@1x
Icon-library-Dark@1x

©2021. All rights reserved.