COMPLETED PROJECTFLAGSHIP CASE / WEB & MOTION

SOLARCITY

A corporate website for SolarCity connecting investment, development and energy asset management. Large-scale visuals, interactive diagrams and scenarios explain how the components work as one system.

STRATEGY / UX/UI / DEVELOPMENT / MOTION

WEBSITE LIVE

CLIENT

SolarCity

INDUSTRY

Energy / investment

WEBSITE TYPE

Corporate website

SERVICES

Strategy / UX/UI / development / motion

WEBSITE LANGUAGES

UA / EN

YEAR

2026

01 / CONTEXT

SolarCity is an investment and development platform for creating and managing energy assets. Its model connects land, generation, storage, grid integration and operations.

The website needed to present this system to investors, asset owners, businesses and strategic partners. We brought its different layers into a coherent digital presentation, moving from the overall vision to operating principles, project scenarios and the start of a conversation.

Conceptual visualization of a hybrid complex with solar panels, energy storage and a substation — HYBRID COMPLEX / VISUAL CONTEXTConceptual visualization of energy infrastructure.

02 / CHALLENGE

Explain an energy asset through the relationships between its components.

Investment scenarios, engineering relationships and development stages needed a shared presentation logic. We needed to retain the technical substance while giving visitors a clear order in which to explore the platform.

ORIENTATION

Organize the platform, infrastructure, investment model and experience into clear sections.

EXPLANATION

Show how generation, storage, the grid and consumption interact through diagrams and scenarios.

SEQUENCE

Move from the overall vision to specific components and the stages of asset development.

DIALOGUE

Define the next step for investors, businesses, asset owners and strategic partners.

03 / STRUCTURE

The corporate website progressively introduces SolarCity’s model. The opening screen establishes scale, the platform section explains the approach, and an interactive diagram introduces the components of the energy system.

The page then moves through investment scenarios, a hybrid complex and examples of application. The holding structure and development stages explain how the work is organized. The final section invites visitors to discuss an opportunity.

PLATFORM
ENERGY SYSTEM
INVESTMENT SCENARIOS
COMPLEX & PROJECTS
HOLDING & DEVELOPMENT
PARTNERSHIP

04 / ART DIRECTION

The visual direction draws on the scale of energy infrastructure. Deep blue surfaces, cool light accents and large-format conceptual visuals create a setting in which technical relationships become part of the composition.

Large headings alternate with concise explanations, diagrams and data. Coordinates, numbering and fine rules introduce precision. Generous spacing gives the content a measured reading rhythm.

ART DIRECTION / ENERGY CITYConceptual visualization of energy infrastructure.

05 / DESIGN SYSTEM

A shared system of color, typography and components connects visual storytelling, technical explanations and interactive elements.

SOLARCITYAa / 0123456789

#061120

#102740

#F3F6F8

#35D6E4

01 / TYPOGRAPHY

Large headings establish the main idea, body copy develops the explanation, and compact labels support diagrams and specifications.

02 / COLOR

Deep blue surfaces form the base. White and muted blue distinguish text levels; blue and cyan identify active states and flows.

03 / GRID & COMPONENTS

Numbered steps, markers, scenario controls and recurring section headings give the page a consistent rhythm. Wide visuals alternate with focused explanations.

06 / MOTION / INTERACTION

Motion helps visitors read the system. Selecting a node in the interactive diagram changes the explanation and highlights its connected flows. The hybrid complex map explains the roles of solar panels, storage, the substation and grid connection.

The chart offers three explanatory scenarios: energy shifting, grid arbitrage and asset management. Switching scenarios updates the curve, markers and phase descriptions. Pointer and keyboard controls let visitors explore a moment within the daily cycle. Transitions and animation account for reduced-motion preferences.

Explore the interaction.

Select components and scenarios. Point at the curve or use the time slider.

01 / SOLAR GENERATION

Generation turns a site into a source of energy.

Site parameters and the consumption profile define the architecture of the future asset.

Interface fragments from SolarCity. The daily curves reproduce illustrative scenarios from the project’s design.

07 / RESPONSIVE

The tablet and mobile screens show how the composition adapts to the available width. Multiple columns become a vertical sequence, navigation opens in a dedicated menu, and the energy system’s nodes become a grid of cards on phones.

On tablets and phones, the chart retains three scenarios: energy shifting, grid arbitrage and asset management. Switching scenarios updates the curve and markers, while selecting a point updates the time, phase and explanation of the daily cycle. At mobile widths, labels are displayed separately and the explanation sits above the chart.

Tablet and mobile views of the SolarCity corporate website.

08 / SELECTED SCREENS

The first screen presents the investment model chart: three energy asset operating scenarios, key moments in the daily cycle and an explanation of the active phase.

The second screen introduces the development process: strategy, site assessment, design and capital. The sequence and points of responsibility turn the platform’s overall vision into a concrete process.

THE SYSTEM IN DETAIL

First, the chart and its asset operating scenarios. Then, the development sequence.

SolarCity screen showing the daily energy curve and three energy asset operating scenarios — 01 / ENERGY SCENARIOS

SolarCity screen showing energy asset development stages, from strategy to implementation — 02 / DEVELOPMENT

09 / RESULT

SolarCity’s corporate website is live in Ukrainian and English. The approved design has been implemented with responsive layouts and interactive explanations of the platform’s model.

We created a digital presentation that brings investment, infrastructure and development into a shared narrative. Visitors can explore the platform, examine its components and move towards discussing their requirements.

LIVE

CORPORATE WEBSITE

UA / EN

TWO LANGUAGE VERSIONS

MOTION

INTERACTIVE SCENARIOS

OPEN WEBSITE

NEXT PROJECTSOLARFAMILY→