Quintonic is a social media dedicated to senior people to organize real-life activities and excursions. In 2014, the company I worked for bought this service. The website had an active community of 230 000 members (almost 500 000 by now).
At the time of the acquisition, the service was completely free, and even if the business plan was based on adding paid features, the core of the Quintonic experience would stay free. Our company wanted to monetize the traffic. It was decided to do it through online ads. I oversaw the UI redesign of the website accordingly to embed ads.
The original layout was a 2 dimensions one, not responsive, using a fixed size of 1030 px for the main container. The page structure was a 2 columns layout, a 660 px left one displaying main content and a 340 px right one for additional content. The main container had a 15 px left and right padding and the column spacing was 20 px. The content in the right column was 320 px width.
The issue was that with a 340 px right column where the online ads would be displayed, a content of a 320 px width and IAB standard format being 300 px wide, ads would have been surrounded by a lot of white space.
It was decided to redesign the horizontal grid to ensure ads and content would have consistent dimensions. The main container would retain its 1030 px width, with a 20 px left and right padding. Column spacing would also be consistent with main container padding. The left column would be sized up to 670 px width and the right column sized down to 300 px width.
The vertical grid would also be reworked as the original one was not consistent in its use of negative space. The goal was to enforce a vertical rhythm to help users to easily locate the content they were looking for, using a global 20 px spacing between components.
Global layout changes
As the solution to adapt the layout for online ads was clearly impacting content, it was decided that a more global UI overhaul would be done. This overhaul, while keeping elements users are used to, would affect almost every piece of the UI.
The header was changed, moving logotype on left side, adding entries in the main menu and reworking account menu once user is logged in.
The footer was also changed, reducing its height and rearranging its content to have a better use of negative space.
A redesign of the icons used on the website was also done, whether they were used as visual hint or part of a CTA.
The various components were also redesigned. The goal was to reduce cognitive load with lighter visual assets, more white space and clear breaks between content blocks.
One of the most important components was the activities component, no matter if it was a global version listing the most recent activities or a specific group one, it was central to the Quintonic experience which is to put people in touch that they do things together.
The original one was displaying a lot of information in a very small space. There was no reading direction enforced by the way elements were organized. The most prominent element is the number of participants in the activity. Activity title, the event organizer name and the schedule time are competing for user's attention. The date and the available places number, using heavy green shades are focusing the user's stare to the left and compete with the component header at the top. The user's stare is never dragged to the right where the only CTA is, the arrow.
The new layout tries to guide user's stare that he gets as quickly as possible the information is looking for and that he can take a decision if this activity is worth to look into it. Each component element is aligned, guiding the user, displaying when it takes place (date element), what kind of activity it is (activity type icon), what the activity is exactly about (title), what time of the day it starts and how many participants are accepted for this event. It leads the user to focus on the CTA to click and to get more information on an event.
To differentiate the right column content from ad blocks, the old component header with color background was used. Here again, the goal was to better structure the information visually to allow the user to easily scan the content. The various members components displayed in the right column are a good example of this.
The original members component was listing a members list without any visual clues to frame it. The new members component uses the colored background header and the light border used for main content components to clearly mark it off from the other elements displayed in the right column.
Following these few principles, light UI, using negative space and having better component demarcations, all components were reworked to achieve a better content legibility while keeping the brand look & feel with a touch of modernity. The new UI would also make the ads visible without competing with the page's content.