Personalizing team spirit.

Perficient Digital uses its accelerated modeling process (CX AMP) and Adobe XD to reimagine the online customization experience for retailer Lids.

Established

2016

Employees: 350

Atlanta, Georgia

www.perficientdigital.com

4

Weeks to develop working prototype

Products:

Adobe Creative Cloud for teams ›

Objectives

Help clients order custom items online

Design prototypes quickly and efficiently

Secure feedback from real customers

Support new agency offering for clients

Results

Developed working prototype in 4 weeks

Secured immediate feedback from clients

Helped launch new offering to grow business

Tested working prototype with customers

style

white-columns, icon-headings

background

Helping fans express their passion

Sports fans are passionate about their favorite teams, and nothing lets them express that passion better than custom apparel. For many, the simplest way to represent their college or professional team is by wearing a hat emblazoned with the team logo. Specialty retailer Lids, a leader in fashion athletic headwear, team apparel, and other fan novelties, offers a range of customizable hats and other items that let people show their support and express their individuality.

Lids has an active online presence, but what sets the retailer apart from its competition is the more than 1,000 brick-and-mortar locations in the United States, Canada, and Puerto Rico. To update the look and feel of some of its online and mobile products and take advantage of the immediacy that its retail locations offer, the company engaged creative digital agency Perficient Digital, part of the digital transformation consulting firm Perficient.

The business innovation group within Perficient Digital began working with Lids on a digital strategy that focused on growing online customization. Previously, Lids only offered customization in its retail stores. The company’s new strategy includes offering customers the ability to order a hat online, customize it with a player signature, mascot, or other item embroidered on the side, and have it fulfilled from a distribution center. The ability to offer online customization is a great differentiator for Lids.

“Adobe XD helps us build a foundation for a project rather than just delivering a strategy document. Instead of just talking about personalization and what it means to a user, for a low investment we can show clients the vision.”

Brian Flanagan

Director of Experience Design, Perficient Digital

A simple path to customization

Perficient Digital set out to create the Lids Custom Zone, an online experience for placing custom orders that would work with the client’s existing front-end and back-end processes. The team focused on using design thinking in conjunction with Adobe XD, part of Adobe Creative Cloud for teams, to create the wireframes and prototypes.

The prototyping process took four weeks and included a kickoff workshop, initial sketches, delivery of a mobile prototype, and securing both client feedback and input from actual customers in Lids stores. The last stage was determining how the mobile experience would work on a desktop.

“We focused on mobile first because there are more constraints with mobile,” says Brian Flanagan, Director of Experience Design at Perficient Digital. “Adobe XD let us take a leaner, guerilla-style approach, validate ideas quickly, and move on.”

The goal of the online experience was to empower individuals to express themselves by creating a custom hat. The team distilled two concepts from the initial design sketches, then created the prototypes in Adobe XD. After reviewing with the development teams for feasibility, they moved forward with testing. The experience design process also involved using Adobe Illustrator for graphic design and Adobe Photoshop to clean up icons and get them ready to use in Adobe XD.

Knowing that the embroidery machines work like stencils in how they plot out stitches, the team created a flow where customers would select a layout that included text, a graphic, or both. For example, in the prototype, customers could select the graphic of an eagle’s head and customize a range of options — from the color of the eagle’s eye and feathers to the style and color of the typeface — all within a web browser on a mobile device.

The team found Adobe XD to be light and easy to use, and the artboards helped them see how the interaction would work from screen to screen. They also appreciated the ability to simultaneously do interaction and visual design in Adobe XD, rather than relying on a waterfall process.

Real-world testing and feedback

The four-week timeline was aggressive to conceptualize, create, test, and modify the prototype, so it was important to be agile. Weekly meetings with UX and visual designers helped move the project forward, and the client appreciated the hands-on approach to reviewing the prototype and the ability to see iterative revisions. One of the most exciting parts of the project was taking the prototype into actual retail stores and asking customers to test it and give feedback.

Adobe XD enabled the team to create a link and view the prototype on a phone, hand it to the client, and get immediate feedback. It also let them work in mid- to high-fidelity, so when they took the prototype out in the public it looked and felt like a real product.

The prototype included 60 screen variations, which were easily created due to the ease of the Adobe XD workflow. The team was able to hand off all asset files as .svg files, along with a style guide and the individual components for development. Lids plans to launch the new online experience in the fall of 2017 in advance of the holiday shopping season.

“With Adobe XD, we were able to quickly prototype and test the solution with actual customers, which allowed us to better understand their behavior and fine tune the experience to meet their expectations,” says Steve Wentzell, Senior Director, E-commerce at Lids Sports Group.

Steve Wentzell

Senior Director, E-commerce, Lids Sports Group

Driving the business forward

Adobe XD is part of Perficient Digital’s new customer experience accelerated modeling process (CX AMP), which is helping the agency win and grow its business by quickly defining a strategic vision for clients. The team recently built out a next-generation intranet project for a large publisher that will help the company better engage its 45,000 employees. They also created both technical and visual prototypes in Adobe XD for an employee benefits company to help improve enrollment.

“Adobe XD helps us build a foundation for a project rather than just delivering a strategy document,” says Flanagan. “Instead of just talking about personalization and what it means to a user, for a low investment we can show clients the vision, which leads to a roadmap for the future. Adobe XD has added a lot to our offerings.”

About Perficient Digital and SoDA

Perficient Digital is a member of SoDA, an exclusive global network for digital agency leaders, creative visionaries, and technology innovators. With a 100+ member companies in more than 30 countries around the world, SoDA’s programs provide agency executives with access to a powerful, global network for peer collaboration, thought leadership, knowledge capital, leadership cultivation, and industry best practices. More at www.sodaspeaks.com and www.sodareport.com.