• Product design
  • Platform strategy
  • Brand identity

Social Coding Competition Platform

Role
Product Designer & Co-Founder, Studio.Info
Client
ShowCode
Date
2019
ShowCode platform displayed across laptop, tablet and mobile devices

Connecting developers, employers and sponsors through skills-based competitions.

ShowCode is a competition and community platform for developers, from students beginning their careers to experienced professionals.

We worked closely with the ShowCode team to establish the foundations of the product, designing an experience that could scale as new features were introduced, provide meaningful insight to partners and sponsors, and create a distinctive identity for the platform.

Building engagement beyond prizes

Competitions and prizes provided a clear reason for developers to initially join ShowCode, but the product needed to create value beyond individual contests.

We designed player profiles that allowed developers to build a richer picture of their personality, interests and technical skills over time.

An achievement system recognised different aspects of development, including speed, creativity, quality and consistency, turning participation into an ongoing record of personal growth rather than a series of isolated competitions.

ShowCode Explore page with featured contests, upcoming events, discussions and a developer profile
ShowCode Activity page with contest rankings, upcoming challenges and developer achievements

Making competitions relevant

For contests to feel valuable, they needed to reflect the languages, skills and interests of individual developers.

We designed a flexible competition structure that allowed players to discover relevant challenges, understand what was required and explore the prizes available before entering.

Beyond competition itself, challenges could also support personal development and provide another way for developers to demonstrate their skills.

ShowCode contest page with challenge details, timeline and entry controls
ShowCode contest page with rankings, participants and prizes
ShowCode UniCode competition leaderboard with player rankings and profile panel

Connecting developers with opportunities

ShowCode also created value for the organisations sponsoring and hosting competitions.

When entering a partner-hosted contest, players could choose to share their details and open a potential employment conversation with that organisation.

This created a different approach to talent discovery: developers could demonstrate their abilities through real challenges, while employers gained a more engaging way to identify potential candidates.

ShowCode branded header designs for sponsored competitions

Giving partners better insight

We designed the first version of the partner portal to help sponsors understand how their competitions were performing.

Partners could monitor engagement, identify high-performing player profiles and customise their competition pages to reflect their own brand.

This connected the player experience with a clear commercial proposition for the organisations supporting the platform.

ShowCode sponsor activity dashboard with player rankings and profile panel

Designing for future growth

As an early-stage product, ShowCode needed to be able to introduce and iterate on features quickly without losing consistency.

We created an early design system that provided a shared foundation for future product development.

The documentation covered UI styles, reusable elements, modules, templates and interaction patterns, giving the team a clearer single source of truth as the platform evolved.

ShowCode prototype map showing the connected product screens and user journeys
ShowCode design system components and interface controls
ShowCode responsive interface adapting across viewport sizes
Large ShowCode developer profile panel
ShowCode charting components and data visualisation patterns

Building the ShowCode brand

Alongside the product, we created the initial ShowCode identity.

The logotype combined characteristics of monospaced typefaces commonly associated with code editors with a cleaner sans serif form, creating something recognisably rooted in developer culture without feeling overly technical.

We paired this with a highly saturated colour palette designed to reflect the digital environment of the product and its community.

ShowCode logo
UniCode logo
ProCode logo
ShowCode colour palette

Creating a flexible visual language

We extended the identity through a set of visual assets that could be used across product imagery and communications.

Together, the design system and brand gave ShowCode a recognisable foundation that could grow alongside both the product and its developer community.