PG Hero

Project Overview

Creating an online education portal for hair stylists

The Goal

P&G Salon Professional hired Jack Morton to deliver a new online portal to house their virtual education seminars. The goal was to help their client salons and stylists engage in continuing education about P&G Salon Professional sub-brand products without the cost of physical education activities – loosing income from having to leave the salon for days, paying for travel, hotel stay and the courses themselves.

The Challenge

A few significant challenges facing this project:

  • requirement from client to use a little known learning management system (Accord LMS)
  • external and remote development team
  • tight production timeline

The Approach

We addressed each:

  • quick research / discovery phase regarding existing functionality and limitations
  • regular conference calls
  • parallel production of user experience & visual design

PG Process

My Role

My role in this project was to primarily serve as the project director – ensuring all aspects of the project were delivered on-time, on-budget, to the client’s expectations, and to Jack’s standards. This meant I was accountable for the full project lifecycle from pitch through to the point of handover to P&G’s existing development team. I also hired and managed the team which delivered all creative aspects of the project including day-to-day task allocation.

Responsibilities:

  • client kick off in Geneva
  • hiring & managing project staff
  • internal team brainstorming
  • creative & art direction
  • ongoing, regular client updates & reviews

Deliverables:

I created these initial documents and then maintained close oversight of final delivery.

  • sitemaps
  • user journeys
  • clickable wireframes
  • development handover documentation

Final Wireframes: Tim Tottenham & Wolfgang Metzner   Initial Designs: Nada Stevanovic   Final Designs: Jim Pratt

PG Briefing Diagram

Briefing

One Platform, Five Brands

The platform had to be able to be themed for each brand in the Salon Professional family as traffic would not come direct to the platform but rather by way of one of the brand sites.

PG Brainstorming Session

Kick off

After taking the briefing in Geneva, I returned to the office and brought the team together to start thinking about the user journeys, functional requirements, creative, etc.

PG Phase2 Brainstorm Seminars
PG Phase2 Brainstorm Homepage

Focus on the users

It was important for us to remain focused on the user and their conditional needs. For example, the homepage of the platform must focus on encouraging signup. Once signed up, the users should then be shown learning content and walked through the enrollment process.

PG Sitemap 2PG Sitemap 3PG Sitemap 4PG Sitemap 5

Sitemaps

As an initial starting point and throughout the creation of the user journeys, a basic set of site maps were created to help visualise at a glance the basic structure of the platform.

PG user journey 02PG user journey 05PG user journey 06PG user journey 08

User Flows

To ensure the various section and states of the platform were fit for purpose, we first create a series of user flows detailing the goals and actions of our various users to achieve them.

Download the complete document

PG Wireframes 02PG Wireframes 06PG Wireframes 09PG Wireframes 12PG Wireframes 19

Wireframes

Once the user journeys were mapped out and agreed with the client, we began the process of wireframing each page – noting the various states and functionalities required in each section.

At the client’s request and to speed along the approval process of the functional design, the wireframes we created were clickable prototypes. These were very useful in helping the various members of the client team to understand how the finished site would work.

Download the complete document

PG Phase1 PGSalonPro HomePG Phase1 Clairol HomePG Phase1 Nioxin HomePG Phase1 Sassoon HomePG Phase1 Wella HomePG Phase1 Sebastian Home

Initial Designs

As the initial structure was being detailed, I had my design team (two people) working on two different design directions for presentation to the client. Once we had agreed on one direction we then began the process of creating each brand version.

PG Styleguide 06PG Styleguide 10PG Styleguide 13PG Styleguide 15PG Styleguide 16PG Styleguide 19PG Styleguide 20

Dev Style guide

Once the deigns were approved and the team were working on the various detail page designs, I moved on to the design style guide. As part of the handover process to the client’s development team, I created a style guide which gave detailed insight into how each section of the site should be created ad behave visually.

Download the complete document

The Final Design

After the quick sign-off and delivery of the initial site design & all five brand themes, the platform was then taken to a small test group of stylists and salon owners for testing (this was not within our budget). This test group revealed a few bits of insight – mostly superficial – which the client wanted us to address. Most significantly was the feeling the site was “cold and corporate.”

As a result we secured an additional two months time to rework the design (time which was available anyway as the development process was moving slower than expected from the dev team) in which we pushed the boundaries of their brand guidelines (which barely exists for P&G Salon Professional) and injected more personality.

Design Credit Jim Pratt

PG Round2 01

Home

Renewed focus on new users

By pushing the boundaries of the brand guidelines we were able to inject a much more stylish look and personality into P&G Salon Professional. We achieved this by giving the hair visuals more page real estate and turning the entire upper half of the page into a carousel – and bringing more fun by animating the text and photo into position at a slight different pace.

We also greatly narrowed the messaging for non-logged in users to ONLY those which would encourage signup.

PG Round2 03

Seminars

Logged out view

We continued to inject the site with a new level of personality by making use of more hair imagery through section headers.

PG Round2 02

Home

Logged in Dashboard view

We also created a sense of customisation and personalisatin by using the user’s supplied photo as header backgrounds and in the reworked progress bar.

The client also insisted on adding a “widgets section” despite our best efforts to keep the platform free of clutter.

PG Round2 04

Seminar Catalog

Logged in view

PG Round2 04

Seminar Catalog

calendar view

PG Round2 04

Seminar Detail

PG Round2 04

Seminar Detail

Logged in physical event view