1

News Article & Homepage

Research led projects for The Business Journals that have improved usability, ad viewablity and visual designs

Design Process

The article page is the main page for the business journals and it was long overdue for a visual and usability update. The user goal of the page (which is to ingest content they clicked on) was completely buried by ads and modules, leaving only a tiny ⅓ of the page for actual content. With this being such a large overhaul and new way of thinking for the business journals we needed to do a lot of research.

With Google recommending responsive sites, it really got this project jump started. And everyone was excited. The product team had a vision of pulling in all of the trending new things in web design on other news sites, which you would think us designers would have been jumping all over as well. However, just because another site is doing something a certain way doesn’t mean it’s working for them or it will work for your users. So first step was to get feedback from our users on the ‘cool’ features on competitive news sites.

I led a competitive usability study on other site’s article pages with the features that product was proposing. After gathering up the research, the entire ux design team, myself included, started working on different components of the new article template and design that would scale into the rest of the site. I started to work from the top down of the page, starting with the navigation.

Looking around on other news sites, I felt nytimes.com and washingtonpost.com had the best responsive navigations. Analyzing and breaking down how they worked, helped me figure out how to lead the navigation for the business journals.

Screenshots responsive navigation from nytimes.com and washingtonpost.com Screenshots of responsive navigation from nytimes.com and washingtonpost.com

Here’s some of the ideas I was working through:

Explorations for responsive navigation for the business journals Explorations for responsive navigation

Final Design had some modifactions based off of the feedback we got from one of the usability studies. Mainly changing the icons to labels when there is enough screen real estate:

Screenshot of live desktop and mobile navigation Final Design

It was great working on this as a team project and each of us pulling the best of what each person was coming up with. Looking back on the project, I would have not done it any other way. And as a team we are proud of the design and the iterations that we have been able to make.

Email me @ amy@theamylynn.com, follow me on Twitter, or connect with me on LinkedIn.

Amy L Henty ©2017

1