Loyola Press
Background
Loyola Press is a Jesuit publishing company specializing in Catholic related materials. The company goes beyond publishing faith-based books, but also works with Catholic schools to plan curriculum and provide curriculum focused books for students.
Productive Edge is a digital business consulting and technology solutions company based out of Chicago, IL. They endeavor to help organizations and leaders reinvent and transform their businesses with digital technologies. Productive Edge’s focus is to to help today’s smartest organizations as they undergo digital transformation, create consistent and differentiated customer experiences, map new customer journeys and enhance employee engagement.
While working for Productive Edge, I was the lead UX Researcher / Designer and Business Analyst on a project dedicated to a site-wide redesign of the Loyola Press (http://www.loyolapress.com/) website. While working on this project, I conducted stakeholder/employee interviews, contextual inquiry, a heuristic evaluation, put together a competitive analysis of the client's closest competitors, researched various designs and user experience flows, created low-fidelity wireframes, worked with the visual design team to produce hi-fidelity mock-ups, and made presentations to the executive team of Loyola Press, reviewing my findings and recommended designs and solutions.
Home Page
I began my research work with Loyola Press by first interviewing their stakeholders, employees, and users to determine the pain points that they were experiencing with the current website. I was provided access to the site’s analytics and heatmaps, and this helped determine where most users were clicking, navigating to, most interested in, or where they were dropping off. From there, I performed a heuristic evaluation across the entire site to identify usability issues. I also held contextual inquiries with users and employees to further investigate their pain points and determine opportunities for improvement. From the data gathered, it was decided that our work would start with Loyola Press’ homepage due to the various pain points and usability issues encountered with their entry points.
Design Challenge
Needed an effective entry point on the homepage for the Shop that would draw users/customers to purchase items.
The client wanted to give more prominence to their Spiritual content on the homepage.
Required better controls and functionality for their image carousel.
Needed to incorporate ad space on the homepage.
Loyola Press' original homepage. Navigation and footer not included (Red circled numbers were for annotation and not part of the actual nav)
Loyola Press hi-fidelity homepage redesign mock-up
Design Solution
Given that Loyola Press has a number of categories listed in their shop, I added a Featured Product Category carousel on the homepage. Clicking on a category image takes the user to a faceted product category search page. Clicking the View all Products link takes the user to the Shop landing page.
Added a “Deepen your Spirituality” area where the four main spiritual sections of the website are featured. They include an image of the four daily spiritual content areas as well as a brief description of the day’s featured content.
Added controls on the image carousel that allowed the user to move forward and backward.
Removed the ad space to the right of the image carousel and provided LP with the ability to assign 1 - 4 ad space images to the homepage. The site administrator was given control over the number of ads displayed through their private CMS.
Working with the creative department, I was able to generate a wireframe and eventually a high-fi creative mockup for the suggested homepage redesign.
Navigation & Information Architecture
Navigation & IA Challenge
During the project, I came across an issue regarding the way the navigation operated on the current Loyola Press website. There was the main navigation bar, secondary left rail navigation accordions, and tertiary links contained within some pages. Nested within the main navigation bar were tens of random links that were listed without any discernible order. Research data indicated that most users would open up the navigation menu, and due to the overwhelming number of nondescript options, they would immediately navigate to the search feature for what they were looking for.
At the start of the project, the Loyola execs made it clear that they had made a significant investment in their information architecture and they did not want it to be touched. My research proved that their navigation was a major cause of most of the user pain points and loss of revenue that they were experiencing; they were also receiving an overwhelming amount of phone call orders and very little online sales. To solve this problem, I performed a competitive analysis against Loyola’s closest competition and other websites that utilized a large number of menu items. I also performed a content audit for the entire site to figure out the standing architecture.
Loyola Press' original navigation. (Red circled numbers were for annotation and not part of the actual nav)
Usability Issues
Secondary and tertiary navigation areas on web pages limit the space for the page content.
There are web pages that are just a list of links, adding another layer of complexity, or an extra click, for the user to get to the page that they desire.
The main navigation bar is a partial mega menu that displays the main section along with a few of the links contained within those sections.
Depending on the navigation item selected, the partial mega menu can be difficult to navigate.
Navigation & IA Solution
I determined that Loyola Press needed a more user-friendly “mega menu” with a more usable categorization and link titles. I began the restructuring by reaching out to LP’s project manager and setting up time with users and employees so that we could card sort the numerous menu links. From there, I was able to distill the major categories and rename them so that they aligned with user mental models and the business requirements.
I proceeded to create a wireframe in Balsamiq and then worked with the Visual Designer to create a mockup of the new proposed menu. Once everything was in place, I presented my findings and recommendations to the Executives of Loyola Press. After some consideration and review of my research, it was decided to allocate more funding to the project, specifically to focus on fixing the navigation of and information architecture of Loyla Press.
Based on my research and best practices, I removed the secondary and tertiary navigation options and incorporated the links into the mega menu.
I chose to remove the web pages that were just a list of links and incorporate those links into the mega menu.
I extended the functionality of the main navigation menu so that all of the sections and links are displayed within the mega menu. The main sections are in the first column, the sub-sections are in the second column, and the third column can be populated with page links/images or product ads.
Working with the client, I was able to clean up the navigation items to make the site easier to navigate and provide a more usable information structure.
Wireframe created for the suggested mega nav redesign. (Red circled numbers were for annotation and not part of the actual nav)
Loyola Press hi-fidelity mega nav redesign.