Red Planet Case Study: Development of Creative Corporate Website

Scroll to continue

Story Behind

We were asked by uprising revenue growth agency to develop a creative corporate website. Usually, we do not take the works on corporate websites. However, client’s professionalism and dedication to the work has brought our interest, as well as the intense use of AngularJS and rich animations inside the project.

Red Planet itself drives corporate and startup revenue growth by combining startup inventiveness, speed and disruption with corporate resources, distribution and brand power to create new digital solutions. Recently the company has been acquired by Deloitte. And we were happy to take part in their uprise.

/0

D

e

v

H

o

u

r

s

/WEB

D

e

v

P

l

a

t

f

o

r

m

s

01use cases

Navigation

The website design plays around the idea of multipurpose grid system consisting of tiles.
The tiles are basic structural units used for content ‘carrying’. All tiles can be swapped, changed and the content can be edited inside of those tiles.

The website always opens on the central page positioned in the middle of the Main Menu bar. This is a horizontal axis that stands as the anchor on the grid. The Main Menu bar is the central section of the website and all the other tiles run vertically from it.

Users can navigate from tile to tile by using keyboard cursors, mouse or by swiping left-right, up and down on the touchscreen. Alternatively, if you click the righthand side of the screen, it will take you to the next tile on the Main Menu, the left side of the screen will take you to the previous tile on the Main menu.

main menu

02use cases

Mobile View

The client chose a landscape orientation of tiles and it definitely works well for tablets and desktops. With a smartphone, however, landscape mode for the tiles looked too small. Therefore, for mobile devices, it was decided to change tile shape to portrait. Additionally the support of portrait orientation was added to tablets.

03use cases

Extensive
Admin Panel

Basically, our client wanted the ability to change any tile on the website including Main Menu Bar. Therefore, we extended administrative access to all the tiles of the website, so the client could add new tiles to the existing sections or even create a new section if needed.

When adding a new tile, the editing process is visualized by a number of steps:
1. Choose whether you are creating a Main Menu tile or a Content tile;
2. For the Main Menu tile, admin can modify only 3 elements: Title, Background and Font Colors;
3. For the Content tile, admin has more options to choose from: Text/Form, Media/Video, Gallery or Blog Post.

We tried to keep the same sense of motion in the admin panel as on the frontend side. That is why we added the drag and drop feature in order to allow website’s admin create new tiles and seamlessly move them to a different position on the grid if so desired.

Technologies

AWS EC2

PHP 5.4

Yii2

- Bootstrap- SwiftMailer- Transliterator

WebServer

Apache2

AWS RDS

MySQL 5.6

Frontend

HTML

- TintMCE- Ionicons

CSS

- Bootstrap

- jQuery- jQuery UI- Moment.js- Underscore.js

Design

We couldn't boast the designs since they were provided by the client, but we liked them so much back then. Therefore, we transferred designs pixel-to-pixel, respecting all the indents and guidelines as they were provided by the Red Planet team.

Frankly speaking, we are very proud of bringing those designs to life. Even after so many years passed, the website still looks stylish and innovative.

Focus Point

The focus point is a kind of a “window” onto the grid. It is fixed in the center of the screen where the selected tile is presented with 100% opacity. At the same time, parts of the neighboring tile are visible too, but they are faded out to the opacity of 50%.

In addition to opacity ‘trick’, background remains still during navigating, this amplifies the focus point additionally.

Sidebar

This side menu bar is represented by the universal menu symbol, which is ironically also the symbol of Red Planet. This section is mainly made to provide ease of use to recurring visitors. For instance, 70% of visitors usually use the standard menu button to get to the Contacts section.