1+1 Media Corporate Site
How to improve the design of a corporate website without loss of traffic and get + 18% of sessions from mobile devices.
image
Type:
corp.site
Year:
2016
Client:
1+1 Media
Goals
Together with the client, we wanted to create common rules for the holding company's web projects on the example of the main corporate site. Also there were several experimental tasks for 1Plus1 - the distribution of user flows to target site's sections, simplification of navigation without functional losses, and the creation of adaptive design with a focus on mobile use.
UX & Prototyping

The original site structure was complicated and cluttered. So that we revised the grouping of the content and functions and distributed them into several sections. Those section we designed as landing pages.

At the beginning

The original site structure was like this – complicated and with multiple sub-sections

image
Ми вирішили перетворити цю структуру за напрямками діяльності компанії, зменшити кількість батьківських розділів і зробити вкладеність тільки для тих аспектів, які дійсно потребують поглиблення.

And that's what happened

The structure was reduced to 4 key sections: Media, Career, CSR and Production. The home page and each section page is designed as a landing to motivate the visitor to learn more details and get deeper.


We used the long-scroll pattern as the basic тфмшпфешщт principle - this is one of the typical navigation patterns for mobile devices that migrated to the web.


Such an approach requires a high quality of material to engage users. But 1+1 Media took this challenge with us.

image
While we critically changed the UI appearance and site-map, we have retained the structure of the links so that client didn't lose search-positions.
Additional navigation

The page size increased, so that we added a side panel with anchors to speed-up the transitions between sections of information.

image
Interesting details

For the different departments we created an animated illustrations and added a funny hover for portraits of top management ;)

Internal pages of channels and services organized by widgets and therefore can be modified through the control panel. Video player is a custom-html-built with priority for high quality video, so that the content always looks exemplary.

slider image
slider image
slider image
slider image

Mobile version

Site is responsive but we created a special experience for mobile users, as the site behaves as a native application - interactive and dynamic.

image
Svetlana Paveletskaya, PR Director 1 + 1 Media

"The new site united the interests of our direct customers and company's stakeholders. Aurocraft made it with love & passion!"

Technical features

The site is built on a SPA-architecture, as a one-page application with a widget content management structure.


We used vue.js ss the front-end of the framework and node.js express-framework for the back-end. Client-server interactions are built on RESTful-principles.


We are especially proud of the minimalistic aesthetics of the control panel and happy that it looks attractive and understandable for numerous content managers :P

image
Results

The updated site has become much more popular!


The client received + 28% of new sessions from the PC and 18% from mobile devices, and direct traffic grew by 22% (as of April 2017 and in comparison with the same period in 2016).


Also site started to load 6% faster than the original version ;)

1+1 Media Corporate Site