
### Identity

The brand's visual language is constructed around the idea that clothing design and the narrative should speak louder than graphics. Simple, almost default typography is used around photography rich layouts and messages.

### Online experience

The site's structure is made out of components to easily switch focus to relevant events: collection launch, campaign, or sale announcement. The unique experience was designed for campaigns to follow the narrative of each story.

The site is deeply integrated with its sister project, Perfect Mag, which builds a global community of women. Articles and clothing items are interlinked to tell a coherent story.

![/](index.mp4)

![/lookbook](lookbook.mp4?size=sm)

![/campaign](campaign.mp4?size=sm)

![](lookbook-2.mp4?size=lg)

![](model.jpg?size=sm)

![](catwalk.mp4?size=sm)

PN is a Los Angeles based fashion startup with all pieces handmade locally. The brand explores new essentials for the global community of women. The platform's language reflects constant research and is always transforming.

Perfect Number


Platform is based on the following concept: (a) Researchers create nodes by describing a specific event that happened or is happening in a specific area. (b) Nodes are connected by researchers using causal relationships. The result is a network of events, where each event can be represented in two states: as cause, or as effect.

## Research

![Documentation](docs.jpg)

The preparatory work required an analysis of the audiences involved, interviews with researchers, and the study of problem categories. The current stage is data collection and testing.


## Mapping

![Node and User attributes](mapping.jpg)

Prior the interface development stage, the functionality of each entity of the platform was analyzed. Such a map makes it easy to navigate through numerous attributes during prototype development.

## Interface

![Network view](area-network.jpg)

![Globe view](area-globe.jpg)

For non-researchers, the platform provides a possibility to discover subjects of interest, find trusted sources of information, subscribe for updates in your region, or follow subjects. For more information please visit platform's website. You can also follow updates by subscribing to the newsletter.

## Communication

![](landing.mp4?controls)

At this stage of the project, the audience for the landing page is predominantly researchers. The page answers questions "For whom", "How it works", provides answers to the immediate questions, indicates the stage of the project, and asks for contribution.

A web application that helps interconnect environmental events and track updates on a given subject in a specific region. The platform unites a wide audience of researchers by building connections between topics they study. The public part of the platform gives everyone the ability to discover and follow topics of interest.

Rill—Common Connections

Systematization of OS interactions, analysis of high-traffic areas, rapid interaction prototyping for leading smartphone manufacturer.

OnePlus Oxygen OS

Development of hi-level interaction concepts into tangible prototypes.

Google Pixel UI


## User experience research

The platform allows you to publish courses, leave a request for a course, as well as become a facilitator after successfully completing the course. The platform's approach to copyright goes towards an open source model, which provides new ways of studying. This requires additional attention to possible states of the courses and user roles.

![Breaking down the platform into entities, looking into its attributes and actions](mapping.jpg)

![Looking at system reactions to user actions](flows.jpg)

![Prototyping key user journeys](prototype.gif?size=sm)

---

## Landing and visual design 

The purpose of the landing page consists of three aspects.

1. To briefly talk about the project, without going into details of the specific mechanisms of the platform, since they are under development and are changing.
2. To reflect the values of the future community through aesthetics: the platform should not look like another big-tech startup—it is lightweight and focused. 
3. To have a gathering point for a community that is actively developing on a social network.

![](landing.mp4?controls)

Be the first to test the platform by signing up for updates on the platform's site.

The platform helps self-directed learners of a young age to meet, chat and share their education programs with others, or join programs of their interest. It provides simple tools to organize and manage courses for small groups.

Four Flowers School


### Client

Headquartered in Los Angeles, Xsolla is a video game industry company, providing game developers and publishers with payment, billing, distribution, and marketing tools.

### Problem

Due to rapid service growth and newcomers' requests, a design system had to face new challenges and become more flexible.

### Solution

Updated design system allows Xsolla to create a consistent interface across many services, simplify design team collaboration and maintenance of the platform.

---

### Style guide

Vibrant colors and gradients follow the gaming spirit and are used to inform UI element states and media placeholders. The guide includes a wide typography scale to correctly structure information in the interface. Different elevation levels distinguish the working areas of the application.

![](guides-1.jpg)

![](guides-2.jpg)

![](guides-3.jpg)

### Layouts

There is a big range of layouts to accommodate complex information throughout the application, but all of them share the same principles defined in the guide to create a consistent experience.

![](layouts-1.jpg)

![](layouts-2.jpg?size=sm)

![](layouts-3.jpg?size=sm)

### Components

There are over 250 components with states of various complexity for controls, selectors, navigation, tables, to name a few. A storybook can be found at [uikit.xsolla.com](uikit.xsolla.com).

![](components-1.mp4)

![](components-2.jpg)

![](overview.mp4)

---

### Service design

Using a developed design system, it was possible to rapidly assemble logic and screens for user flows of a Publisher account.

![Launcher configuration map](map.jpg?size=lg)


Systematizing and developing a design system for an indie game publishing platform during the major redesign.

Xsolla, Inc


![Progam teaser](program-teaser.mp4)

![Block combinations](pages.jpg)

![Index page with draggable popups](index-screencast.mp4)

![](mobile-01.jpg?size=sm)

![](mobile-02.jpg?size=sm)

![Fugue Tails by Radim Peško and William Pro by Maria Doreuli](type.jpg?size=lg)

![](mobile-04.jpg?size=sm)

![](mobile-03.mp4?size=sm)

### Mentions:

- [Hover States](https://hoverstat.es/features/the-new-normal)
- [Site Inspire](https://www.siteinspire.com/websites/7488-the-new-normal)
- [Interview on the process at Strelka Magazine](https://strelkamag.com/en/article/the-new-normal-design)

Visual language and website for the theme of the 7th academic year at Strelka Institute. The research focuses on the new contemporary condition, which has emerged with the rapid development of technology, including machine intelligence, biotechnology, automation, and alternative spaces created in VR and AR.

The New Normal


![Site overview](screencast.mp4)

![Interviews embedded in a mall mural](index.jpg)

![Seoul Trip photo report](seoul-trip.jpg)

![](mobile.jpg)

![Interview identity recap](id-recap.mp4?controls?size=lg)

![](id-team-boids.jpg?size=sm)

![](id-team-phare.jpg?size=sm)

![](id-team-track-the-mall.jpg?size=sm)

![](id-titles.jpg?size=sm)

Visual language and site for South Korea field trip project during education program 2015/16 at Strelka Institute. Students developed six proposals that could change the mall as we know it.

Disrupt the(m)all


## Goals

- Optimize the launch of competitions
- Quickly create typical sites for competitions
- Collect competition materials in one place
- Collect applications and export data.

![](map-admin.png)

The editor's interface is divided into logical stages of the competition. Thus, functionality that is not required at a particular stage can be removed.

![Admin panel: competition stages, participants, FAQ](admin-pages.jpg)

The system provides full control of competition stages. All changes are immediately displayed on public pages.

![Public pages can be customized with various components, fonts, and color schemes](builder.jpg)

![](popup.jpg)

![Components of a site builder](components-builder.jpg)

The participant gets access to all the necessary materials for each stage of the competition separately. After the stage has been completed, access to it is limited. With this logic, the participant gets only up-to-date information within the interface.

![](map-user.png)

![Building blocks of admin panel](components-admin.jpg)


A flexible system that simplifies the launch of architectural competitions at Strelka KB using preinstalled tools.

Constructor KB


![Student overview timeline for 2 years of education](pages-1.jpg)

![](pages-2.jpg)

![](site.mp4#t=0.1?controls)

![](mobile-1.jpg?size=sm)

![](mobile-2.jpg?size=sm)

![Identity and posters by Anna Kulachek](id.jpg)

Admissions site for applicants of a joint masters program by Graduate School of Urbanism at HSE University and Strelka Institute. The program is aimed at the next generation of Urban Designers, combining the best of the Russian Academia and the cutting-edge experimental project-based education.

Advanced Urban Design



## Client

Strelka Institute for Media, Architecture and Design, consistently rated as one of the top 100 architecture schools in the world by Domus magazine since its founding in 2009. Among the many leading authorities in the fields of architecture and urbanism that direct the school’s educational programme are Rem Koolhaas, Reinier De Graaf and Benjamin H. Bratton.

![Fasade © Strelka Institute](facade.jpg)

## Redesign

As Strelka is constantly changing and the scope of the content it is producing is expanding, the Instituteʼs main website should follow its growth. After research and analysis of user interaction the following key aspects to be addressed were outlined:

- Present up-to-date information on the activities
- Make the structure scalable
- Add interaction between the sections/content

![Design overview](overview.mp4?controls)

All design decisions were aimed at improving the relationship between the content, its sorting and filtering, as well as display options.

- Feed
- Tag system
- Focused content viewing
- Content viewing options
- Adaptive web

---

### Feed

Each department of the Institute has a website section with a feed which consists of blocks. The main page of the website shows updates from all the various sections using the same blocks.

With feed moderation you can shift user’s focus to the information that is most relevant during a particular period: in the Summer—to list ongoing activities and events, in the Winter—to present research outcomes and announce admission process; to promote books and sponsors, etc.

![Index feed](feed-index.jpg)

![Promoting Education sections](feed-education.jpg?size=sm)

![Promoting articles and events](feed-events.jpg?size=sm)

There are 3 types of blocks, each of them with a specific functionality: Hero for featured articles, Medium for interactive special and service blocks, Standard for everything else.

![Various types of blocks of Index](blocks.jpg)

### Focused content viewing

The hierarchy of some sections has up to 4 levels. In order to focus user’s attention on the content and cut less relevant information, the layer system was used. *Layer 1*—sections and subsections. *Layer 2*—content pages: articles, events, books, programmes, etc.

![Content pages of Education, Press and Events sections](content-pages.jpg)

### Tag system

Previous clustering of content based on themes was replaced by tag function which allows to scale the system and search easily. There are *main tags*, *special tags* (for sponsored events, or a special series), as well as *content tags*—all of them work the same way. When the user filters content by using a tag, s/he sees a page with a dynamic header depending on the query.

![Selecting main tags](main-tags.mp4?size=sm)

![Special tag](special-tag.jpg?size=sm)

### Content viewing options

Alternative viewing of the sections allows to display detailed information on the content and provide additional functionality without complicating the UI.

- *View 1*—focuses on the featured content and provides related information.
- *View 2*—provides detailed information about the content and/or chronological order.

![Students](students.gif?size=sm)

![Books](books.gif?size=sm)

### Adaptive web

Mobile version provides compact information display and addition of format-relevant functions. Some of them are fast event registration, quick sharing on social media, contacting the Institute departments.

![Book's action](mobile-menu.gif?size=sm)

![Menu button](mobile-book.gif?size=sm)

Major website redesign for Strelka Institute for Media, Architecture and Design. The project is cancelled.

Strelka Institute


![](logo.png)

![](index.mp4?size=sm)

![](products.jpg?size=sm)

![](card-speaker.jpg)

![](card-speaker-back.jpg)

![](case.jpg?size=sm)

![](product.mp4?size=sm)

![](mobile.jpg)

Online catalog for a developer and manufacturer of professional speaker systems. The company prioritizes the creation of shapes and forms coherent with the aesthetics of interior space. The online catalog follows the same principle, using an ascetic visual language and functional-driven interface.

Alphatone


![](palace.jpg)

![](beam.jpg)

![](rings.mp4)

![](forest.jpg)

![](mountains.jpg)

![](trees.mp4)

![](columns.jpg)

![](pyramids.jpg)

![](layers.jpg)

A music video for musician & singer Jekka. “The 3D-animated journey through mesmerising graphite landscapes [...]. Labyrinths and pulsing geometric shapes represent the eternal cycle of the universe as we follow the shining light into rebirth”.

On and On


![](event.jpg)

![Main titles](titles.mp4#t=12?controls?size=sm)

![Event entering titiles](events.mp4#t=9?controls?size=sm)

![Series of posters, each element is assiged to a specific event](posters.jpg)

![](flag.jpg)

![](bubble.mp4?size=sm)

![](star.jpg?size=sm)

![](schedule.jpg)

Visual identity for an interdisciplinary program with a series of workshops, lectures, and performances that took place during the Summer Programme at Strelka Institute. The Polytechnic Museum is one of the oldest science museums in the world. Located in Moscow it emphasizes the progress of Russian and Soviet technology and science, as well as modern inventions and developments.

Projects

Perfect Number

Identity

Online experience

Projects