Spice up your mobile campaigns with better design
Mobile campaign content provides a great opportunity to get creative with your design skills. Let’s play with the core principles of design to to breathe some life into traditional, cookie cutter layouts.
Designing content for mobile can often be a reductive exercise — take the website/desktop version, pile everything into a 1-column or 2-column grid, and remove any non-necessary elements that don’t fit. Combine this with the fact that in most cases data is being pumped into templates via a CMS, results can be pretty ho-hum. Considering the mobile-first landscape we live in, this isn’t the place to be compromising on design effort.
The Traditional Approach
Take a look at image above. You’ve probably seen it many times before. Now don’t get me wrong, the above layout is very functional, and is easily filled with content from a CMS without breaking. A product listing powered by a smart content engine that knows my favourite products and what I’m likely to purchase next can be very effective. However, in situations where we have editorial or campaign-style content, (seasonal promotions, gift guides or new product releases) surely we can get more creative.
Let’s quickly revisit the Principles of Design to evaluate where we could be doing better. Remember, the Principles are the basic rules designers use when assembling the different elements of a layout. A successful design will contain:
- Unity
- Balance
- Hierarchy
- Scale
- Repetition
- Emphasis & Contrast
Let’s focus on these last two Principles. In the Outdoor Living product listing shown above, you can see excellent use of Repetition. From a UX perspective, we love repetition––it helps to enforce design patterns and makes information consumption easy for users. However, it isn’t particularly exciting to look at, and can sometimes leave users a little lost. i.e. Are there things on the screen that I should pay more attention too?
To save us from the monotony of Repetition, we have Emphasis & Contrast. In this second example below, I’d like to use this principle to accomplish two goals:
- Add more visual interest and dynamism into the layout.
- Nudge our user’s eye towards certain elements that merit more attention.
The application of Emphasis mustn’t be too heavy handed. When used overzealously, you’ll be left with a chaotic layout that is difficult for users to parse. Let’s look at an example to explain this better.
Our example in this case is a retailer who has created a seasonal category listing for patio products. The content consists of products which have been specifically selected to promote as a part of this campaign. The original layout here is pretty standard:
This type of layout is great if the content is being filled-in automatically. However, there are a couple things I’m not loving. The Sectional Set is an important, big ticket item, but appears small and loses a lot of detail because it has been squeezed into a square image container.
There’s also a lack of hierarchy. None of the products really stand out. With this in mind, let’s pick a couple of the items to emphasize, by playing with their scale and alignment.
You’ll first notice the Sectional Set plays the hero now. It’s image ratio works much better by letting it take the full column width. We can actually see the wicker texture now! An Editor’s Choice badge tells our users this product is worth checking out.
The Seahorse Pillow has also been scaled-up and cropped, so we can see the fabric pattern clearly, which is the real selling point of the product.
Similarly with the Portable Gas Grill, adding a second image to the grid tells more about the product story. It’s not just a grill that wheels around, it folds up nicely too!
The principle of Repetition has been maintained by ensuring consistency in typography and grid rules. While there is more diversity in the layout, making sure elements still align to common grid lines ensures it doesn’t feel too chaotic.
The net result is a more dynamic layout with clear points of interest.
In this final iteration, we push the Emphasis & Contrast even further. This layout is approaching the threshold of feeling a bit chaotic but can still work since it isn’t a very long listing. The fluidity of the grid in this case almost approaches catalogue style design.
Hold on. This looks like a lot of custom dev work is required!
A very fair point. While it’s easy for us designers to create layouts like this, implementing these from a developer perspective can be timely and costly, especially if this is part of a mobile app that would require coding and app updates.
One solution is to create several different product modules with different layout options that all still fit together in any order. Designers can then pick from a catalogue of options depending on what fits the product best.
At Rover, we’ve taken this to the next level where designers are able to create content like this completely in the browser, and then deliver it as a campaign to your app. Designs get rendered natively, so they fit in seamlessly with your existing user experience.
And it’s quick! Watch below to see a demonstration of creating the second layout in the Rover Platform.
In Summary
Creating content for mobile doesn’t always have to mean plugging your content into the same old layout. Play with Emphasis & Contrast to build hierarchy in your designs and drive engagement. Finally, explore modern tools like Rover which help to make this process quick to create and deploy without compromising your user experience.
