I N T R O D U C T I O N
Each year, American Crew puts out a call to determine the best stylists in the world and subject them to a fierce head-to-head challenge. By the end, the best representation of the American Crew Man is left standing, winner of $10,000 and a place among the industry’s finest, with press and exposure that can transform a career.
It was up to us to provide the platform to make it happen.
It was up to us to provide the platform to make it happen.
I M P R O V I N G T H E E X P E R I E N C E
After three years of All Star Challenge winners, we were tasked with reinvigorating the design of the contest and modernizing the user experience. The site that had been in use wasn’t responsive to mobile devices and it wasn’t easy for users to submit their entries.
Past versions of the site were difficult to use because information was difficult to find. Search engines couldn’t read the site because important text was contained in images, which also prevented it from being translated to different languages. Lastly, even entering the contest was difficult because there were many clear CTAs on the site.
U S E R F L O W
The site we inherited had several short pages for users to click through, but they didn’t contain a lot of information. We consolidated down to a single page with links to the application form throughout. We wanted users to progress through a linear journey that began with asking them a simple question: “Do You Have What it Takes…” If they were up for it, the next section they scrolled to was an Inspiration Gallery containing previous years’ entries and video recaps, then a social feed of contest coverage. The entire site was a click or scroll away for the user, and a button to enter the competition followed them down the page.
D E S I G N
Nothing in the competition is more important than The Cut, so we made sure style was front and center throughout the site. We used big, bold photography to create an elegant user interface that reflected brand values.
U T I L I Z I N G H I G H Q U A L I T Y P H O T O G R A P H Y
User’s are drawn to another person’s face and follow their line of site. We used this to our advantage by carefully placing models whose gaze was directed at the content next to him in order to draw more attention to that information or call to action. The hero frame does a great job of this. The model is looking directly at the headline, which warrants the most focus and begins the user's journey. We also utilized this tactic in the about the competition section. Models were strategically placed to be facing either left or right depending where the content was placed.
D E V E L O P M E N T
The contest website was developed on a Drupal 7 backend. This platform was selected primarily for it’s flexibility and usefulness. Available integrations and libraries for the platform made it easier to develop the social feeds feature, which finds and pulls social network content into Drupal nodes. Furthermore, the Views module allows for quickly building custom interfaces. Since all displayed social content must be curated, the ability to filter and sort through hundreds, if not thousands, of automatically pulled social interactions, is essential. These conveniences also carried over into vote tabulation and bar nomination. Bulk operations, commonly a difficult-to-implement and oft-forgotten feature, are instead first-class throughout all custom administrative pages thanks to the Views Bulk Operations module. Finally, the ability to tabulate content in Views ensures that votes can be counted at any point during the progress of the contest.
B U I L T L I K E A N I C E B U R G
The sexy portions of most sites are the front-end, consumer-facing pages, but this site had two distinct audiences: stylists throughout the world who were vying to be recognized for their talents and the internal team at Revlon that would be judging the contest. For the stylists, a sleek, user-friendly front end design was a necessity, not only because making the contest easy to enter would encourage competition, but also because American Crew’s brand is the most sophisticated and stylish in the industry. The design needed to meet the high bar set by previous efforts.
A robust dashboard was needed for competition judges, who needed functionality to help them through the process efficiently, including geographic account limits so reps only had access to submissions for the country they oversaw, a five-star rating system, and easy export tools for downloading information for later judging rounds. Judges could also filter and search to find specific entries, which included two photos uploaded by the user and a description of the American Crew products used in each style, along with various bits of contact information.
P R O J E C T T A K E A W A Y
There’s More Than Meets The Eye
With fashion sites, which generally have fantastic assets, there’s typically a lot of room to go over-the-top with flashy, gimmicky UX choices. We think those distract the user more than anything else, though, so we try to stay away from them and stick to design choices that move the user closer to achieving the project’s goals without layering additional features on top. Every step you take should ultimately lead to accomplishing that goal. If the goal isn’t clear from the outset, it’s almost impossible to create a cohesive site that offers the user a purposeful and valuable experience. Our goal was to get stylists excited to enter the contest. Every choice we made was designed to move them in that direction.
A perfect example of this is linking products back to the consumer site. Even though American Crew is a consumer brand, selling product was a secondary objective, so we layered the products within each modal and added a subtle hover effect prompting a user to shop for that product rather than featuring products on the page and directing users off site. As crazy as it sounds, we couldn’t let sales get in the way of user engagement.
