City Year Website

After discussions with the client we established what the target audiences were and what their goals were. From this four personas were created as reference points for use throughout the project.

Now we knew who we were designing for, restructuring the information architecture of the site could begin. A number of example user journeys initiated with these personas in mind were created to help us get a feel of how they might interact with the site, and presented to show the client how we could help each user to achieve their goals.

From here we knew a relatively large site was needed and that it was to be content managed, and the wireframing process began. The layout was subsequently approached with reusable templates and modules in mind, and various bespoke user journeys and UI for important parts of the site (such as the sign-up process) were also created. Prototyping software (InVision) was used to create an interactive demo of the site which was then presented to the client, as well as the developer later on in the project.

Next the team started work on the visual design. In line with branding guidelines supplied by the client we made the most of their vibrant, positive colours to appeal to the younger audience, as well as to parents looking to apply on their behalf. The layout was kept clear and practical, with Google Material Design style content blocks used to break the page up into easily digestible chunks.

I also worked with the development team to discuss the build of the site and the CMS. I created animated videos in Adobe After Effects to demonstrate how the more complex UI elements would work.

And, of course, given the target audiences, the site needed to be completely usable on screens of all sizes.

The new site has resulted in a positive response from users, as well as a happier marketing team who are regularly monitoring and updating the site through its CMS (WordPress).

< Back to portfolio