Toshiba Medical Research Institute (external link) is a research and development center that designs medical imaging systems. They had recently had a website created, and I was hired to finalize the design and bring the appearance and functioning of the site up to TMRU’s professional standards.
Redesigning TMRU
When I was brought on to the website design project, there were several structural and functional issues that needed to be addressed before the planned launch of the site in just two weeks. In order to quickly fix these issues in the time available, I completed the redesign in two phases.
Phase 1 involved fixing the most critical issues (such as images overlapping text, finicky rollovers in the menu bar, and content edits that were only possible through the database) so that the site worked and reflected the high quality work for which TMRU is known.
Phase 2 involved a complete overhaul, in essence maintaining the overall appearance and structure of the site while rebuilding it from the ground up. This overhaul included extensive work both on the front end of the site and in the setup of the back end of the site.
Before
After
Design highlights
Streamlined top navigation bar
Sticky, responsive navigation bar.
Nested menu hierarchy reduced from 3 to 2. (No more sub-submenus!)
Expanded and reorganized home page content
Added a section to the home page to introduce the first-time visitor to TMRU.
Removed the home page sidebar and followed a grid-based layout. This reduced the crowded and cluttered appearance of the original home page and made it easier to scan the page.
Improved the presentation of News and Job postings sections to the home page by giving them more real estate on the page, surrounding them with more whitespace, and adding photos and clear indications of links. By showing recently published and updated content, these sections help keep the home page fresh and relevant. Since a primary goal of the website is recruitment, it was especially important to make the Job postings stand out and easy to access.
Improved overall site architecture and content organization
Employed jQuery tabs to display content that originally was on sub-subpages on its parent page. Tabs in this context have many benefits:
- The content categories are immediately visible and of equal priority.
- Because the bundles of content are in essence “stacked” rather than flowing one after another down the page, the content takes up less screen real estate and requires less scrolling by the user.
- The content is no longer buried beneath nested pages and is therefore easier to find and access.
- Interactive tabs are more professional, modern, and better meet the expectations of the “techy” audience.
- On the back end, this content is more intuitive to find for the purposes of editing and updating. Editing is done all on one page, not across several different posts buried beneath dozens of other posts.
For an example, see the TMRU Clinical applications page (external link).
Relevant and useful sidebars
Sidebars are customized according to the page. For example, pages with subpages (such as the TMRU Innovations page (External link)) include a sidebar showing the subpages, so the user doesn’t have to go back up to the main menu to navigate.
Having sidebars relevant to the current page’s content provides a better user experience and can help SEO.
Varied sidebars can reduce “sidebar fatigue,” where the user begins to ignore the sidebar when it is the same on every page; instead, the sidebar is more useful and the user can be more engaged.
Optimized photos, more photos
Images are optimized for faster load times and to take up less room on the server.
Created header images for parent pages.
Added photos to Social Responsibility page. Photos are a great way to show TMRU’s investment in the community.
Created a more panoramic slideshow of images on the Work Environment page, bringing the text further up the page so that website visitors do not have to scroll as far to reach the main content.
Details that make a difference
New fonts were chosen to be easier to read and more reflective of the website’s target audience of scientists and engineers. “ALL CAPS” were replaced with “Sentence case” in the menu items and home page slider, again for the purpose of increasing readability and making the best use of available space.
The arrows from Toshiba’s logo ››› are incorporated in several ways, including in the favicon, in buttons and “Read more” links, and as breadcrumb separators.
The Search form in the header is highlighted in red when clicked on.
Email and RSS subscriptions to new job postings are available in the sidebar on the Opportunities page.
The site is registered with Google Analytics and Google Webmaster Tools to gather site data that can be used in SEO and redesign decisions.
Back end setup for easier updating of site content
Posts are separated into custom post types for easier adding, updating, and organization of News, Opportunities, Leadership, and Innovators.
The Opportunities “edit post” screen has customized content entry boxes so that job information is predictable and uniform.
Formatting for Opportunities is handled in the code, rather than depending on the user knowing style tags. There is a box for custom additions as well, so that the format of the job posting doesn’t have to be rigid./p>
