What were the problems?
Most of the websites were not designed using mobile-first sensibilities even though 80% of users were on a phone. Making simple changes to common elements by the CSS was more difficult than it needed to be because of the different templates. A/B testing also had a layer of added complexity for the same reason. One website was very heavy and slow because it required a large amount of javascript to make it work.
- If all the websites are using the same theme, how do we maintain the individual brand styles?
Bauer Xcel Media
- My role - Design, UX
- Tools - Photoshop, Illustrator, Coda
What was the approach?
Competitive Analysis / Benchmarking
To start, knowing how the BXM sites compared to their main competitors was an easy way to gain insights to be applied across the three verticals. I looked at the elements on the page, template types, recirculation opportunities
Tools: SimilarWeb, Moz, Alexa
Content Audit
For sites that were newly acquired or were being reinvigorated, I ran a content audit to get a better idea of what we had to work with. From there, the editorial and product teams worked together to set design and IA objectives based on the findings. The audit revealed several opportunities that the stakeholders didn’t expect.
Stakeholder Interviews
Editorial requested elements to be used in future monetization - large header, single-page template for coupons/product endorsements. Product requested components that would highlight the Sweepstakes side of the business. Editorial and Product requested hub or topic pages to boost SEO.
Mood Boards
The digital side of Bauer publishing wanted to have separate branding color schemes as compared to the print magazines. I created a series of mood boards and style tiles and worked with stakeholders to select fresh color and font combinations.
Hi-Fi Mocks
Photoshop is an essential design tool but it doesn’t show how a page works. (It’s also triple the work to illustrate responsiveness.) It’s easier to get devs and stakeholders all on the same page if designs are created in HTML/CSS/Javascript. Hi-Fi working mockups mean no surprises.
Style Guides
I also create Style Guides so that everyone across departments had access to the colors, fonts, UI, and logos used on all the brands to keep branded collateral consistent.
What were the learnings or compromises?
- It's easy to forget who the user is! Product, editors, and developers usually work on desktop. But when 80% of users are on phones, the mobile experience is paramount.
- External events have a huge influence on design. The large header initially designed was scrapped because of new google rules related to content percentages above-the-fold.
- It's sometimes difficult to move beyond MVP. Gotta keep an eye on the prize!