Re-Imagining JBJS
TOC page redesign
Embedded Files
Introduction
Introduction
Background
Background
The editor-in-chief of The Journal of Bone and Joint Surgery retired in 2024, and a new editor-in-chief was chosen. In presenting his vision for the journal, he re-imagined JBJS as more of a magazine-style publication, adding new content types and restructuring the old ones. A major project of 2025 would involve redesigning the print journal with a fresh new look and a cover that would change every issue.
My role
My role
The Re-Imagining JBJS project involved every department in the company, and while I contributed in multiple areas, my main purview was adapting the online journal to showcase the new covers. I served as the UX designer and product manager. I created the designs, conducted reviews with stakeholders and management, and directed development with our tech team.
Timeline
Timeline
January – November 2025
The Process
The Process
Before
Before
Current Issue page
Current Issue page
Latest Articles page
Latest Articles page
Homepage
Homepage
Requirements
Requirements
In writing up requirements for the project, I separated it out into 3 phases, so each could release separately:
Phase 1: Add support for displaying level 2 headings (H2s) on the TOC
Phase 2: Update the design of the Current Issue and Latest Articles pages
Phase 3: Back-end updates to ensure continuity between old and new content in site search etc.
I created a slide deck with annotated mockups for each phase. As it turned out, there would be an additional Phase 4 added to the project while we were working on Phase 2.
Mockups
Mockups
Current Issue page
Current Issue page
I made high-fidelity mockups in Figma. There were about 10 different variations, and after team review and more iterations, here are the final deisgns.
To "refresh" the page's look, I decided to incorporate the issue navigation into the red page-header bar. The header would need to get significantly taller, to accommodate the height of the vertical covers. I also changed up the styling of the headings, which were previously in a serif font - not ideal for reading online.
Mobile view
Latest Articles page
Latest Articles page
While not officially part of the requirements, I thought it would be a good idea to update the look and behavior of the Latest Articles page to match the new Current/Archive Issue pages.
Mobile view
Homepage, round 1
Homepage, round 1
Initially, I planned to simply update the image on the central tile, but the stakeholders wanted it to be more prominently featured.
Homepage, round 2
Homepage, round 2
Many iterations later, this was the winning design:
Mobile view
It would require changes to the personalization logic of the page, so I wrote up detailed requirements, and it became Phase 4 of the project. Since we had not originally budgeted time for it, it was agreed that we could launch without it if needed, using the original Phase 2 design, and release it later once complete.
After
After
Current Issue page
Current Issue page
Here is the finished product, which launched on schedule, in time for the "Big Splash Issue."
Mobile view
Latest Articles page
Latest Articles page
Mobile view
Homepage
Homepage
Even though Phase 4 was unplanned, we were still able to finish it in time for the launch.
Mobile view
Conclusion
Conclusion
Response
Response
All the stakeholders were happy with the new design, and the editor-in-chief was thrilled that we finished Phase 4 in time for the launch. Time will tell if our readers like the new direction of the journal.
Thoughts
Thoughts
This project was the main goal of most of the company for almost all of 2025. It had so many moving parts and people and pieces. It was great to work on a project that had such a large sense of shared purpose, and involved so many people to collaborate with, especially those that I don't usually get to work with.
Page updated
Google Sites
Report abuse