City Site Redesign @ VMG

One of several UX/UI versions created for the redesign.

Objective: Redesign 11 alternative weekly news websites that share a common layout.  Emphasis primary on making them responsive and fluid from desktop to the smallest mobile devices as well as incorporating modern best practices for content publishers to boost page loads, increase organic search traffic, and get users to browse the site for longer visits.

Final Result: LAWeekly.com, Westword.com, with 9 other markets on the way (including Village Voice in NYC, Miami New Times and Phoenix New Times)

 

[View a slideshow of UX+UI deliverables at the bottom of this post]


Easily the largest and most in-depth project I've worked on up to this point.  The task was not only to apply modern UX principles to an out-dated and ailing website, but to essentially revolutionize the way content was being created and published at the alternative culture papers.

I started on this project by gaining a deep understanding of every corner of the current site, as well as the data that could be leveraged to improve user experiences.  VMG was a great place for a young UX architect because they have a diverse collection of localized content in many large markets, from the best tequila bars in Los Angeles to the best pizza place to take a date after an off-broadway show.  Mix that with highly regarded music and dining critic reviews, movie showtimes, event listings, local news coverage, award databases and you can do a a lot of fun and engaging designs if you can get the data to mold into what you need it to do.  So I created a site map and then worked with key stakeholders to understand generally what the hierarchy of importance all this information had.

The editorial content easily sat on the top of this proverbial 'pile of stuff' and it was viewed early on as the gateway users enter into the sites and where we needed to focus our efforts the most to pull them in and keep them clicking.  So the article landing pages were seen as the 'new home page,' a revolutionary concept in what used to be a paper-dominated industry, no longer was the almighty home page the first impression people were making with our content, and instead they were being pulled in more and more through shared social media links and organic Google searches for specific topics that peaked their interest.

This meant we had to find a balance between a clean and eligible reading experience that limits distractions and bombarding new site visitors with related news and stories that they would be more likely to click on and engage deeper with our sites.  All while keeping in mind responsive and fluid limitations and the strict business requirements for ad spaces and other revenue generating assets.

The solution I presented was to create a 'left rail' for links and related content that would show on desktop views, but turn into a sort of hide-able 'drawer' on smaller tablet and mobile screens.  While expanding the page below a single article to present infinite new content previews and ad spacing as the user scrolled down (a common feature on the web these days).

The left rail is just a tiny example of some of the problems and solutions we had to work with during this project, but ultimately the decisions made in the UX would lead to almost immediate increases in KPIs once the site went live to the public.  And it is still proving itself as more and more markets go live with the redesign, eventually reaching millions of daily unique users.


Take Away: I truly am proud of this project because it was such a major undertaking, requiring skills in not only user-centered design and research but also in the intricate workings of a large company going through significant change.  It taught me how to deal with the realities of older databases that just simply couldn't do certain things you might expect it to, and how to take those digital 'dead-ends' and rework a vision or idea to work with the realities of the content.

Below are some more preview comps of some of the many and diverse UX and UI prototypes and versions that I created during this project.