eleks

The story about

HOW ELEKS MADE ITS NEW WEBSITE

Our

Challenge and goals

Poor usability, lack of strong landing pages, outdated content — those were among the main reasons why ELEKS needed a brand new website. The challenge of creating a trendy website was in applying HTML5/CSS3 and developing a responsive design for mobile users - all within a short time frame.

people
Unique Marketing Identity

We needed to create a website with its own unique identity. The previous ELEKS' website was very much like its competitors', with similar UI, content, structure, and images.

mouse click
Improve Usability

We needed to significantly improve usability since the current website had problems with navigation, duplicate pages, and the inability to find information quickly and efficiently.

pad 3
Mobile Version

We needed to develop a responsive design for mobile users since the old website was extremely difficult to browse and view via mobile devices.

Stage 1

Concept and UX Design

We needed a flexible marketing tool. Also, we defined and analyzed our main usability issues that needed to be corrected on the new website. So, we defined our primary information and user needs and created 3 principle blocks on the main page. We needed our users to have fast access to our main features.

So, we started building the main page from paper notes
We created 3 main blocks of content.
Our divisions are displayed first on the homepage.
stik expertises
Representing all our products
stik products
The bottom section is reserved for news, events, and case studies.
stik bottom

WIREFRAMES

As soon as the prototypes of the main blocks were defined on paper, we started working on interactive prototypes. For better mobile usability and mobile experience, we began working on the mobile layout during the prototype stage.

  • from the desktop
    desktop
  • to the tablet
    table
  • to mobile devices
    mobile
and the main inner pages
  • expertise
    managament
  • technologies
    industries
    For all the pages
    we have created
    40+
    Prototypes
    produkts
  • customers
    team

Stage 2

Design

Our new website must correspond to the new ELEKS' branding style, have an innovative look and feel as well as have its own identity — but also be different from our competitor's websites. We decided to use basic-colored blocks in the design.

Eleks site image

Color Identification

We wanted to present our 3 main areas of expertise/services and our R&D division. With the user's
experience in mind, we gave each expertise a separate color theme.

  • software
    software
  • localization
    localization
  • software
    software
  • localization
    localization

    Expertise page design

    We decided to present each expertise like a product, so we supplied them with a nice visualization of our work and products.

    Graphics

    We created tons of PSDs and graphics to present ELEKS' expertise.

    40+
    PSD mock-ups
    and
    50+
    Illustrations
all page site eleks

ICONS

For better visualization, we needed cool graphics.
So, we created a set of icons for each expertise.

  • company
  • lc
  • sd
  • rd
  • ts
And some illustration,
for expertise page
Then we animated them
service

Stage 3

Development

We faced 3 main issues during website development.

1
Flexibility

For faster and easier development and further support we have developed library elements in order to easily and quickly create any page for our site.

2
New technologies

We have used HTML5 and CSS3 to create dynamic front-end and ASP.NET for fast and flexible back-end. Also, we host our site on Azure for faster page downloading.

3
Mobile layout

The Web has become more and more mobile oriented so we must consider mobile users. We created few mobile layouts for better user experience on any device.

ELEMENTS LIBRARY

Since the front-end required more flexibility, we designed and developed a library of all the elements in
all color schemes and conditions.

and many more elements...

Responsive DESIGN

Our new site must be mobile user-friendly,
so we had 2 choices:

choises
Separate mobile version

2 different sites
2 back-ends
Very stretched layout on tablets
More work with content

or
choises
Responsive design

1 front-end
1 back-end
Nice layouts on all devices
Content adapts automatically

Breakpoints

To cover all mobile devices, we defined the main breakpoints when the website
rebuilds for better usability on a mobile device.

960px Desktop
>1024px
desktop
w_1024
640px Tablet
960px
tablet
w_1024
480px Mobile
640px
big mobile
w_1024
We don't make layouts
for mobile devices less than 320px wide
320px Mobile
480px
320px<
small mobile
w_1024

Elements adaptation

For better mobile usability, we had to remake some
interface elements.

top menu

Menu adaptation

For better navigation on mobile devices, we rebuilt the top menu and header

Infographics animation

Usually, the section entitled "About the Company" is the most boring page on the website with lots of text
and long descriptions. To avoid that, we decided to present the information in
numbers and pictures — in other words, made into infographics.

  • 600+
  • 10
  • 40
  • 105
  • 115
  • 180
  • 285
  • 322
  • 385
  • 390
  • 408
  • 450
  • 500
  • 528
  • 545
  • 585
  • 595
  • 596
  • 597
  • 598
  • 599
  • 600+
Professionals
  • 800+
  • 5
  • 25
  • 105
  • 115
  • 180
  • 285
  • 322
  • 385
  • 390
  • 408
  • 450
  • 500
  • 528
  • 545
  • 650
  • 692
  • 700
  • 745
  • 785
  • 799
  • 800+
Delivered projects
  • 200
  • 8
  • 40
  • 105
  • 115
  • 120
  • 125
  • 130
  • 135
  • 140
  • 145
  • 150
  • 155
  • 160
  • 165
  • 170
  • 175
  • 180
  • 185
  • 190
  • 195
  • 200
Customers
combine all
154
L10n
220
Software development
160
QA & Testing
85
Administration

Back-end development

Our new website must be very fast and simple not only for our customers but also for the website
administrators. So, we created a nice visual website content editor.

Back-end
1
2
Front-end
editor

Easy visual content editing

The ability to edit real content and see changes without posting it on the
front-end

Editing content using
only a mouse

The ability to edit a real content and see changes without posting it on a
front-end

drag and drop box

Final

Results

Conversion improvement, significant image and brand improvement, market expansion
and some facts in numbers:

+
%

increase of visit duration

-
%

bounce rate reduction

+
%

Enhancement of website visitors