(Updated 2020.09.30)

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

strelka.com

(Info)2018, Strelka Studio

(Service)Digital branding, user experience, user interface, UX strategy, prototyping

Strelka Institute

Website redesign of the school

(In-house)

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

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

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
Promoting Education sections
Promoting articles and events

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

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

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
Special tag

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
Books

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
Menu button

Select work

(Updated 2020.09.30)