Case Study: The good
Note: This is a concept project.
For this project I focused solely on the article section under insights. My goal was to update previous site functionality and aesthetics to improve user adoption rates and increase page views.
Before redesigning the original site, the usability issues needed to be found and addressed. While the content is very good, the layout and aesthetics have a hard time keeping viewer attention and could potentially
The layout of this page is fairly standard for many websites and uses a simple color scheme and font throughout. But let’s break it down piece by piece and see where improvements could be added.
Left Navigation Column
Search bar is very hard to see and fails WCAG 2.0 standards
Search does not appear to be article specific and uses same layout as the upper navigation search
Filter options are very responsive, but need to have better indicators of page changes
Type and Topic share almost equal importance but topic should be first, other filter options should be added (i.e. authors, date)
Very little separation of articles besides light box that wrap around cards
Only clicking directly on the article title redirects to the page rather than being able to click elsewhere on the card
No variation in font weights throughout the entire page
Font sizes are too large causing
Too much white-space while scrolling down page
Right Navigation/Secondary Navigation
Font is too large causing unnecessary spillage to next line but doesn’t extend to align with the designated gutter
Too many text fields and repetitive tasks
No option to return to top of page until 80% of the way down and it is covered by the chat button toggle
This shows too much information in the search’s drop down while not allowing the user to redirect to a search specific page
Hard to find specific articles
Text is misaligned and unable to correctly justify due to image location
After some iterating and fine tuning here is the final version I came up with. I kept the color scheme and general layout almost the same with a few key differences.
Left Navigation Column
Rearranged filters and added more options to further specify searches such as sorting by author or publish date
Darkened search settings and increased font sizes slightly to easily see filters
Shortened data entries to one text field to help users easily subscribe to weekly newsletters and removed repetitive prompts
Used smaller font weights and small orange accents to easily capture viewer attention
This is the most important content on the page and needs to be treated as such.
Slightly wider cards help viewers read content more naturally and easily skim to new articles
The use of only blue font made for a sterile environment, I decided to pair it with a bright inviting orange to grab attention to the focal latest insight
Adding images alongside insights help grab interest
Different font weights help create a clear hierarchy of content with titles taking precedence
Moved option to return to top closer to the center and allowed it to be reached anytime the user scrolls upwards
Instead only linking articles directly inside the search drop-down, I allowed users to redirect to a specific search page and refine their search from there
I really enjoyed doing this project to improve web specific design work including updating previous brand guidelines. This simple redesign should work well in increasing user interest and share views. To take this further I might look at adjusting the mobile experience and articles themselves.
This was a small first step in creating a really great way to read and share valuable information with friends and colleagues. People tend to talk about products that get them excited and this has a lot of potential in making that talk happening!
Thank you so much for reading this far, I hope you’ve enjoyed it!