Stephanie Walker

User Experience Design and Accessibility

UX Design: MSUFCU Community Resources Intranet Page

final inside computer prototype

Quick Summary

The purpose of this project was to provide a central digital space where Michigan State University Federal Credit Union (MSUFCU) employees could privately find the help and support that they needed in a time of crisis. I worked with the MSUFCU HR Department to design the page for the company’s intranet.  This page was initially going to be mirrored off of a different page that already existed on the internal website, however I enhanced the design by adding icons and the information pertaining to each community organization to the right of the page. This made the information for each community organization more apparent, thus making the page easier to use and navigate.

The Issue / Task

The purpose of this project was to provide a central digital space where Michigan State University Federal Credit Union (MSUFCU) employees could privately find the help and support that they needed in a time of crisis. For this project, I was asked by MSUFCU’s Human Resources department to design a page that would list these Community Resources on the company’s employee-only intranet.

My Role

I served as the UX Designer on this project, and was tasked with designing the page, and working with the stakeholders (both in IT and HR) to scope the project and get design approvals.

My Process (Summarized)

  • Communicating with Stakeholders and the Business Systems Analyst (Project Manager) to determine project scope.
  • Design the page, from low-fidelity mockups to high-fidelity interactive prototypes (informed by stakeholder feedback).
  • Working with Developers and Software Quality Assurance Analysts to answer their questions during development and testing, and to determine the feasibility of the design.
  • Once development was completed, holding design reviews with Software Developers to ensure the final product matched the prototype, and that a user-friendly and accessible final product was created.

My Process (Detailed)

Phase One: Scope and Analysis

  • Met with the project stakeholder outside of my department (an individual in the Human Resources Department) and a Business Systems Analyst (project manager) to discuss the project and determine its scope.
  • Conducted internal “Comparative Research” on a similar page that already existed on the company’s intranet. This allowed me to gather tangible design ideas to present to the stakeholders of the project, to help gain an understanding of how they wanted the website to look and function.
  • Met with the HR stakeholder and Business Systems Analyst (BSA) to see if similar websites from the internal comparative research met the needs and expectations for the page (project). This included determining what features matched our scope, and which ones did not.

Phase Two: Initial Design

  • With my feedback from meeting with the HR stakeholder and BSA, I began to develop some very basic, low fidelity wireframes (See pictures below).
  • I realized that the comparative research/ “model” website did not include a user-friendly way to display each community organization’s contact information.
  • So, I designed a two-column layout within each organization’s “box” or container on the page: a description of the community organization on the left, and contact information on the right with icons to denote each of them (phone icon for the Phone Number, web/internet icon for their Website URL, etc.). This made the design more user-friendly.

Phase Three: Stakeholder Feedback and Iterative Design, Final Prototypes

  • Went through several iterations of design, getting feedback from stakeholders and company leadership, and then improving the designs based on that feedback.
  • Stakeholders suggested adding “Quick Jump Links” so that the users could easily scroll to specific organizations with one click (see a screenshot below).
  • After feedback from both groups of stakeholders (IT and HR), my wireframes became interactive prototypes.
  • After my interactive prototypes/designs were approved by the executive leadership at the company, my prototype was handed to the software development team to be programmed into a functional website.
Screenshot of Quick Jump links
Quick Jump Links. Each underlined text would include the name of the Organization.
Wireframe of Community Support and Resources page
Final Prototype- Close Up

Phase Four: Development

  • Worked with the Software Development team to answer their questions, and to ensure all parts of the design were feasible.
  • Once the coding for the page was completed, I held a design review with the Software Developers to make sure that the final product matched the prototype and that, if any changes did have to be made, they did not affect the overall usability or accessibility of the page.
  • Added a “Back to top” button to the page so that users could easily navigate back to the top of the page without having to do a lot of scrolling to get back to the top of the page.
  • The “Back to top” button is only visible after the linked organization names at the top are no longer visible after scrolling down the page.

Final Outcome / Summary

In the end, a visually appealing and intuitive website was created. Some features were added along the way to improve usability, creating a two-column layout and adding icons to each corresponding type of contact information. This design made the website more user-friendly and helped the website more effectively accomplish its purpose of helping people in a time of crisis, who do not have a lot of time to spare. I also linked the name of each organization to its corresponding area on the page, so that they could be navigated to quickly. I also designed an Admin page, so that HR employees could add, edit, remove, and reorder the information on the page with ease. These design features can all be seen in the pictures of the final prototype above.

Overall, the goal for this project was to help a company employee, child, or other family member find the resources and help they needed in a time of crisis. This design allows people to complete that task with ease.

final inside computer prototype
Final Prototype Displayed on a Mac Laptop
Scroll Up