HP E-Learning for Data Privacy
An interactive e-learning course built with Gomo
Encouraging Ethical Data Privacy Practices
My Role: Lead Instructional Designer, UI/ UX Designer, Content Creation, Animation
Teammates: QA Engineer, UI Designer, Project Manager
As the main designer on this project, I was tasked with helping HP create a fun and engaging e-learning course for their workforce to take.
​
The course needed to cover privacy and data security and how to handle personal information. HP employees have access to all kinds of customer information. As a result, HP needs to make sure all laws and regulations are followed to avoid any risk of data breaches and mishandling of private information.
​​
I worked with the compliance team at HP, meeting with them once a week to discuss each step of the project as it progressed. HP was very clear on how the course needed to look and feel.​
Business Goals
-
Help HP become a leader in privacy and data compliance.
-
Create a fun and exciting learning environment at HP.
-
Encourage HP Employees to protect personal information.
Instructional Design Objectives
The HP Privacy and Data Protection course aims to create an environment where employees feel valued and appreciated. It also aims to create a web portal easily accessible by any employee to read about important topics that encourage honesty and doing the right thing.
Employees can read about things like harassment, conflicts of interest, sustainability, and bribery. The website includes an easy way for employees to report such things immediately in an anonymous format.
​The purpose of this project provides Under Armour with an effective ethics and compliance campaign that ultimately will help them mitigate risks and avoid costly violations that can effect their bottom line.
​
Target Audience
The e-learning course will be taken by all HP employees only. It will not be public facing.
Purpose
It is important for companies to responsibly use customer information. Today, identity theft and fraud are common and by law companies are legally responsible to handle that information as sensitive. Depending on country and regional laws, a company must base their data collection and processing procedures to accommodate for those regulations.
Project Mood Board
Collaboration
For this particular project, I worked with a great team of creatives and engineers to bring to life this code of conduct web portal. I did a lot of UX research with the help of the product owner. When I needed assistance with meeting deadlines, other web designers on my team stepped in and helped me build pages using my wireframes and the sitemap that I created. When we weren't sure how to build a component, or needed further help troubleshooting, I assigned tasks to the Drupal Engineers for further assistance. The QA Engineer and I ran several tests on the website for accessibility and usability. We also collaborated with the customer on look, feel, tone, voice, and usability testing.
We all interacted with each other using several communication methods such as virtual meetings, emails, and online chat.
Wireframes
With the original website already designed, it was easy for me to recreate and revamp the new site in Figma. My strategy was to do away with the elements on the old site that didn't work well. For instance, the customer had three different accordion designs on the Wordpress site. It seemed redundant and boring. I wanted to make it more interactive and add more buttons with hover states, and modal windows that open up upon clicking on them. We also came to the conclusion with the customer that the photography also needed an update.
The one thing that was missing was accessibility on the old site. With the update, I made sure colors being used would pass the WCAG2 standards. I also made sure we added states like focus to all buttons to ensure that handicapped users could access information as needed using a keyboard. Alternate text is also very important.
Screenshots of Final Course
Responsive Design
Another important note is that the original site was not designed well with responsiveness in mind. The mobile view needed several improvements. Based on user feedback, we came to the conclusion that most employees would be using a desktop or mobile device to access this site with desktop being the most used device. Based on this, we did not design for mobile first. Tablets were rarely used to access the original site.
Screenshot of Final Course
Results
The website is Under Armour's front door to employees to read about their ethical and moral obligations, the ability to report suspicious activity anonymously, and a chance to ask general questions if they have doubts about a conflict of interest. It showcases Under Armour's commitment to being fair and honest, as well as their responsibility towards their employees, their communities, and the environment.
"With the launch of uaethics.com, our employees will be encouraged to do the right thing. When faced with a tough decision, they will have the tools available to make the right choices."
The course was completed in less than 3 months.
Animated video created for course using HP branding guidelines.