Baruch College
Intranet Design
As the only web content editor and UX designer for the Operations and Administration Department at Baruch College, I was brought on to improve the user experience of the department’s intranet. The previous design was messy and hard to navigate, making it difficult for staff and faculty to find important information efficiently.
As the only web content editor and UX designer for the Operations and Administration Department at Baruch College, I was brought on to improve the user experience of the department’s intranet. The previous design was messy and hard to navigate, making it difficult for staff and faculty to find important information efficiently.
Role:
Web Content Editor
Duration:
April 2024 - Now
Images are limited and intentionally blurred due to confidential material.
My Goal:
My Goal:
My Goal:
In this project, my goal was to streamline the site’s content and structure, ensuring a more intuitive and user-friendly interface. I reorganized user workflows, redesigned the site layout, and implemented accessibility improvements to create a seamless navigation experience. Below, you can see the "Before" and "After" comparisons, highlighting the transformation of the intranet, resulting in a more efficient and accessible platform for all users.
In this project, my goal was to streamline the site’s content and structure, ensuring a more intuitive and user-friendly interface. I reorganized user workflows, redesigned the site layout, and implemented accessibility improvements to create a seamless navigation experience. Below, you can see the "Before" and "After" comparisons, highlighting the transformation of the intranet, resulting in a more efficient and accessible platform for all users.
In this project, my goal was to streamline the site’s content and structure, ensuring a more intuitive and user-friendly interface. I reorganized user workflows, redesigned the site layout, and implemented accessibility improvements to create a seamless navigation experience. Below, you can see the "Before" and "After" comparisons, highlighting the transformation of the intranet, resulting in a more efficient and accessible platform for all users.
Before I Came
After My Design
Result:
Result:
Result:
Before I Came &
After My Design
Before I Came & After My Design
To date, I have created 107 pages for the intranet website. All 20 employees who tested the new design found the webpage flow significantly clearer. The enhanced design was implemented across the entire intranet, which also facilitated more efficient web content updates by other departments
To date, I have created 107 pages for the intranet website. All 20 employees who tested the new design found the webpage flow significantly clearer. The enhanced design was implemented across the entire intranet, which also facilitated more efficient web content updates by other departments
To date, I have created 107 pages for the intranet website. All 20 employees who tested the new design found the webpage flow significantly clearer. The enhanced design was implemented across the entire intranet, which also facilitated more efficient web content updates by other departments
Challenge:
Challenge:
Challenge:
Baruch College uses SharePoint to build the intranet Webhub.
The SharePoint tool has limitations that impact the ability to create a visually optimal and clearly flowing webpage. The challenge is to design a page that is both visually appealing and easy to navigate within these constraints.
Baruch College uses SharePoint to build the intranet Webhub.
The SharePoint tool has limitations that impact the ability to create a visually optimal and clearly flowing webpage. The challenge is to design a page that is both visually appealing and easy to navigate within these constraints.
Baruch College uses SharePoint to build the intranet Webhub.
The SharePoint tool has limitations that impact the ability to create a visually optimal and clearly flowing webpage. The challenge is to design a page that is both visually appealing and easy to navigate within these constraints.
Navigation Structure Redesign
Navigation Structure Redesign:
Navigation Structure Redesign:
Navigation Structure Redesign:
The old website was organized primarily by department, which led to a complex and cluttered user experience. The new design removes the department-based structure and instead organizes content based on functionality.
Business Services has been broken down into more specific categories such as Travel, Budget, Mailroom, and Procurement.
HR has been split into distinct areas: Benefits, Payroll & Timekeeping, and Talent Acquisition Management.
This new structure simplifies the user journey, making it easier for employees to quickly find relevant information on the intranet. By grouping content according to function rather than department, the redesigned sitemap streamlines navigation and improves overall accessibility.
The old website was organized primarily by department, which led to a complex and cluttered user experience. The new design removes the department-based structure and instead organizes content based on functionality.
Business Services has been broken down into more specific categories such as Travel, Budget, Mailroom, and Procurement.
HR has been split into distinct areas: Benefits, Payroll & Timekeeping, and Talent Acquisition Management.
This new structure simplifies the user journey, making it easier for employees to quickly find relevant information on the intranet. By grouping content according to function rather than department, the redesigned sitemap streamlines navigation and improves overall accessibility.
The old website was organized primarily by department, which led to a complex and cluttered user experience. The new design removes the department-based structure and instead organizes content based on functionality.
Business Services has been broken down into more specific categories such as Travel, Budget, Mailroom, and Procurement.
HR has been split into distinct areas: Benefits, Payroll & Timekeeping, and Talent Acquisition Management.
This new structure simplifies the user journey, making it easier for employees to quickly find relevant information on the intranet. By grouping content according to function rather than department, the redesigned sitemap streamlines navigation and improves overall accessibility.
Page Design
Working Process:
Working Process:
Working Process:
1. Research > 2. Design > 3. Test > 4. Revised > 5. Launch
Note: The Operations and Administration Department supports various areas, including HR, travel, budgeting, procurement, conference room management, public safety, and campus facilities. As many of the pages are still in progress and the intranet is assumed to be internal, I will use the Travel page as an example to illustrate my working process.
If you would like to know more details, feel free to email me.
1. Research:
1. Research:
Identify issues with the current travel page and gather stakeholder requirements.
STEPS
Define the Problem:
The existing intranet travel page is cluttered with excessive, disorganized information, resulting in a poor user experience and lengthy scrolling.
Stakeholder Consultation:
Schedule a meeting with the Travel Department to understand their objectives and the purpose of the travel page.
Stakeholder Concerns:
The department prefers that faculty and staff refer to an instructional PDF rather than ask numerous questions.
They aim to simplify the reimbursement process and ensure that users are well-prepared for travel.
Convert to User Issues:
The instructional PDF contains too much information and needs to be simplified, with a clear hierarchy to guide users on what to do before traveling.
STEPS
Define the Problem:
The existing intranet travel page is cluttered with excessive, disorganized information, resulting in a poor user experience and lengthy scrolling.
Stakeholder Consultation:
Schedule a meeting with the Travel Department to understand their objectives and the purpose of the travel page.
Stakeholder Concerns:
The department prefers that faculty and staff refer to an instructional PDF rather than ask numerous questions.
They aim to simplify the reimbursement process and ensure that users are well-prepared for travel.
Convert to User Issues:
The instructional PDF contains too much information and needs to be simplified, with a clear hierarchy to guide users on what to do before traveling.
1. Research:
Identify issues with the current travel page and gather stakeholder requirements.
STEPS
Define the Problem:
The existing intranet travel page is cluttered with excessive, disorganized information, resulting in a poor user experience and lengthy scrolling.
Stakeholder Consultation:
Schedule a meeting with the Travel Department to understand their objectives and the purpose of the travel page.
Stakeholder Concerns:
The department prefers that faculty and staff refer to an instructional PDF rather than ask numerous questions.
They aim to simplify the reimbursement process and ensure that users are well-prepared for travel.
Convert to User Issues:
The instructional PDF contains too much information and needs to be simplified, with a clear hierarchy to guide users on what to do before traveling.
2. Design:
2. Design:
Optimizing Travel Information Structure and Design Through A/B Testing
STEPS
Content Structuring:
Based on the instructional PDF, divide the travel information into three main sections:
Preparing for Travel
While You Are Traveling
When You Return from Traveling
Add a section for new travelers to provide a quick overview of the process.
Include an FAQ section.
Layout Design:
Utilize a one-third layout to maintain consistency and simplify the page design.
Conflict:
Initially proposed using "call-to-action" buttons to replace lengthy forms, but this suggestion was not approved. Therefore, bring this concern into the testing phase.
Test A & B design below:
STEPS
Content Structuring:
Based on the instructional PDF, divide the travel information into three main sections:
Preparing for Travel
While You Are Traveling
When You Return from Traveling
Add a section for new travelers to provide a quick overview of the process.
Include an FAQ section.
Layout Design:
Utilize a one-third layout to maintain consistency and simplify the page design.
Conflict:
I initially proposed using 'call-to-action' buttons to replace the lengthy forms, but my manager did not approve the suggestion. As a result, I brought this concern into the testing phase.
The button is a clickable link to a form where faculty and staff can submit travel-related questions, while the lengthy form is the same but presented as a longform version on the page
Test A & B design below:
2. Design:
Identify issues with the current travel page and gather stakeholder requirements.
STEPS
Content Structuring:
Based on the instructional PDF, divide the travel information into three main sections:
Preparing for Travel
While You Are Traveling
When You Return from Traveling
Add a section for new travelers to provide a quick overview of the process.
Include an FAQ section.
Layout Design:
Utilize a one-third layout to maintain consistency and simplify the page design.
Conflict:
Initially proposed using "call-to-action" buttons to replace lengthy forms, but this suggestion was not approved. Therefore, bring this concern into the testing phase.
Test A & B design below:
3. Test:
3. Test:
Evaluate the redesigned page with users to identify any issues.
STEPS
User Testing:
Conduct usability testing with 5 faculty members to navigate the updated page.
Findings:
The long form format is cumbersome. The "call-to-action" button does not meet the stakeholder's expectation that users should ask questions only after reviewing the website content.
3 out of 5 faculty members found the text for each step overwhelming.
STEPS
User Testing:
Conduct usability testing with 5 faculty members to navigate the updated page.
Findings:
The long form format is cumbersome. The "call-to-action" button does not meet the stakeholder's expectation that users should ask questions only after reviewing the website content.
3 out of 5 faculty members found the text for each step overwhelming.
3. Test:
Evaluate the redesigned page with users to identify any issues.
STEPS
User Testing:
Conduct usability testing with 5 faculty members to navigate the updated page.
Findings:
The long form format is cumbersome. The "call-to-action" button does not meet the stakeholder's expectation that users should ask questions only after reviewing the website content.
3 out of 5 faculty members found the text for each step overwhelming.
4. Revise:
4. Revise:
Refine the page based on testing feedback to enhance clarity and usability.
STEPS
Visual Aids:
Implement a flow chart to visually represent the travel process before users engage with the content.
Content Simplification:
Streamline and clarify the content for each process step.
Position the 'Submit Travel-Related Questions' form below the process section to encourage users to review the page content before submitting their questions.
STEPS
Visual Aids:
Implement a flow chart to visually represent the travel process before users engage with the content.
Content Simplification:
Streamline and clarify the content for each process step.
Place the process overview at the top right of the page with links
Position the 'Submit Travel-Related Questions' form below the process section to encourage users to review the page content before submitting their questions.
4. Revise:
Refine the page based on testing feedback to enhance clarity and usability.
STEPS
Visual Aids:
Implement a flow chart to visually represent the travel process before users engage with the content.
Content Simplification:
Streamline and clarify the content for each process step.
Position the 'Submit Travel-Related Questions' form below the process section to encourage users to review the page content before submitting their questions.
5. Launch:
5. Launch:
Finalize and deploy the updated travel page after obtaining departmental approval.
STEPS
Obtain Approval:
Present the revised design to the Travel Department for feedback and approval.
Launch:
Deploy the updated travel page on the intranet.
STEPS
Obtain Approval:
Present the revised design to the Travel Department for feedback and approval.
Launch:
Deploy the updated travel page on the intranet.
5. Launch:
Finalize and deploy the updated travel page after obtaining departmental approval.
STEPS
Obtain Approval:
Present the revised design to the Travel Department for feedback and approval.
Launch:
Deploy the updated travel page on the intranet.
Hire me.
© 2024 Xueying(Danica) Design
Hire me.
© 2024 Xueying(Danica) Design
Hire me.
© 2024 Xueying(Danica) Design