SuperCity

About the Role

We collaborated with SuperCity mid-way through their brand definition process to elevate their visual identity and create a concise, impactful website. The goal was to reflect SuperCity’s core values—expertise, professionalism, and a touch of the ‘super’ factor—while introducing their AI-powered solution that centralizes city communication, services, and information into one intuitive app.

Visual Design

Black serves as the primary background color, softened with a subtle gradient for better readability. Purple is the primary accent, complemented by white and grayscale tones to establish hierarchy and depth. Gradients are used throughout to separate content modules without introducing additional colors, ensuring consistency with the SuperCity app’s color scheme.

Typography

Poppins, a neutral and open-source typeface from Google Fonts, was selected for its versatility across branding, editorial, and interface use. Its simplicity and wide availability make it practical for digital environments.

Site Mapping and Content Design

We redefined the website’s architecture, including subpage hierarchy, navigation, key elements, linking logic, and CTAs, optimized for all devices and audience segments. The structure guides visitors through the marketing funnel with purposeful, conversion-focused navigation. Using the inverted pyramid principle, we designed wireframes to highlight the platform’s benefits early, ensuring value propositions are communicated effectively from the start.

Copywriting

The web copy prioritizes clarity and product-focused messaging, introducing SuperCity as a new software solution. We balanced straightforward explanations of the product’s functionality and benefits with brand-inspired copy, using the word ‘super’ as a recurring theme. The ratio is approximately 80% clarity to 20% brand-building content.

Web Design

The website’s visual language aligns with SaaS industry standards: clean layouts, focused messaging, and a clear sense of purpose. The design ensures visitors immediately recognize the product and industry while maintaining a friendly tone for both government and resident audiences. Key elements include minimal layouts, high contrast, a limited color palette, and strong, concise headlines. To add warmth, we incorporated imagery and the SuperCity mascot, Percy, to make the experience more relatable.

Product Visuals & Web Imagery

Instead of standard UI mockups, the website features visuals that blend real product screens with subtle gradients, transparency, and noise effects. This approach showcases SuperCity’s capabilities while keeping the product central. Percy the Pigeon, the brand mascot, appears sparingly to add a friendly touch, such as on the 404 page or in pop-up banners. Photography plays a key role in adding warmth, featuring diverse residents in everyday urban contexts—events, commuting, parking, and public spaces. All images share a consistent style: high-quality, bright, and energetic, with slightly elevated saturation to complement the core color palette.

Mascot Creation

For SuperCity, we created Percy the Pigeon, a custom brand mascot inspired by pigeons’ historical role as messengers and community members. Percy embodies SuperCity’s values: bold, fun, and grounded. Despite initial skepticism about pigeons, the mascot resonated with audiences, debuting at the app launch in El Paso, Texas, where he became a hit on jumbotrons, merchandise, and even as a photo opportunity.

Web Implementation & Integrations

SuperCity’s original website was hosted on Squarespace, and we explored two options: migrating to a more customizable platform like WordPress or enhancing Squarespace’s functionality. The team preferred to stay with Squarespace, so we extended its capabilities through advanced customization. Key tools included a high-quality Squarespace template with Fluid Engine for layout control and the built-in style editor for base design elements. Custom CSS injections and code blocks were used to override template limitations. We also integrated the website with external tools, such as a legal and privacy provider and a LinkedIn widget plugin.

Team

• Client: SuperCity
• Art direction: Tamara Shirin Shawkatova
• Web design: Tamara Shirin Shawkatova
• Mascot illustration: Katka Schwarz
• Content design & copywriting: Katy Mrvova
• Web implementation: Martin Križo

Deliverables included brand definition, visual identity, brand guidelines, web design, copywriting, and web implementation.