QuintonicUI redesign for monetization

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.

Grid redesign

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.

Original Quintonic UI

Original Quintonic UI - This capture shows the Group Activities page as a visitor would have seen it in january 2014. Source: web.archive.org

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.

Old Quintonic Grid

Old Quintonic grid
No consistency throughout the main content grid. White blocks are component placeholders.

New Quintonic Grid

New Quintonic grid
Equal spacing around and between columns and 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.

Old Quintonic Header

Old Quintonic header, visitor - Logotype was centered, main menu had few entries, floating left.

New Quintonic Header

New Quintonic header, user logged in - Logotype was moved on left side, account menu icons reworked, main menu entries added.

The footer was also changed, reducing its height and rearranging its content to have a better use of negative space.

Old Quintonic Footer

Old Quintonic footer - Almost a third of its width is used only to display 2 social media buttons and a F.A.Q. CTA. The regional groups list is ordered alphabetically but by row instead of column, not easing the task to find the group one is looking for.

New Quintonic Footer

New Quintonic footer - The regional groups list fills the full footer's width, allowing the footer to be smaller. It is ordered alphabetically per column, easing the visual scanning when looking for a loctation.

A redesign of the icons used on the website was also done, whether they were used as visual hint or part of a CTA.

Components redesign

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.

Quintonic Homepage Wireframe

Quintonic homepage wireframe - Wireframe of the Quitonic homepage main content when a user is logged in. It includes online ads location on right column and a page skin ad, an iteration on components redesign with a use of negative space to improve content legibility.

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.

Old Quintonic Group Activity Component New Quintonic Group Activity Component

Old and new Quintonic activities component - On top, the old layout of the activities component. Below it, the new layout based on grid changes following online ads embedment. Content column is wider, leaving room to use more spacing between component's elements. Component limit is marked by a light border and the use of color is lighter than the old version. It helps to focus on the nature of the content.

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.

Old Quintonic Members Component New Quintonic Members Component

Old and new Quintonic members component - The new members component uses several styles from the main content column to frame its content in the right column. The colored background header helps to differentiate it from neighbouring ads.

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.

New Quintonic UI

New Quintonic UI - This capture shows the first iteration of the new Homepage layout as a logged in user would saw it.