P&G Supplier Site

OVERVIEW

This project is for a design competition event. The prompt was given by Procter & Gamble, which is to redesign their current website for suppliers to make it more friendly for new users and ease burdens for old users. The competition is 2-weeks long. Our design won the final Grand Prize.

TEAMMATES

Natalie Yeh
Yirang Choe

MY ROLE

Create user flows
Brainstorming
Low-fi iterations
High-fi design
Present to the judges

Design prompt

Procter & Gamble deals with 90,000 suppliers globally. These suppliers manage account information, order and invoice through different Source Plan Pay Operations (SPPO) solutions on the P&G supplier site. The process can be complicated and varies among different suppliers. The current site fails to provide useful guidance and help users to use SPPO tools effectively. How can we make the site better in training the suppliers on SPPO tools?

Since it was a rapid-fire design competition, we were not expected to conduct user research on our own. At the beginning of the competition, P&G offered a variety of documentations including the current site guidance, user flow, a user persona, and also held a Q&A session for us to quickly learn about users’ job responsibilities and goals.

A typical user of the P&G Supplier Site

 By quickly going through all these files and using the website by ourselves, we found that although our typical users have similar job functionalities, there were actually two user scenarios that need to be considered. Under different scenarios, users are facing different issues:

Two user flows of using the current website, and issues users are facing

1. The current structure of the content is out of line with the common pre-existing experiences of users

It is difficult to know where to find needed information or tools because of the confusing menu names. Also, since polices and tutorials are scattered among different pages, it requires many clicks for users to locate needed information. 

Design goal:

Rebuild the information architecture to ensure easy navigation for users.

The current information architecture of the P&G Supplier site

2. The SPPO tool page is not well-designed

- Explanations of SPPO tools are only displayed in the tool cards when hovered over.
- Different kinds of SPPO tools are not well-grouped.
- Users can’t find needed information such as tutorials and upgrade status for the tools

Design goal:
- Help new users to find the right SPPO tool effortlessly
- Make important information (including tool instruction, tutorial, and updated status) easier to find and understand

The current SPPO Tools page

3. Policy contents are hard to understand

There are lots of complicated content on the policy page, that are text-heavy with no visual hierarchy. It is difficult for users to locate or understand a specific piece of info they need.

Design goal:

Provide a more effective way for users to check and learn about policies.

The current policy page

4. Lack of shortcuts for old users

Users need to manually locate the tools and policies they usually use. Also, it is common that users forget which tool to use or how to use it if they have not used it for a while

Design goal:

Provide shortcuts for old users to reduce their memory load

Throughout the early stage design process, the most challenging part was to redesign the SPPO solution page, along with exploring different navigation patterns for the whole website. During this phase, we outlined screens in a quick and dirty way to communicate within the team and iterated for several rounds:

Version 1

In our first design idea, we were mainly focusing on making it easier for users to find the right SPPO tool:

- We grouped SPPO tools by their functions and added fixed in-page navigation, so users don’t have to scroll all the way down to find out all the available tool categories.
- Instructions are provided.

Shortcoming
- The largest flaw of this idea is its feasibility and sustainability. Although this layout can be visually-pleasing, it is quite unconventional. There will be different design for tool types that contains different amounts of tools, which will increase the workload of developers. As P&G will be integrating more SPPO tools to the website, we need to organize the tools in a way that is easier to be maintained.

Version 2

In version 2, we decided to use a tabular menu. Tools of different types will be placed in different tabs. It is technically easier to achieve. It also offers an easier way of adding tools in the future.

Shortcoming
However, in this version users still can’t see all available tools at first sight. What if users already know the name of the tool and just want to find it quickly? This kind of design will be troublesome to them.

Version 3

To show the available tools all at once, our first solution was to add a side navigation bar as the secondary menu and try to place all the tools in the same view (see the interface on the left). Then we realized that the secondary menu actually has more potential in helping users to navigate among different pages not only for SPPO solutions but also for policy or tutorial pages. Therefore, we decided to apply this side navigation bar to all pages, and use the global bar as a function menu including the search function, sign up/sign in, and changing languages (see the interface on the right).

Shortcoming
The problem for this design still lies in feasibility and sustainability. We were using the approximate principle to group tools into different categories, meaning that tools belong to the same category will be put close to each other. However, as has been mentioned in previous versions, the number of tools might change. What if in the future one of the categories contains more than 4 tools? What will happen if there are 3 tools for account management and 3 for order management? In a word, organizing tool cards in this way can make the development process complicated, and it’s not an ideal solution in the long run.

Version 4

Then we explored other ways to group SPPO tools. We tried to put them on different lines (see the interface on the left). However, it may cause a waste of space. Finally, we decided to combine our previous ideas: to list all tool types at the top (this time it serves as a filter instead of in-page navigation) and place all tools in the same view. In this way, users can still quickly find tools by different types, and technically speaking, it is easily achievable.

The new information architecture

Homepage (for new users)

Homepage (for old users)

SPPO Solution Page & Tutorial for tools

Policy page

The new user journey (drag the slider to compare with the old user flow)

Our design won the Grand Prize in the competition

Thank you for reading!