HANES

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

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.

“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.

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.

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.

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.

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.

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.

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.