WEBSITE : UX / UI / VISUAL DESIGN / PROJECT MANAGEMENT ~
THE GOAL
To redesign the site making it easier to use, more attractive, mobile-friendly, and encourage more social media sharing.
THE CHALLENGE
To transform a non-responsive, first-generation WordPress, Flash-based, news-radio audio site into a fully responsive, 100% mobile-friendly, HTML5 audio site with social media sharing and enable eight years of legacy audio programming to stream on mobile devices.
THE RESULT
The new design made the site easier to read, simpler to navigate and, for the first time, allowed users to listen to programming on their tablets, smartphones and other mobile devices. We achieved all of our original goals, and surpassed client expectations.
UX
Every project begins with paper and pencil. I block out the elements as simply as possible as quickly as I can. Only the most salient features of any design get my attention at this stage of development. By this process I get a grip on what features will require more investigation, and what details need to be further explored, etc. Once I get a sense of the big picture I move on to the details.
Because the budget on this project was tight, everything I could do to minimize expense and save time mattered immensely. I worked closely with the coder at this stage to ensure that what I had in mind would be as straight-forward as possible, keep the project on budget and on time, and retain clear pathways to legacy assets.
I started by addressing the overall look and feel, moving from a monochromatic rust-toned color palette to a more colorful one. There was never any intention to completely throw out the basic layout and design elements, but rather to make them more attractive and inviting.
I reworked the logo to work more effectively with the overall visual design incorporating the new color pallet.
CODE MAP
Redesign can be as much forensic as it is creative. I needed to retrofit this new design to hook into the existing database of existing content — about 8 years worth of digital audio content. So the first thing I needed to understand and document was which functions were being handled in what way, and which piece of software or plugin would serve that purpose with HTML5, PHP and WordPress. I also mapped out which file types were associated with which links and other details, to ensure that there would be no loss of content after the crossover. The wire frame and code map documents served us well in the process of redesign, and aided the developer in our decisions moving forward. Due to the simplicity of the existing architecture, these documents functioned as both wireframes and flow maps.
WIRE FRAME
My next steps were building the site map, journey maps and basic navigational structure. In this case, most of that work was done, so I had only to refine them to facilitate a better user experience. I worked very closely with the client to make nuanced adjustments to existing elements to bring them in line with the new aesthetic. Then I began wireframing, which is where most of the design work took place on this project. In particular, developing the visual design, interactivity, and other responsive features that were lacking in the existing site. I examined several grid structures in determining responsive breakpoints. More social media features were added by putting their Twitter feed on the homepage and making the sharing options more prominent.
Here are some early Homepage arrangements and design detail options. Note the 12-column grid at the top. Low level A/B testing revealed the best solution.
The final high fidelity wire frame shows all platforms compared side to side, illustrating the breakpoints for the responsive design and relevant design feature decisions. Among them were reordering dated content into a forward chronological flow, condensing (or expanding) long lists of content into a more logical and intuitive structure, and providing white space and WCAG 2.0 compliant visual guidelines (color contrast pairs, text ratios, etc.).
SIDE BY SIDE – DESKTOP / PAD / PHONE
FINAL SCREENS – PAD / TABLET
FINAL SCREENS – MOBILE
PROJECT MANAGEMENT
Once the visual design was finalized I worked closely with the code developer to ensure that the design features were well implemented and that the best choices were always being made. The most difficult and important of these was finding the best option for streaming audio on mobile devices. The existing site relied heavily on Adobe Flash, which was not an option on mobile platforms. After examining several WordPress plugins, we finally agreed that HTML5 was the best option. Several iterations of minor tweaks and adjustments were required to bring the final product in line with the new design schema.
CONCLUSIONS
The resulting final product was easier on the eye, more intuitively organized, fully responsive on multiple platforms, 100% mobile enabled, and accomplished or exceeded all the goals we had initially set. The most important of these being the transformation of the site into a truly mobile-friendly platform. For the first time in its history, the entire catalog of content was available to more than just a desktop computer – 8 years of audio programming was finally available for streaming on mobile devices!
POSTSCRIPT
As fate would have it, within months after the launch of the new site, a major shakeup in management took place and the entire show was abandoned. All my hard work is no longer available, and a highly credible news source was looking for a new home.