Stephanie Walker

User Experience Design and Accessibility

UX Research and Design: MSUFCU Job Descriptions Page

High- fidelity Wireframe of the redesigned Job Descriptions Page

Quick Summary

For this project, I had the opportunity to go through all of the phases of the User Experience Design process while redesigning the Job Descriptions page for MSUFCU’s intranet. In order to improve the usability of the page, I needed to figure out how to lay it out in a more effective manner and structure it so that it could be accessed with fewer clicks. I began by conducting some user interviews with my fellow designers and software developers (all MSUFCU employees). After analyzing the research data and developing 3 features to improve the website, I created user stories to ensure that my new design would reflect all the possible users and the scenarios of how the page could be used.

The Issue / Task

The main task of this project was to improve the usability of the Job Descriptions page on Michigan State University Federal Credit Union’s (MSUFCU’s) internal website, so that users (MSUFCU employees) could find a description of a job at MSUFCU faster and easier. The Job Descriptions page is a page on the MSUFCU’s internal website and provides a description of all the existing job positions ( jobs that people currently have at the Credit Union, not necessarily jobs that are currently available or hiring ).

My Role

After doing a quick evaluation of its usability and information architecture, I decided I was going to do a complete usability/user experience assessment on it to develop some data to be able to base a redesign off of. This would entail all kinds of UX Research: User interviews, comparative research, developing user stories, etc. This project was also mainly self-led, with the support of my mentor and occasionally other designers on my team at MSUFCU. And, of course, I also gathered stakeholder feedback throughout the process.

Goals

  • Enhance the Usability of the Job Descriptions Page
  • Determine whether the Job Descriptions page should include current open positions, in addition to a description of the positions that people currently hold at the Credit Union
  • Determine whether the descriptions of each department should be included with the list of jobs people currently hold at the Credit Union

My Process (Summarized)

  • Schedule and conduct 6 initial User Interviews
  • Conduct Comparative analysis against other similar websites
  • Analyze Results of all User Research (User Interviews and Comparative analysis)
  • Develop User Stories and new User Flow/ Information Architecture
  • Low-fidelity Wireframing
  • Consult with stakeholders in the Software Development and Human Resources departments to get feedback and approval for designs
  • Developing a High-fidelity wireframe and (after more feedback) eventually an interactive prototype

My Process (Detailed)

Phase One: User Research

  • Develop a list of questions to ask every user, in order to create consistency (and therefore accuracy) when analyzing the data.
  • Questions determined how the users, MSFUCU employees, used the page (and for what specific tasks or reasons), and what they would like to see be improved.
Picture of the first few sections of User Interview Questions
Copy of some of the questions from the User Research

Phase Two: Analysis of Research

  • Upon extensive analysis of the User Interview results, I derived 3 features that need to be added to improve the User Experience (and therefore also the usability) of the Job Descriptions page.
  • The summary of the analysis, and the 3 new features that the analysis discovered, are listed below. Detailed analysis available upon request.

Three Features Derived from the User Interviews:

  1. Have a separate area on the page for the user’s own job description ( a separate box, so that the User’s own job description is easy to access/ so the user wouldn’t have to scroll through the page just to find their own job)
  2.  To be able to see which of the positions within a department are currently open/hiring so that any information regarding jobs at the Credit Union is all located in one place. Also include up-to-date information.
  3. Make the page easier to navigate by moving the location of the job descriptions to a spot that is not “hidden” or does not have to be clicked in order to be seen or accessed. Additionally, remove the icons and add an “alphabet scroller,” such as the one below:

Phase Three: Develop User Stories

  • To ensure that complete consideration of the user’s ultimate goal during the next few phases (the design phases), I created User Stories based on the User Research (and its analysis).
User Stories Document

Here are the User Stories. To read the content in more detail,

Phase Four: Low-Fidelity Wireframing

  • Use data from UX Research to develop initial wireframes of the Job Descriptions Page. 

Phase Five: Consult with HR and IT to Improve Designs and Gather Feedback

  • Since this page listed all of the jobs that are currently held at the Credit Union, the HR department is the stakeholder and content manager for this page.
  • Thus, it was important that I meet with someone in the HR department to make sure that the features and new structuring of the page met their goals. 
  • The HR representative that I met with was pleased with my progress on the page, and gave some feedback for the page, including telling me that we would not be able to link out to the outsourced internal open positions page due to product limitations.
  • The IT stakeholders also liked the design, but had some suggestions on the information that would be included. They suggested adding the location of each department to make the contents of each page easier to navigate and search through.
  • With this feedback, I developed a high-fidelity wireframe, shown below.
Hi-fi-mockup of job-descriptions page inside a Mac Laptop
High Fidelity Prototype

Phase Six: Final, Interactive Prototype

  • After additional feedback and revisions on the high-fidelity wireframe, I developed the wireframes into an interactive prototype.
  • A picture of the final prototype can be seen below.
  • This project did not reach development while I was working at MSUFCU, so I did not get a chance to work on this project with Developers or QA Analysts.
Final Job Descriptions Prototype inside a Mac Laptop
Screenshot of Final Job Descriptions Prototype

Final Outcome / Summary

Here is an infographic that summarizes the results of this project’s research and the information derived from it.

(Description of Infographic: It displays each piece of feedback that I got from the user interviews, followed by an arrow that leads to what user scenario was developed based on that. Beneath the user scenarios is another arrow leading to the feature that was derived from the user interviews/ is supported by the user stories. The features are listed underneath the User Scenario to show that the User Scenario is what supports or ensures the full understanding of the reasoning and thought behind each feature. The idea is that the infographic represents what each piece of information from the project led to, as a way of summarizing the project).

To read the chart in more detail, view the Job Descriptions summary chart

Scroll Up