top of page

Team

Yirang Choe, Natalie Yeh, Xueyin Liu

Project Duration

April, 2019 (2 weeks)

Tools

Figma, InVision

Project Type

Makeathon Design Challenge (1st Prize)

How can you make our Supplier E-learning site more effectively train our suppliers?

Procter & Gamble deals with 90,000 suppliers globally. These suppliers manage account information, order
and invoice through different Source Plan Pay Operations (SPPO) solutions. Some suppliers need guidance on how to use them so training needs to be given. Their learning experience should be digital, easy and effective.

Current Website

Screen Shot 2020-01-13 at 12.34.51 AM.pn

User Story

GOAL: Ensure all invoices for ABC Corporation are being paid on time.

Image by Kyle Glenn

David Leo | Accounts Receivable in ABC Corporation

Work Responsibilities

  • Reconcile and follow up for any overdue invoices

  • Comply with the invoicing guidelines upon submission of the invoice

  • Make corrections on the invoice in case

  • Update account information in the system with the latest bank accounts, email address who should receive remittance and returned invoice notification

Pain Points

  • Confused with the credentials to use

  • Too many tools, confused with the functionalities

  • Challenge in navigating or using them especially if you don’t use them regularly

  • Not sure whom to contact for help

  • Difficulty in understanding English

  • Hard to find a way to be informed of any upgrades or changes in the tool.

Goals

1

2

3

To help suppliers from different countries to easily learn how to use SPPO solutions to manage account information, order, and invoice.

To inform suppliers about the upgrades or changes in the tools.

To make digital contents easily understood by suppliers without making the training too burdensome for them

Design Solutions

With given pain points and design requirements, our team started thinking about possible solutions and decided to design for both novice and returning users.

noun_information architecture_1203155.pn

Rebuild the Information Architecture

noun_shortcut_2537328.png

Provide shortcuts for returning users

noun_Speech Bubble_1014722.png

Use common language

noun_tutorial_586630.png

Provide tutorials for each tool

noun_Chatbot_2024259.png

Add Chatbot system for 24/7 assistance

noun_update_1830941.png

Display update information

Final Screens

Home Page

Desktop 2.8.png

Simple, intuitive self-onboarding guide for new users

Desktop 2.12.png

Chatbot: allow customers to get help 24/7

Short cuts: return to access the tool previously used

Language options

Tools Page

Solution 2.15.png

Organize the tools based on categories

Make Chatbot accessible on every page

Tutorial.png

Provide concise tutorials for each tool

Policy Page

Policy.png

Organize the layout by policy topics and provide one-line thumbnail summary of each policy

Policy_2.png

Design the pages look and feel consistent throughout

Poster

Tabloid.png
*Click the image to view details

...And We Won!!!

4C98DDD8-E7F6-412D-AA55-8ECCE5BA7FE2.JPG

Go back to top

  • Black Instagram Icon
  • Black LinkedIn Icon
bottom of page