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.