Redesigning digital publications
As the lead designer for the Aquarium's quarterly digital magazine, Shorelines, I redesigned the layout in order to improve navigation and readability for our readers and to refresh the look and feel so that it'd be more consistent to the print version.
Tools: Adobe Xd, Sitecore CMS, HTML/CSS, Hotjar, Google Analytics
Skills: Usability research, UX/UI design, Web development, responsive web design, QA testing
Goal: Improve readability
One of the biggest changes I planned to implement to improve overall readability was to shift the layout from two columns to one. Having stories in two columns required the user to scroll back up to continue reading from the first column into the second. It was clunky. I did some research on best practices for line length, font sizes and line height/leading to help inform my decisions.
The new single-column layout resulted in a slightly longer line length (limited to less than 70 characters). Because the body copy was in a sans-serif typeface, I increased the font size and line height to improve ease of reading and add some breathing room. (Serif fonts are typically easier to read because the little strokes on the letters are more recognizable to our eyes.)
Goal: Improve the navigation experience
Changing the column layout allowed for more space for navigation to live higher on the pages, rather than being positioned at the bottom. I conducted some research on side navigations and online publications to learn what visual cues and interactions readers may be familiar with. It was important to make sure readers understood 1) that they were in a publication 2) where they were and 3) where they could go next.
Design exploration
Early sketches and hi-fi mockup created in Adobe Xd
Before and after comparison
Screengrabs of published web stories
A sample Shorelines story before redesign
A sample Shorelines story after redesign
Printed spread of the Shorelines story shown above, included for reference to the consistent look and feel that was desired in the digital redesign
Results
Heat maps and outcomes
After the first issue was released with the new design, I worked with a third party SEO consultant to analyze data collected in Google Analytics and Hotjar to see if users were taking advantage of the new navigation system. Based on click metrics, heat maps, and recordings of user behavior, we were able to confidently conclude that the new navigation system was very successful in helping readers find their way to other stories, CTAs, and landing pages.
Because these updates were so successful, I was asked to apply the improvements to other digital publications. The new navigation experience and design received a lot of praise from many colleagues and patrons, reinforcing that the improvements were noticed and well received by readers.
This heat map shows readers’ use of the left nav to get to the next story on the list, as was intended by my redesign.