Our approach to the project was mobile first—a must considering the young audience who almost solely uses a phone to get online.
We started off by mapping out the user journey. We identified the different touchpoints of participation and how the website would adapt throughout the challenge.
Based on the journey we designed the Information Architecture. We kept it extremely simple, sticking to a Who, What, When, Where and Why structure.
With the Information Architecture defined, we moved onto wireframes. We started by tackling the sign up form, one of the most important parts of the microsite. It needed to collect all the necessary information, without overwhelming participants. After a few tests, we opted to divide the form into separate steps to make the sign up process feel quick and painless.
From a visual standpoint, the website needed to have the professional aesthetic of a bank, while appealing to a younger demographic.
This was accomplished with the use of a clean aesthetic with bold fonts, bright colors and eye-catching imagery.
We also made sure to keep the layouts as modular as possible, so that the site could quickly adapt to the different stages of the challenge. Blocks of content could easily be swapped out, without having to redesign everything.