Huawei Honor Cup IT Competition website and mobile application

Honor Cup is an competition in the field of information computer technology, held by Huawei. The purpose of the competition is to increase motivation for self—education and professional development of young ICT specialists. Our task was to create a competition website that would allow us to take part in all stages of the tests. In addition, to solve the task of our customers to reach and further retain the audience, we have developed a mobile application on iOS and Android platforms.
WEBSITE
DEVELOPMENT
Typography and colors

The pleasant font and bright accent colors were dictated by the Huawei brandbook, which inspired us to create light gradients that give dynamics to the design.

Aa

Century Gothic Regular
#d51c19
#f01b5d
#9807b0
#6e22b9
#5f67fb

We paid special attention to animation when creating the design, because the website of youth competitions in the field of ICT should be as interactive as possible.

One
Page
Scroll

The site implements the mechanics of onepage scroll interaction: each page is divided into separate screens, when scrolling the page, a sequential transition from screen to screen is carried out.

The school you dreamed of

The Online School section contains a unique database of webinars from leading experts in the field of ICT. Here, participants can not only prepare for competitions, but also gain advanced knowledge about technologies and methods in IT.

A convenient search through the catalog will allow you to quickly find the right webinar or pick up interesting courses for the user.
Clarity and consistency

The Competition Stages page uses horizontal navigation between screens, as opposed to the vertical navigation implemented on the other pages. Thanks to this, working with the competition timeline becomes more convenient, because we are all used to viewing the linear sequence horizontally, as on a ruler or graph, and not from top to bottom.

Simplified navigation between the screens of different stages makes it possible to quickly return to the desired stage, and the target action buttons always at hand help not to get lost and not to forget why you came to the site.
In the beginning was the word

The concept of splitting the page into separate screens gave us the idea to optimize the presentation and presentation of content: we made each screen represent a separate thought or topic — succinct and concise.

For screens where it is still necessary to present a large amount of information: lists of winners for several years, a list of prizes for the winners — additional navigation tools were thought out and implemented.
Not a single frame

One of the stages of the competition is a quiz, for which a mobile application has been developed. But  if for some reason the user cannot use it, no trouble: integration with the application allows authorized users to take part in the mobile quiz through the website interface.

Quiz

One of the selection stages is the completion of tasks for a while, in which participants must freely give the correct answer to a question on the chosen topic. Our task was to ensure convenience, continuity and safety at this stage.

The use of pulse triggers (in the form of an indicator showing how many questions have been skipped, how many answers have already been given and how many more are left) allows participants to properly plan the time allotted for passing the test and encourages them to continue fighting for the title of champion.
Be fully armed

Of course, the participants of the competition are full of emotions — it is necessary not to miss the day of submitting applications, to pass the competitions of each stage on time, and this is a constant check of mail in the hope that the results of the completed stages have come!

Making life easier for young geniuses, we carefully collected all the important data on one page and made an interactive map of the player, which shows what status each of the stages of the competition has, what results he personally has for this stage, when can we expect summing up.

Embrace the immensity

In total, we have developed layouts of 26 pages - 3 versions of each page to ensure coverage of all popular screen resolutions. Adaptive layout has become the key to the convenience of working with the site from any device, and integration with the application has created a single information space of the competition.

Mobile app
development

With the help of a convenient application on iOS and Android, participants can plunge into the informative, complex and so interesting world of IT. Our task was to create a modern, interactive, interesting quiz that will really captivate users.

Participants can watch webinars right now and postpone the webinars that interest them "for later", choose in which category and on which topic they are ready to fight with other players, receive bonus points for speed and percentage of correct answers, take revenge, go ahead, win.

To maintain the interest of players, additional tournaments are also held in the application, for example, the best player of the week in a given nomination.

As for the internal mechanics of the system, you can manage the content of the application and view the statistics of user access to data through a specially designed administrative panel.

Are special knowledge required to work with it, are complex solutions used? Our clients immediately warned about the importance of ease of working with the administrative panel, so any content manager can easily figure out the administrative section of the application in 10-15 minutes.

We managed to create an exciting gameplay for the participants of the competition,
as evidenced by the following indicators:

3961
the user took
part in the game
4104
app installed
24445
webinar views
via the app
337
the participants
passed to the next
stage of the competition
510746
API calls were made
by the application
in six months