Olga Khvan

From kazakh, OYLA [oɪla] is translated as "think". OYLA is a publishing magazine for youths about popular science and culture. Based in Almaty, but is distributed in more than 10 countries including South Korea, Australia, Netherlands, Switzerland and other Northern European Countries.

OYLA desktop version
My responsibilities
User Experience and Interface Design,
Visual Language for digital, Management of developers team

January 2017–April 2017 (4 months)
Visit live website →
1 Designer (Me)
1 Art director
2 Developers

I was working on this project being a designer
in Étage group
Translate print magazine OYLA into a digital environment. Create a flexible and easy-to-use tool for the content management team, and create different places for commercials.
In the beginning we talked with our client to understand main motivations and goals to make this project. After everything was set up, we gathered needed "documents": technical specifications for the website, magazine samples, information about target audience (current and desirable) and examples of the websites client liked.

Then we spent time to see types of content published in magazines as well as the main categories this content has. It helped us to form an Information Architecture for digital version. Once we got the general structure ready, we aligned it with the developers team, so that they could start their work on the backend part and start building main components on their side.

Information Architecture
After defining structure, I started working on wireframes. My first step was to create bigger "chunks" of the portal to understand how different parts of website will be interconnected.
Since OYLA's main goal is to make youths more knowledgeable and foster curiosity, we also needed to reflect it on the website. One of the ways to do it—give multiple way to explore topics interesting for the user.
Besides clicking on content on the main page, users can explore it in 4 different ways:

1. By category from header.
2. Using search if they already know what they want to read about. It can be certain topic, name of the author or specific article.
3. By tags if they are reading an article. As was shown on IA scheme, tags can belong to multiple categories at the same time.
4. By recommendations that appear in the end of each article.

Users can also save articles they liked to favorites and access from Personal profile.
Content building
Content wise OYLA is very interesting, because it has both permanent team of designers and authors, but they also collaborate all the time with other authors, illustrators and illustrators. Thus articles in print magazine look very different. The same approach we wanted to translate into digital environment.
By looking closely at how OYLA structured articles, I realized that the important part of those was different quotes, footnotes, additional schemes. So together with developers we came up with an idea dividing the page into two parts: smaller column from the left for footnotes/details and bigger column for the main content.
Everything is controlled from CMS, where editorial team can choose different types of content and rearrange them as they like.
Example of an article
Before to buy OYLA subscription, people called to help-desk and did everything over the phone call. Strategically, release of the website was important because it created a more convenient way to buy subscription for both print version. Moreover, digital version created another way of monetization for the magazine.
Users have multiple ways how they can subscribe:
  1. By clicking floating button from the right
  2. By going to personal account
  3. By going to "subscribers only" article and choosing to "subscribe" from there.

Subscription is managed through the personal account that can be integrated with social networks (Facebook, VKontakte).
Sections for commercials
Placing different advertising was another way of digital monetization channel.
So when designing, I had to keep it in mind and come with different designated spaces for commercial.
Another way to place sponsored content is to have a whole designated category for the sponsor. Our developers were able to make header flexible.
For example, OYLA has a partnership with Microsoft throughout the month of July. They produce thematic content that is displayed on both main page and in designated section. This approach is more time and resource consuming, but feels more natural and collaborative, so users would less likely perceive as noisy advertising banner.
Digital branding
Client wanted OYLA to be such a portal that would be considered "cool" among youths and teenagers. So that they would share content from it. By analyzing what interested youths at that time, we explored different visual directions. Finally, we decided to leverage playful, trendy and tech nature by using naive, brutalist, colorful style, inspired by retro interfaces, simple shapes and Paul Rand.
Style guide
Key takeaways:

As we worked on this project as an agency, I had not opportunity to test out some of the assumptions we had. If I had an opportunity, I would definitely do rounds of usability testings with youths. Another thing I notice coming back to this project years later is that some of the visual elements disturb you too much, especially, while reading article about abstract astrophysics. For example, header could have two different states: normal and compact, so that when a user reads and articles, it does not take that much space.

Also I would add more interactivity and connection with OYLA team: more obvious way of get in touch, different tests and trivia, maybe, even propose own content. For instance, for DIY section readers could submit their own tutorials.