Under Armour Website Redesign
A complete website built with Acquia Platform
Driving ethics and compliance to the center of business
My Role: Lead Web Designer, UX Research, UI Designer, Content Creation
Teammates: Product Owner, Implementation Lead, Drupal Engineers, Web Designers, QA Engineer, Project Manager
As the main web designer on this project, I was tasked with revamping the Under Armour code of conduct website already created on WordPress. The old website needed to be migrated to our new Acquia platform. The original website was lacking in creativity and needed a refreshing design.
​
I conducted customer studies and surveys, created user flows, a site map, user personas, wireframes in Figma to identify opportunities, and solve existing usability problems. Mostly the original site was not accessible at all. Colors and alternate text were on my list of high priorities. I wanted to make sure all employees who come to the site can find the information they are looking for quickly, no matter what their background was at Under Armour.
​
I was also responsible for creating any missing graphics that could not be transferred over to the new site such as icons and I was in charge of making sure all buttons, colors, and typography matched their current branding from their other websites.
​
Business Goals
-
Establish Under Armour as a leader in ethics and compliance
-
Establish Under Armour as a business that fosters a speak up culture for its employees
Website Objectives
The Under Armour code of conduct web portal 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 entire website will be used by all Under Armour employees only. It will not be public facing. It is a gateway for employees and whistleblowers to report suspicious activity and avoid retaliation.
Purpose
It is important for companies to stand up and do the right thing if they want to remain in favor with the general public and to avoid risks.
Intentionally Blurred
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 Live Site
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.
Figma Wireframes
Screenshot of Live Site
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 website went live in 4 months
Some numbers and analytics to chew on (30 days after launch):
-
Over 1000 unique visits from users all around the world
-
73% of users clicked on at least one FAQ accordion
-
Trading Securities, Speak Up, and Sustainability were the most visited pages (excluding the homepage)
