RaceTrac

 
RT-Mac_Mockup-1.jpg
 

RaceTrac's News Section


As usual, I started this usability process problem solving on paper. The client asks were as follows:

  • Create a digital experience for sorting and sharing various news items published internally and by other news sources
  • A filter to organize articles by author, date, and category
  • Social sharing options
  • A way to feature photography, even if the actual article doesn't have a photo associated with it

Per best practices, I knew I also wanted to keep a couple of self-imposed parameters in mind as well:

  • Optimize for mobile (obv)
  • Card-style article feed for legibility
  • Feature other RT social feeds, since they are populated with some regularity

Some early wireframes informed what I wanted out of the look and feel of the news section. Images that represented an entire category could be used for the masthead in the event that an article did not have any photos associated with it.  Below that are some thumbnails that I mocked up to iterate on the style for the news feed.


 

Before

 

RaceTrac's current site had several usability issues that prevented people from interfacing smoothly with the site. Each article was nested on the same page, which meant there was no means of sharing an individual article. Furthermore, the site was constructed such that a news item, when nested, could be situated to reveal only half a line of copy.  If the site was clunky and difficult to navigate on desktop, the mobile experience was absolutely useless.

Because the project is still underway, I am unable to show the final product in its entirety, but I can give a few sneak previews.