Skip to main content

HANES

Building a Brand.
Building a Business.

A new ecommerce business was brought to life within the Hanes ecosystem, offering custom apparel design.

HanesInk homepage on desktop and mobile

Client

Hanes

Industry

Apparel

Services

  • Market Research
  • Mobile Strategy
  • Technical Strategy
  • Information Architecture
  • Content Strategy
  • UX Design
  • UI Design
  • Visual Design
  • Copywriting
  • User Testing
  • Front-end Development
  • Ecommerce Platform Integration
  • Accessibility Assessment
  • Quality Assurance Testing
  • Email Strategy

Technology Platform

IBM Websphere

Project Approach

Turning Big Ideas into a Reality

Our multidiscipline project team worked with the Hanes business, marketing, and technology teams plus all external partners from day one. We started and completed this engagement as one integrated team at the enterprise level.

We represented the user and contributed ecommerce expertise throughout an intensive discovery process that began with numerous stakeholder workshops. Business, marketing, and technology project requirements were established to help guide the project forward.

Our project management team then took an agile approach working alongside four key stakeholder groups to create a sprint plan. We worked through 20 two-week sprints to complete the UX design, visual design, UI design, and front-end development for the project.

Learn More about Our Process Download Case Story as a PDF

5 Integrated Teams

75 Wireframes

192 Page Mockups

24 Trigger Emails

70 Marketing Emails

HanesInk animation detailing the custom ordering process
A simple graphic explaining to visitors how HanesInk works

“Working with Elevate on the HanesInk business launch was a study in how a great agency should operate. Elevate is always strategic in their approach, artistic in their execution, and on time with their deliverables. Most importantly — with Elevate, you always know you’re working with a true partner.”

David Wainer, Senior Analyst, Digital Marketing at HanesBrands Inc.

Brand Strategy

The Origins of a Brand

Based on audience research and positioning exercises, our branding task was clear. Create a brand that conveys creativity, fun, and simplicity.

We developed a color palette, photographic style, typography, and voice guide for the brand. These were used to create the copy, visuals, and UI design for the entire ecommerce experience and supporting brand materials.

The design team also proposed a fresh, new logo that conveys the creative potential of the service.

HanesInk style guide

User Testing

Evaluating the Competition

To ensure we were designing an optimal user experience, we user tested competitor sites. This allowed us to identify pain points that we could remedy to make a superior experience.

HanesInk custom design tool
HanesInk custom design tool wireframe
1 of 75 annotated wireframes

UX Design

Architecting a Customer Experience

Our UX Designers created detailed documentation to keep all involved teams aligned, cataloging each business, user, and technical requirement for the team’s reference. Interactive wireframes were created to ensure cross-team alignment around all proposed designs and functionality. We also created the functional and user-centric acceptance criteria that were used for testing.

Technical Strategy

Planning for Long-Term Efficiency

Our Development team was challenged with embedding interactive content within the IBM WebSphere commerce platform without using default back-end templates. We wrote a library of custom JavaScript behaviors that hook on to HTML content within WebSphere. This allowed us to manage code libraries globally leading to better front-end control, flexibility, quality, and future enhancements.

Accessibility

A Service for Everyone

In order to comply with WCAG level AA guidelines, we filtered every design and development decision through stringent accessibility criteria. Since a number of out-of-the-box modules from the platform were not compliant, we provided recommendations that met the accessibility guidelines.

HanesInk product listing page
HanesInk Marketplace landing page

Content Strategy

Developing Content with Empathy

Along with the brand voice guide, we also create a tone guide for the HanesInk marketing team. The tone guide instructs writers how to create branded copy for different situations based on the customer’s feelings and mindset. For example, though the overall tone of HanesInk is fun, it would be inappropriate to be lighthearted when bad news (an out-of-stock item) or an error message is presented to a customer.

HanesInk Hans mascots

Visual Design

Making a Mascot

During the design phase we used a happy, smiling face as a placeholder for t-shirt designs. It symbolized the great creative images that would one day be printable on custom tees. When we wanted to make the brand more approachable, to give it a face, our smiley “Hans” seemed perfect. He represents the endless creative possibilities customers have to express their own style and passions using HanesInk.

HanesInk Hans stickers
Hans stickers were sent in shipped orders

Brand Marketing

Bridging the Digital and Physical World

To further connect the digital and physical customer experience, we also advised and designed the packing materials that would be included with each order. The materials included stickers of “Hans” each with a unique design to give customers an extra bit of collectible fun.

HanesInk marketing email
1 of 70 marketing emails created to promote sales and seasonal offerings

Brand Marketing

Ongoing Brand Support

After the launch of the website, Elevate continued collaboration with the HanesInk team. We designed emails, sales presentations, social graphics, and event materials to support the brand.