summary.
Harbor Freight Tools, a leading retailer with over 1,100 stores and a strong e-commerce presence, specializes in discount tools and equipment. In collaboration with the Senior UI Designer, I updated the visual style to align with current branding and addressed key usability issues to improve account sign-up flows. Post-launch, the redesign resulted in hundreds of new user sign-ups.
the issue.
Harbor Freight Tools had recently completed a major redesign of their retail website. To align with the updated design and encourage customers to create accounts, the "My Account" user portal required a visual refresh and improved functionality.
my role.
As a UI Designer, I led redesign of the self-service or user account portal in collaboration with the Sr. UI Designer. I also collaborated with our development team and product management team.
Tools & Techniques Employed
- Mocks via Sketch
the dashboard page that was nixed...look at those buttons!
research.
Collaborating with the Product Manager and Lead Developer, we determined what new features could be added during the scope of this project by comparing the current portal to competitor portals.
The main friction or pain points that were determined to be addressed:
- Mobile Friendly: The current design was not responsive, elements looks broken and was hard to navigate.
- Add a Payments Page: Users did not have a way to save their payments for future use, making them enter a payment method each time.
- Add a Log Out button: Users did not have a way to log out easily.
- Remove the Dashboard: Users generally log into their account to see their orders, so we would remove the dashboard page, which is what was currently being shown first, and instead show the orders page first.
- Update UI to match the redesigned site: To ensure that users felt like they hadn't left the site, a consistent look and feel would be applied.
How can I address the main pain points and create a more visually consistent interface?
various desktop screen states of the orders page, in adobe xd.
design.
Changes shown across the four pages: orders, addresses, payments, and my list, are listed below.
orders.
The updates to the My Orders page improved usability by introducing visually organized cards displaying product images, order dates, and responsive layouts. A prominent "Track Order" CTA and a "more" menu allowed users to access details or reorder with ease. For users with no previous orders, a message and CTA encouraged their first purchase.
The Order Details page was enhanced with clear item displays, including product images, quantities, and prices, along with options to "Order Again" or "Print Order." These updates streamlined navigation and made managing purchases more intuitive and visually consistent.
before & after of the orders page, desktop.
before & after of the orders details page, desktop.
order page, mobile.
order detail page, mobile.
addresses.
The card design was updated with a "mobile-first" approach to ensure a seamless experience across devices. On default cards, Edit and Delete options were placed within a "More" (ellipses) menu for a clean and accessible layout. For non-default cards, options to set the address as the default for shipping or billing were added, enhancing functionality while maintaining a streamlined design.
before and after of the address page, desktop.
address page, mobile.
payments.
Credit card logos and the last four digits of the card number were displayed to provide a clear visual cue for users. On default cards, Edit and Delete options were placed within a "More" menu for a streamlined appearance. For non-default cards, an option to select a new default was added, improving functionality and ease of use.
the net new payments page.
my list.
The card styling was updated to improve legibility, making it easier for users to scan and understand key information. Product status functionality was added, providing users with clearer updates on their purchases. Additionally, the "Add Comment" feature was streamlined into a clickable link that reveals the text field only when selected, reducing visual clutter and improving the overall interface for features with lower usage.
before & after of the my list page, desktop.
my list, mobile.
handoff.
Final designs as seen below was handed off to our development team after 8 iterations. This team did not test designs before launch.
approved desktop versions.
approved mobile versions.
learnings.
This project was an invaluable learning experience, as it marked one of my first large-scale professional design initiatives. It taught me to adapt and find creative solutions when ideal UX/UI processes—such as defining user personas, wireframing, or extensive testing—weren’t feasible due to budget constraints. While the lack of data was initially frustrating, it pushed me to rely on resourcefulness and design intuition to elevate the My Account portal to match the rest of the site’s quality and usability.
Despite the challenges and numerous review cycles, I successfully handed off the design to development. I hope this project serves as a stepping stone toward fostering an environment where user needs and customer experience are prioritized over executive preferences, paving the way for more user-centered design practices.