What can you make from one long line?

Single asked SoftWear to help tell perspective clients the story of Single service, its special features and their value.

Inspiration

Within the budget and timeframe

We never plunge into a new project without first understanding the conditions, budget and task the customer has in mind. We strive to synchronize our own thinking precisely along those lines. So, as we embarked on our journey with Single, we prepared and presented some concepts that we felt would solve the task before us and submitted these steps of the project and the timeframe for completing them. After hours of brainstorming, we decided to meld two main concepts into one promo-site. The methodical madness of our idea to utilise a 3D-game very much appealed both to us and to Single, so that was unquestionably the way to go.

Wireframes and digitals

Promo section

In order to explain the various features of the service, we created a fully animated story beginning with Single’s own special line and ending with a notify-me form for new clients to start the service. We gave much consideration to all the details and transitions, and created all the icons, buttons and images for the site.

The question game

Let's now consider the slightly eccentric idea of the 3D-game. We designed a way to connect it with all the basic values of the entire service and conceived a system of measurable parameters that let the player-customer receive a score. In the end, we solved the problem of creating an exceptionally engaging game. The results could even be of interest when shared with friends on social networks.

Making an image

For each of the five game levels we selected just one key image—at first glance, just a long, thin thread twisted into a weird arrangement apparently without rhyme or reason. But there’s a point, and just one, from which a player can see what the thread actually is.

There's a solution...if you look for it

The metaphors

First of all, we drew rough sketches of all the metaphors to submit to the Single team. We wanted to remove all doubt as to their simplicity and show just how recognizable they truly are.

The starting point for the distortions

It was necessary to create scalable pictures: for this purpose we accurately transformed the sketches into a vector path.

Creating the chaos

Then, in 3D editor we distorted the paths simply by allowing for random offsets in the coordinates of the Z-axis.

We ended up with a cartoon

Originally we made a video in which the camera flew smoothly round our distorted metaphors. But here our objective was an interactive game, not a cartoon. So, using a 3D rendering tool, we arrived at a set of raster frames for a camera fly-round cartoon.

2 GB

That’s the size of the game’s five-level storyboard, so downloading it into a browser simply wasn’t an option. We had to alter the storyboard by using huge resolution frames, which we fed into an automated script to be traced as vector paths.

Developers need material to work with

To do their job, developers have to have vector files, so our curves on the screen wouldn’t have been of much good. But everything worked out just fine once we put it all into SVG.

500 files

The storyboard for each image consisted of more than of 500 files. So we combined all the files into one.

But that was still far too many

The resources we ended up with for five levels of the game still took up an inordinate amount of memory, so we rid the files of all the excess baggage remaining from the export process and compressed the data with as high a ratio as possible.

All it took was just a bit of magic

We added some JavaScript and did a bit of conjuring on the server–and it was set to fly.

Three things we’re especially proud of

At SoftWear, this project became a genuine challenge from the point of view of a pure and clear design, and from the point of view of its technical implementation. We are proud of the result, but for us the work below is particularly significant.
The game works on plenty of browsers and on a huge number of devices. For environments where implementing the game was technically impossible, we created simplified versions so that a maximum number of Single’s potential clients could get involved.
Loading...
Designing a well-balanced system of measurable variables to show just how tough a player can be wasn’t the easiest thing to do. The technical aspects of collecting all the data during the gaming process and displaying the results was likewise no small task.
Максимальные координаты, по горизонтали и вертикали
Расстояние пройденное
курсором
At first sight there’s a deceptively simple moment: the form for submitting a perspective client’s contact data. We experimented with a number of iterations before deciding on the one that would make the form as accessible and clear as possible.
Send

Thank you!

We will let you know as soon as Single is available.

It’s right for any screen resolution

Raster graphics
Vector graphics

…and for any device, too

Android smartphones
Android tablets
Even the first-gen iPad
iPhone
iPad with Retina display

What’s under the bonnet?

The site and the game were put together using HTML5, and they both make use of all the most advanced browser features.
Wherever possible, we applied the latest advances of CSS to ensure that all the animations and transitions work smoothly and employ GPU acceleration.
The site is hosted by the popular open-source CMS Drupal, which has been developed and is maintained by a worldwide community of developers.
Adapted for use with any screen resolution, all graphic assets are stored in SVG format.

Development and support

We have done our best to make sure that the Single team could forge ahead without us to develop and maintain their own site. We’ve created templates for the blog, and set up, adjusted and deployed the site on one of the most popular content management systems. The site can be accessed in a number of different languages, which doesn’t in the least complicate matters as the content control is all collected in just one system. For handling new features and functions as they appear, the system takes into account the addition of new images and descriptions.

Marina Akperova

Director, Dept. of e-Services

When you start working on an exciting new project, you live with it and spend all your waking hours thinking about it. That's why it was so important for me to find a team that wasn't just good at what they do, but one that could share the enthusiasm and values of Single.

SoftWear's first presentation took away all my fears and showed that we'd met the right team to bring any daring UX-fantasy to life. The team loves their work, most of all when it's really challenging. They prove that words like “cannot do” are just somewhere out of their vocabulary.

When we started, we had to do something that nobody else had done before us. What we finally made is a great example of terrific team work.

Site
Game