Pace University Website
Redesigning the Pace University's current website based on the best possible information architecture principals.
Project Type: University in-house project
Timeframe: January 2017 - May 2017 (5 months)
Design Tools: Balsamiq, Omnigraffle, Adobe XD, Sketch 3, InVision Studio
Activities: Requirement Gathering, User Research, Team Leadership, Presentations
Role & Responsibilities: Lead UX designer and Information Architect on a team of 4
The Problem
According to the feedback provided by students, parents, university representatives and staff members -
“The PACE University website is repetitive in content, complex to understand, sometimes difficult to navigate and having redundancy on most of their web-pages making it super-overwhelming!”
Pace University's website is accessed by many individuals including the currently enrolled students, their parents as well as staff members. It is also accessed by many individuals who are not part of this university but visit the University website to know more about it so that they can enroll for courses, apply for jobs or even check out any events!
Though the current architecture of pace university website is aesthetic and functional enough to get all the required information, there have been cases when people could not navigate smoothly through the webpages because of their complexity and ambiguity. Also, sometimes users complained about their frustrations of seeing repetitive content and redundant web-pages. So, there was a clear need to re-design the architecture of the Pace university's website.
Flat vs Deep Website Information Architecture
After carefully analyzing the Pace University’s website, we concluded that the website currently uses Deep Site Architecture (sometimes known as Narrow and Deep organizational structure).
According to Website Navigation: Flat vs. Deep posted by Hare Krishna Dash on May 18, 2016
Most web designers know the difference between flat and deep website navigation techniques but they are unaware about their impact on SEO. This makes it important that they understand the characteristics, potential inconveniences and advantages of both architecture types.
What are Flat and Deep Architectures?
The main difference between these structures lies in their orientation of hierarchy of the content on the website. In flat architecture, majority of the pages would be accessible within a few clicks from the home page. This means that there are multiple top level categories and fewer subcategories, thus shortening the link chain to any single page. The nested or deep architecture means that the hierarchy of content has more levels with lesser top level categories and subcategory levels. More clicks are needed in order to reach a page which will be nested in a deeper subcategory. Flat structures possess a horizontal hierarchy while deep architectures possess a vertical hierarchy.
In the SEO world it is better to have flat website architecture since it features a simpler hierarchy and is easier to navigate. However this might not be true always and the selection of an appropriate structure largely depends on the type of service or business offered along with the website’s goal.
User Experience
With flat architecture one can easily access most pages in only a few clicks from the home page. In comparison deep architecture requires more clicks due to the presence of multiple sub-levels. For a great user experience it is imperative that the information is found quickly. On the other hand if you have a rather large website then a more refined classification can be a lot more user friendly. Deep architecture also helps in removing a lot of clutter which comes from having overcrowded navigation menus that can act detrimental to the content flow.
Crawlability
With a flat architecture you reduce the number of sub levels on your website, which means that the search engine bots can easily reach your website without following a log link chain. Another prevalent concept is that a higher page in the site hierarchy gets a higher priority from the search engines which lead to better rankings for the page. However it also means that the pages on the top would have much greater number of links in comparison to the vertical hierarchy. Having a lot of internal links on a single page can have a negative impact on the website as the crawlers won’t be following all of them and some pages might not be crawled or indexed.
Performance Analysis
Another area which is affected by the information architecture is their ability to successfully collect relevant data and analyze the performance of the website. Having a deep architecture can prove to be helpful for your web analytics since it allows you to club your content into sections and get a better understanding of the performance of each section and discover technical issues. It also provides you with the ability to drill through content paths and categories to understand how the user interacts with the website on a micro level.
The Solution
To overcome all the challenges mentioned above, we worked on a new, freshly redesigned website based on the best possible information architecture solution for Pace University students, staff members and everyone, who wish to visit the website to find the information that they want.
Flatter navigation consolidates pages by making use of vertical real estate
Flat navigation decreases the layers of navigation & often the no. of pages
Flat navigation caters more to the variety of ways people find & hone information
Flat navigation requires less inputs to get content
The Research
We did rigorous user research before we started working on any of the designs. Our research included different phases such as surveys, one-on-one interviews, content inventory analysis, card sorting exercises (open and close), affinity diagram mapping, competitive & comparative analysis, user personas, user flow diagrams, usability studies, etc. and followed the below generalized double diamond UX design process.
Research Script
Designed a research script along with consent forms to gather feedback from users who use the Pace University website to access any information.
User Interviews
Conducted a series of one-on-one interviews with targeted users to understand their website behaviors and patterns as well as to get more insights on their past personal experiences.
Content Inventory
As a part of our research process, we created an extensive content inventory of our website to gather large amounts of data and later on organized them into groups and themes based on their relationships so that we could use this information to conduct card sorting exercises.
Competitive / Comparative Analysis Research
After carefully visiting and evaluating most of the university websites from New York, we did competitive as well as comparative analysis -
To understand where our website and services stand in the market
To inform the design process
To know the strengths and weaknesses of our competition
To have reliable evidence when making any product changes
To focus our efforts in a target market
Competitive/Comparative Analysis | Page 1 of 2
Competitive/Comparative Analysis | Page 2 of 2
Architecture Analysis
Existing Sitemap Analysis
Card Sorting Exercises
Carried out Open and Closed card sorting exercises with university participants and other users.
User Personas
Based on user research, we created a few personas that we referred throughout the next design phases.
Modified Sitemaps
After evaluating all the data from user research, we modified existing website sitemaps to make the website information architecture in a way that it becomes more usable, navigable, and findable.
Wireframe Sketches
Iterated at least 20 low fidelity wireframe sketches to come up with the MVP (minimum viable product) of the project.
Designed medium and high fidelity wireframes before moving to the final design phase.
Usability Testing
Testing is one of the most important phases of the UX design process, so usability testing methodologies were applied.
Jakob Nielsen’s Usability Heuristics Evaluation
Based on Jakob Nielsen’s 10 usability principles in human-computer interaction (HCI), successfully conducted 13 usability tests.
UI Designs
Some of the UI designs designed using Adobe XD, Sketch and Photoshop.
Next Steps
The Pace University’s website information architecture was revamped specifically for Pace University, New York campus students and was released in the beta version. I’d love to scale this project to a level where these information architecture principals are applied to all the responsive digital platforms including mobile apps, tablets, and iPads.
Special thanks to all my other team members and all of the users who contributed towards the successful delivery of this project.