Kubu Waterrr Site
web design, user experience
web design, user experience
It was a new product promotion, a challenge: kids could submit their rap songs. They could win a Sony Ericsson Xperia Play. I had visual assets: POS print files, and I had to make a branded page for the kids (6-12 years old).
I had to make all the following pages:
01 main page (show the products, the tv commercial, the song from the ad and a lint to a game - these were on the left side)
02 main page with tv commercial player
03 game description
04 rules
05 registration panel
06 edit
07 forgotten password modal
08 recording
09 my recordings
10 list of the recorded songs
A few page I had to restore from the source file.
I had to make all the following pages:
01 main page (show the products, the tv commercial, the song from the ad and a lint to a game - these were on the left side)
02 main page with tv commercial player
03 game description
04 rules
05 registration panel
06 edit
07 forgotten password modal
08 recording
09 my recordings
10 list of the recorded songs
A few page I had to restore from the source file.
01 main page
The site starts with rap music from the tv commercial (you could turn it off with an icon).
The client wanted to place the products, the tv commercial, the song from the ad and a lint to a game - these were on the left side. And product description and advantages on the right side. In terms of design, I had to follow the brand guidelines and use certain fonts.
The site starts with rap music from the tv commercial (you could turn it off with an icon).
The client wanted to place the products, the tv commercial, the song from the ad and a lint to a game - these were on the left side. And product description and advantages on the right side. In terms of design, I had to follow the brand guidelines and use certain fonts.
02 main page:
If you clicked the play button, it played the tv commercial in a custom player.
If you clicked the play button, it played the tv commercial in a custom player.
03 game description:
It's a static page with the contest's description.
It's a static page with the contest's description.
04 rules:
A static page.
A static page.
05 registration panel:
A form with custom input fields.
A form with custom input fields.
06 edit form:
Users could edit their personal and contact information here.
Users could edit their personal and contact information here.
07 forgotten password modal:
When a user clicks the "forgotten password" hyperlink.
When a user clicks the "forgotten password" hyperlink.
08 recording:
This is an important page of the site. With the audio recorder, you could choose a loop and start recording: make your songs and save them. The recorder is on the left side, and its description on the right.
This is an important page of the site. With the audio recorder, you could choose a loop and start recording: make your songs and save them. The recorder is on the left side, and its description on the right.
09 list of your recorded submissions:
Browse your submitted songs. You can play them, delete them, send them in (apply to the contest with the chosen songs). Cancel applications, delete your songs.
Browse your submitted songs. You can play them, delete them, send them in (apply to the contest with the chosen songs). Cancel applications, delete your songs.
10 list of all the songs from all the users:
Interactions were: you could sort by date, search uploaders' names. Listen to the songs by clicking the play button, and vote for the ones you like (with the big "szavazok" - "vote" button). Each song box displays the numbers of votes at the right bottom corner. Pagination at the bottom (out of this printscreen).
Interactions were: you could sort by date, search uploaders' names. Listen to the songs by clicking the play button, and vote for the ones you like (with the big "szavazok" - "vote" button). Each song box displays the numbers of votes at the right bottom corner. Pagination at the bottom (out of this printscreen).
