Employee Purchase Experience
Redesigning an employee purchase portal to maximize utilization of employee benefits
November 2022
Timeline: 8 weeks
Role: Designer
Tools: Adobe Illustrator, Adobe XD, MS Teams, Mural
Project Summary
Generac Power Systems offers an employee discount when purchasing Generac products. However, the existing employee purchasing portal was outdated and confusing to use. So much so, that Generac reported instances of employee purchasing Generac products elsewhere instead of using their discount and having to deal with the portal. In order to maximize the amount of employees using their discount, Generac requested a new design for their Generac Employee Purchase Experience (GEPE). To do this, I worked directly with Generac employees where I empathized, defined requirements, ideated, prototyped, and sought feedback as part of an iterative process.
Research & User Interviews
Interviews were conducted with Generac employees in order to learn more about their experience with the existing GEPE. We performed interviews with four separate Generac employees, using a consistent interview script which was created prior to the interview. The main goals of the interviews were to identify pain points of the existing process, and to get a better understanding of the types of features that would be of greatest benefit to employees.
Top Interview Takeaways:
Interviewees expressed a desire for the following traits and features:
-
Increased visuals depicting the products they are considering
-
A seamless way to pay with credit card
-
Order support and tracking
-
More information about pickup and delivery
These takeaways demonstrated a user's need to be informed, and helped to spell out specific features that they had grown to expect from an online purchase experience.
Personas
The employees that we interviewed came from different experience levels, and this influenced the way in which we categorized the personas that we created.
New User
Returning User
Expert User
Journey Maps
User the information from each interview, a journey map was created for each persona. This gave us an idea of what the user would be feeling at any given step of the process, and allowed us to treat the problem areas in a linear fashion.
New User Journey Map
Returning User Journey Map
Expert User
Functional Diagram
The functional diagram works to define all technologies or software involved in the Generac Employee Purchase Experience and illustrate where and when each technology comes into play.
The functional diagram conveys the categorization of technologies in a highly visual and interpretable manner and consolidates them into a single document. This document was created to enable our team to more easily improve and update the GEPE.
When starting the ideation phase, there were specific challenges that needed to be overcome.
-
The existing process was difficult and preventing employees from using their benefit
-
The back-end was outdated
-
There was bountiful opportunity to reduce cognitive dissonance throughout the process
Ideation Phase
The finished design needed to do the following:
-
Follow all existing brand guidelines
-
Encompass all the needs of an employee making a purchase
-
Keep all private info secure
-
Increase use of employee benefit
The following is the result of the initial ideation phase of the design process:
Sketches
The next step of our ideation phase was to generate some preliminary sketches, and begin talking about some ideas that would contribute to the final prototype.
-
Initial sketches were completed in a timed environment
-
This minimized overthinking and allowed ideas to flow uninhibited
-
Ideas were exchanged amongst the team and a second iteration was performed
Prototype
The prototype for the Generac Employee Purchasing Experience was created in Adobe XD. The prototype features an action path which demonstrates the layout and features of the new design.
A screen capture of Generac Prototype artboards (click to expand)
Prototype programming derived from the Product Details page
A before and after of the GEPE Products page
A before and after of the GEPE Order Form
Prototype Feedback
A before and after of the GEPE Pickup & Delivery Form
A before and after of the GEPE Payment Form
Feedback was gathered as a result of conversation with Generac employees. The following are some key takeaways:
-
Allowing the user to complete the checkout process before they verify their employee status
-
Allow a guest checkout to be implemented, with order being contingent on account creation being completed
-
Implement a navigation bar at the top of the page to enable page jumping
Final Prototype - Notable Pages
Login Page
Main Landing Page
Product Listing Page
Product Description Page
Shopping Cart
Checkout Wizard
Order Summary