PUNCHOUT DEMO INTERFACE
UX Design and Research Intern Project for B2B Company
**Due to NDA Agreement, the logo and company name will be emitted**
Problem Statement
Company currently does not have any tool available for internal people to access a customer's punchout. Having such a tool available would help internal visualize what a customer would see and help guide them.
Project Description
Punchout is an e-procurement site generally used in the B2B (business to business) industry. With Punchout, businesses are able to buy items directly from a supplier’s e-commerce website.
The image is the interface that the integration team uses to access a test Punchout
Original Task
The image is the interface that the integration team uses to access a test Punchout
However, the design could be overwhelming for internal people who aren’t familiar with Punchout, so my original task was to create a new and separate user- friendly interface to make it easier for internal to access a test Punchout or a dummy account
Revised Task
Create an interface that acts as a simulation of a customer’s Punchout experience or visual representation of the Punchout process. The purpose for this tool is to offer sales and other internal employees a reference of the Punchout process as they currently have no way to access a customer’s Punchout or see what the experience looks like.
What We Know
A “what we know” is a form of research. First, we identify “what we would like to know” from this research. Based on what we would like to know, a list of questions is formed, as well as, our assumptions of “what we think we know” using any existing data that we already had. Next, we started conducting the research, in which all the necessary decision stakeholders come together. We proceed to get some answers to the list of questions that we created before, as well as, any other additional questions we may have during the discussion. After, we document “what we know” now that we have our questions answered.
Begin Research
A “what we know” was conducted in which I met with the following groups of people:
Punchout Business Analysts
Sales Team
VP of eCommerce
Special Accounts Team
In this “what we know,” the business analysts and I conducted research where we talked to these groups of people to discover current problems that the sales team, special accounts team, and VP of eCommerce struggle with when it comes to the Punchout website.
Findings Based on Research
Sales Team is looking for a “training tool” that will help train the sales department on the Punchout process. Having such a tool will allow them to provide better guidance to customers and other businesses on how to navigate the site.
VP of eCommerce is looking for a tool that allows them to demonstrate to other executive and internal employees what Punchout is and the impact it has on the company.
Concepts
Held an ideation and began brainstorming with the business analysts and designers. I then began to create concepts. After many iterations and design reviews with the relevant decision stake holders, I gave a final design review presentation with the Sales Team and Vice President of eCommerce.
Punchout Tool Process and Designs
Tool Landing Page
Welcomes the user to Joe Mart, which is a mock-up eProcurement site created for demonstration and training purposes
Prompts user to select a country’s Punchout
Tool will sit in company’s internal employee website
1
2
Joe Mart
After selecting a country, user is taken to the Joe Mart home page
Joe Mart is designed to act as a mock-up eProcurment site that mimics the process of what a Punchout customer would see when they order through a Punchout site
3
Punchout Demo Tutorial
In order to better guide internal employees through the Punchout demonstration, the site has a “Demo Tutorial” tab
Tutorial prompts user to select the company that is listed under “Favorite Stores,” and doing so will take the user to the company’s Punchout website
4
Example Scenario: Company’s Punchout Home Page (not designed by me)
After clicking the company’s portal, the user is taken to the company’s actual Punchout website where they are able to freely browse the website
5
Example Scenario: Company’s Punchout Product Page (not designed by me)
The user is free to browse the Punchout website
Once they are on a product page, they might add it to their cart
6
Example Scenario: Company’s Punchout Cart Page (not designed by me)
Once user adds items to their cart, they can then proceed to transfer their cart
Clicking “Transfer Cart” would theoretically send the items and the user back to their eProcurement platform; however, in this case, the user will be taken to an informational page that will explain the next steps for a customer to the user
7
Informational Slideshow: Transfer Cart is Clicked
The user is navigated to a page with more information about a customer’s Punchout process
From the shopping cart, a customer is navigated away from the company’s Punchout website
8
Informational Slideshow: Transfer Cart to Joe Mart
The items are then transfered to the eProcurement platform
9
Informational Slideshow: PO is Created
Once a user is ready to order, they proceed by completing the purchase order
10
Informational Slideshow: Approval Process
After creating the purchase order, if there are any approval process that need to be signed off on, before the order is submitted and received by the company, it must be completed first
Informational Slideshow: PO is Emailed to Customer Service
After the order is submitted, customer service receives the purchase order
11
12
Informational Slideshow: Manual Order Entry
Customer service enters the order into the system
13
Informational Slideshow: Order Confirmation
The buyer receives an order confirmation from customer service
14
eProcurement Capabilities
If an internal employee would like would information about the Punchout process, there is an “eProcurement Capabilities” link that will navigate them to a pdf with more information
What I Learned
Working With Various Backgrounds: Learned how to better collaborate and work with other designers, researchers, business analysts, and other departments/executives
Hosting Meetings and Presentations : Through hosting various meeting and presentations with executives, managers, and other departments, I improved my speaking and presentation skills. Not only that, I learned how to use research to express the reasoning behind my designs
Communication and Flexibility: Working with necessary decision stake holders has prompted me to learn how to listen and communicate well as well as how to be flexible in alterations to my designs that had to be made based on the expertise of other teams
