Background

I worked with the sponsorship team at Postmedia for a year and we were always building new products to sell to new and existing clients. ‘Argos Zone’ was the first dynamic page built targeting Argos fans to increase ticket sales.

Goal

To create ‘Dynamic’ best practices that will replace the traditional/editorial pages and increase conversion rates for sponsored content. By adding animated graphics and interactive elements throughout the page/microsite, it will create a more unique and engaging experience.

My Role

Since we used ‘Ceros’ as our online platform to build fast dynamic content (no coding required), I learned, experimented and tested the program to set best practices. ‘Argos Zone’ was the first project I built with its interactions and animations. I also trained Postmedia teams from marketing and editorial on how to use the platform and follow the suggested guidelines. Moreover, I collaborated with Peter Mogensen (IA) to conduct competitive research.

Live Link

http://argos.torontosun.com/p/1

Argos Zone - Desktop

Challenges

I wasn’t just building dynamic content best practices, I was also building Ceros specific best practices. Ceros is similar to other design programs, but it also have different tools and functionalities. Each project will differ based on the clients requirements, so I tried to cover the general format and use ‘Argos Zone’ as a visual reference to help deliver some of my points.

Best Practices

  • Since Ceros is not a responsive platform yet, you need to design two experiences. One for desktop and tablet and another one for mobile. Please use the suggested width and fold sizes to get better results
  • The landing page should include Postmedia logo, Client’s logo, CTA, ‘Paid Post’, social sharing icons, and navigation links if applicable
  • Headers should be sticky; only top header is sticky for mobile
  • To insure a good quality on Retina screens, please make sure all creative sizes are multiplied by 2

Feel free to expand photos/infographics outside the content area to create a more playful layout. However, pay attention to where these creatives are placed on mobile.

  • For interactive sections, instructional text must be placed to guide the user where to click.
  • Don’t leave mobile till the end; think ahead about the experience in all devices. For example, If this interactive section is a map with pop-up modules, resizing the map to fit into a mobile screen with all the + icons won’t be mobile friendly. Therefore, dividing the map into regions/tabs will have a better user experience for Mobile.
  • Try to use smart animations when possible. In this case, when a user clicks on the + icon it rotates to create the x icon that can be reused to close the popup.
  • Just because a certain interactivity works for Desktop, it doesn’t necessary means it will work on tablet or mobile. In the example below, if giving your user the option to scroll within a frame/embed or scroll outside of it works fine on desktop. However, a ‘View More’ option where it loads more content and pushes other content down works better on mobile.
  • Based on necessity, feel free to drop some elements on mobile to reduce scrolling.
  • In Ceros, you are designing for the largest screen size of each device. To make sure fonts are legible, it’s better to follow the suggested font sizes. Depending on the font used, you might want to increase or decrease the font slightly. Also, please always make sure that you are using even numbers; it’s just better for how Ceros resizes fonts.

Full Mockup