charging up...

GRV Media & PROP: UI/UX Design

Description

Overview

This project was initiated to support the launch of a new website and publisher revenue platform for the recently formed GRV Media Ltd. This decision was informed by the success of Here Is The City’s advert revenue capabilities, and aimed to provide consultancy and platform support for publishers seeking greater advert revenue from their services. As the UI/UX designer on the team, I designed a modern and professional brand for GRV Media and PROP, created a comprehensive style guide, and high-fidelity mock-ups of two new websites in collaboration with the web development team.

Client: GRV Media Ltd
Role: UI/UX Designer, Brand Designer
Tools used: Sketch, Pixelmator, InVision

GRV Prop Logos

Defining The Problem

The main challenges included:

  • Defining a modern platform-based brand identity for a new company and product line
  • Designing the user interface to appeal to traditional and new media publishers (B2B)
  • Ensuring the user journey remains fluid while demonstrating a complex product structure
  • Ensuring consistency across multiple device types

Visual Showcase

In this project, I focused on creating a cohesive visual language that aligns with GRV Media‘s brand identity while improving user experience.

Colour Palette & Typography

The curated colour palette features a vibrant blue/green (#6AEFC6) as the primary colour to promote feelings of renewal, prosperity, and calmness that were key to complimenting the complex product structure. I enhanced this with a vibrant green (#6BEAA3) and rich blue (#3BB2B8), opting for adjacent colours to create a balanced and engaging visual hierarchy promoting calm, especially for traditional customers who may find the new product offering overwhelming.

We selected Josefin Sans for headings to convey a modern, impactful aesthetic, paired with Lato for body text to ensure optimal readability across devices. This combination strikes a balance between contemporary style and functionality, and promoted action and attention, even with a calming colour scheme.

GRV Media - Style Guide

UI Components

Key UI components were designed for consistency and improved usability:

  • Buttons: Rounded corners with a subtle hover effect enhance interactivity
  • Navigation: A simplified menu structure with dropdown functionality for complex categories, and a floating header to navigate while scrolling

PROP Navigation and Buttons

 

  • Forms: Streamlined input fields with clear labels and validation feedback
  • Blog Slider: Most recent blog posts are positioned at the bottom of the page in responsive grid format to improve session length and user retention

PROP - Form

 

  • Value Proposition Sections: A selection of grid formatted sections outlining value proposition are featured following the introduction. These aimed to encourage action based on multiple different points of evidence, such as statistical and anecdotal.

PROP Value Proposition

Responsive Design

The responsive design adapts seamlessly across devices. On desktop, we utilise a spacious grid layout, while the mobile version stacks elements vertically for easy scrolling and tapping.

PROP - Side By Side 1

 

PROP - Side By Side 2

 

PROP - Side By Side 3

 

PROP - Side By Side 4

 

Conclusion

In conclusion, this UI/UX project for GRV Media not only met but exceeded the initial objectives, resulting in a more engaging, efficient, and brand-aligned digital experience. The success of this redesign has paved the way for ongoing improvements and established GRV Media’s online presence as a modern, publisher-focused platform service. The new design system ensures a cohesive brand experience across all digital touchpoints, from the website to mobile apps and email campaigns. This consistency has strengthened GRV Media’s brand recognition and has served as the company’s primary design system for over 6 years.

Details
  • UI/UX Designer Sketch, inVision
  • Rapid Prototyping User flows, Wireframes, High-fidelity Prototypes
  • Visual Design Style guides, Branding, Marketing Materials, Graphical Assets
  • Date 04 July 2019
Categories: MediaUIXVisual Design