PILGRIM MAGAZINE — 

THE TECHNICAL ELEMENTS

FIRST THINGS FIRST: OUTLINING A PROJECT PLAN

While the creative elements of Pilgrim Magazine came first — the ethos, brand vision, sections, and story ideas — the technical components were critical to a successful launch. So, after years of concepting Pilgrim Magazine, thoughtfully launching was incredibly important to me. I spent weeks, maybe months, outlining the phase-by-phase project plan to the right (click to open in a new window). This outline served as an important communication tool, point of reference, and checklist for everyone who contributed to bringing Pilgrim to life, including our designers and editor.

THE SITEMAP

This was the initial sitemap that outlined how each section corresponded to other elements and sections of the site, serving as the basis for the navigation.

USER TESTING — A PRE-LAUNCH REQUIREMENT

Having worked in tech for years by the time Pilgrim was born, I found user testing vital to conduct before going live. We recruited a group of ten users of varying tech backgrounds to explore the staging site and share any design, functionality, and messaging issues or feedback they had. In addition to welcoming open feedback, we asked our testing group to explore specific functionality components to ensure consistency across devices and operating systems. Those focus areas are below.

  • NAVIGATION

    Does the navigation function properly? Do dropdowns link to their respective sections?

  • URLs

    Do URL paths seem to align with the page you are on?

  • HEADERS

    Are headers consistent from formatting and capitalization perspectives

  • SCROLLING

    Are you able to scroll using your usual method (keyboard/mouse)?

  • IMAGE EXPANSION

    Are you able to expand images and navigate through galleries?

  • LINKS

    Do all links work? Do they open in a new tab (instead of taking you away from Pilgrim)? Are there any 404s?

  • ALIGNMENT

    Do images seem to align with copy within stories? Is everything neatly aligned on landing pages?

  • MOBILE

    Is the site responsive from your device? Does the dropdown navigation function as you’d expect?

SOME OF THE USER FEEDBACK WE RECEIVED — AND ADDRESSED PRIOR TO LAUNCH

“Navigationally, everything seems to be in order except one minor thing (if this is even a thing). The black header that appears as a dropdown when you scroll down on each page peeks out from the top of the page when you try to scroll all the way back up (which I would think shouldn't happen because you're now back at the top of the page where the navigational menu exists). Make sense? Wonder if there's a way to turn it off so you don't see it if you scroll back up.”

“Navigationally, everything seems to be in order except one minor thing (if this is even a thing). The black header that appears as a dropdown when you scroll down on each page peeks out from the top of the page when you try to scroll all the way back up (which I would think shouldn't happen because you're now back at the top of the page where the navigational menu exists). Make sense? Wonder if there's a way to turn it off so you don't see it if you scroll back up.”

“Something I noticed is the alignment with different stages of the responsive design. I had the tab open on Google Chrome on a MacBook Pro. I've attached a few screenshots of the same page with the window expanded out in three sizes. Seems like there's some odd alignment with the text ‘Pilgrim Magazine.’ It looks to have an inch or so extra of white space on the right side in two of the screenshots.”

FUNCTIONALITY TESTING: MOBILE VIEW

Featuring: the homepage, dropdown navigation, and a series with uniquely designed functionality