Evolving with the Times
Dice.com Homepage Redesign (UX/UI/Content)
The Dice homepage was struggling. It was in dire need of a redesign, and so I was asked to bring it up to speed. This is the story of how I designed a new homepage that technologists would love.
I was the UX Designer for this project.
The Dice.com homepage was...not exactly the place to be, especially if you are creating a job marketplace specifically for tech professionals.
1. First, there was the issue of what was known internally as The Big Blue Banner. It was there for B2B purposes because Dice had not yet developed a B2C website. Marketing needed a way to catch leads, and so...we got the oddly designed Big Blue Whale.
2. Next, there was the hero image, which was oddly cropped. This is the sort of picture that says nothing other than "meetings", which was not the brand voice that Dice wanted to portray.
3. In the middle of the page, there was a Tech News section that was oddly aligned with the rest of the page. Moreoever, it seemed odd that, as a job board for tech professionals, the Tech News section came before the Dice value props and features. The value props seemed buried or hidden.
4. The product images associated with the value props were out of date. Moreover, the design of this page itself seemed out of whack with the rest of the page.
5. Finally, our B2B customers had two non-descript CTAs here near the bottom of the screen. In terms of placement on a B2C page, this makes some sense; but in terms of active design decisions, this seemed to be an afterthought.
There was so much work to be done! I began with a few research entry points so that I could better understand how to create the best homepage experience on the Information Superhighway.
Competitive Analysis, Stakeholder Interviews, and UXR
I did a quick competitive analysis to determine what features our competitors were prioritizing in their design. I also looked at what I consider "best-in-class" homepages for luxury brands (such as Herman Miller, Mercedes Benz, Audi, etc.).
I also helped to create a user interview script and helped conduct stakeholder interviews with senior leaders. Specifically, we framed our questions around Dice's re-invention: who we are, how we want to present ourselves (in terms of branding and feel), and how we might consider creating a marketplace that tech professionals would want to engage with.
Because we received a ton of useful feedback from our interviews, we decided to create an affinity map to discern some higher-level categories:
After this, I decided to see how the higher-level categories squared with the requirements I was given by project stakeholders at our project kick-off (specifically surrounding which features were necessary on the page). Cross-referencing those helped me understand which features I should actually prioritize:
Clarifying the Problem and Defining Opportunities
One critical desire emerged in the research process: stakeholders wanted to frame the Dice homepage in welcome nomenclature. They wanted to rebuild trust for some of the failures of stakeholders past, who allows recruiters to run roughshod over tech workers and job seekers. And because Dice was moving away from a job board paradigm and into a marketplace ecosystem model, there was a real hunger to appeal to a new generation of tech workers, both visually and through messaging.
Content and Messaging
Because messaging and content seemed to be a big part of how we would communicate Dice's evolution, I ideated around the idea of taglines with two designers and our UX researcher:
I also cross-referenced this tagline messaging with the research I did earlier. From there I began to sketch the homepage with the aim of building visual and semantic trust. I asked: how could we show our cards? How could we display the best of what Dice is and what it's aiming to be while also communicating a sense of trust?
Hi-Fi Frames / Lo-Fi Mockups
With user testing in hand, I iterated on the designs and began playing with the hero text. Because many technologists got into the industry because we wanted to be a positive force upon the direction of the world, I thought it would be cool to emphasize that sort of altruism in the hero image. I came up with the idea of a slot-machine spinner that showed various tech positions that were paired with a bold invitation. I began crafting the page animations while also finding inclusive hero images of tech professionals at work.
More Content Iterations
However, I was unsatisfied with the content. I wanted something punchier and warmer. That's when I came up with the following: instead of tech jobs, a play on words might work better:
"Design your world...Engineer your world...Develop your world".
This communicated a more altruistic intention, and it invited the receiver to "set (their) tech career in motion with Dice". Not only did this set the tone for Dice's value props, but it also squared with our business needs, what user research was telling us, and our imperative to build trust.
After two stakeholder design reviews and multiple conversations on messaging, images, animations, and layout, we arrived at the following layout:
We had to tinker with the slot machine spinner timing with one of our senior devs, who was a champion for our ideas from the get-go. We also had an ask (at the last minute!) from the Marketing team that we somehow point B2B customers toward the employer page. But two months after launch, we found that user interaction and business KPIs (on the candidate and employer sides) were way up!
One of DHI's investors wrote us (totally unprompted) to say how impressed he was with the new site, and that it signaled a strong way into a new future for Dice.com.
Finally, the marketing department was so impressed with our homepage content and copy that they asked us to use it in their marketing materials for web, print, and tradeshows.
Overall it was a gratifying project! It was especially fun to craft some great content design in the midst of a UX-centered project.
Check out the site, which is still live today (though, unfortunately, with the dreaded Big Blue Banner).