Stephanie Walker

User Experience Design and Accessibility

UX Design: MSUFCU eMessage Center

Final Prototype displayed on an iPad
Final eMessage Center Prototype

Quick Summary

For this project, a fellow UX Designer colleague and I redesigned some elements to the eMessage Center on MSUFCU’s main digital banking platform, ComputerLine. We updated the UI to match the current MSUFCU design style/branding, as well as added some features to improve the member’s experience. Ultimately, these changes made the eMessage Center more user-friendly. For specifics about what was changed/added, please see below. This project involved working with people on different teams inside and outside my department. The first phase of this project focused on the internal (receiving) side of the eMessage Center. However, for security purposes, I will only provide details on the external portion of the project.

The Issue / Task

  • Inside ComputerLine, there is a message center that allows members to send a secure message to MSUFCU, and then MSUFCU can respond back. This is called eMessage Center.
  • This system is oftentimes used to complete various applications or to provide documents to the Credit Union via the internet. The eMessage Center UI was outdated and needed new features to make it more user-friendly.

My Role

  • For this project, I worked with a fellow UX Designer on my team to improve the UI of the eMessage center, as well as make the eMessage Center more user-friendly (intuitive).
  • Throughout the project, my fellow UX Designer and I would communicate across multiple teams and departments, including the eMessage center managers, to ensure the project ran effectively.

My Process (Summarized)

  • Meet with managers in charge of the eMessage Center to determine project goals and requirements, and create a spreadsheet that stated what needed to be redesigned or added
  • Conduct brief Comparative Research with other bank’s Message Centers
  • Split up tasks between myself and other UX Designer to be efficient
  • Use MSUFCU Design Library (similar to a content and brand guide) to improve the UI of the Message center
  • Add a spinning upload icon, attachment counter/tracker, and ability to view the previous message while typing a response- all to improve the usability
  • Meet with eMessage center managers, IT executive leadership for approvals of designs and other digital assets
  • Throughout the entire project, communicate with the software developer on the project, to determine the feasibility of coding the designs and answer any questions

My Process (Detailed)

Phase One: Scope and Analysis

  • My design teammate and I participated in kickoff meetings to gain an understanding of what was going to be redesigned, scope, deadlines, and to brainstorm how to structure the project overall. We also created an excel sheet that listed what was going to be redesigned or added.
  • I worked with users who had accounts at other financial institutions to study how their eMessage centers functioned and how they were designed. Specifically, I studied the UI, features, and most importantly interaction patterns to determine best practices for our redesigned eMessage center.

*Unfortunately, due to security purposes, the images and analysis from this comparative research cannot be shared*

Phase Two: Initial UI Design

  • First, my design team member and I split up the various tasks in the spreadsheet, so that we could remain efficient and meet deadlines.
  • Then, I began my work redesigning the UI of eMessage center, using the Design Library feature built into UX Pin (which contained MSUFCU’s Brand) to update all of the buttons and various UI elements of the eMessage center.

Please note:

  • Because there was only one minor edit to the layout of the page, my fellow UX Designer and I prototyped in what appears to be high-fidelity, but each feature did go through an iterative cycle of design and re-design after stakeholder feedback.
  • There are several features that were added for this project, so for simplicity’s sake, only the final prototypes are shown.

I was responsible for the redesign/implementation of the following 4 elements:

  1. Redesign the editable content area (where you type the message) under the “Inbox” tab to include an area for you to type a response, while still being able to view the previous response

2. Update interaction that occurs when a user clicks on the “Add Attachments” button

° In the original design, users could not tell if their attachment had successfully uploaded, causing confusion and frustration.

° To fix this, I redesigned the loading symbol that appears after you have uploaded an attachment to your message. This provides a better user experience for MSUFCU members, allowing them to use the eMessage Center with ease.

3. Create a linkable attachment counter (number of attachments) to be displayed above the Message box

Please Note:

  • After the attachment has been successfully uploaded, the loading symbol turns into a checkmark, and the helper text “File upload complete” is displayed.
  • You can add more than one attachment and can delete any of the attachments from the pop-up box.

4. Make sure that it is clear that “Attachments [#]” above the Message box is clickable, and when clicked on, it will list the attachments that have (already) been added to the message and give the option to delete each one, as seen below

What the window would look like if clicked on the “Attachments” text above the message box

Phase Four: Approvals and Final Prototype

  • The remaining work of the project consisted of meeting with eMessage center managers, IT executive leadership for approvals of designs and other digital assets.
  • Throughout the entire project, I communicated with the software developer on the project, to determine the feasibility of coding the designs and answer any questions that he had.
  • Overall, executive leadership liked the designs, minus some minor border color changes to make certain elements be more apparent to the eye. Below is the final prototype.
Screenshot of the eMessage Center wireframe
Final ComputerLine eMessage Center Prototype- Close up

Final Outcome

In sum, I am very proud of this project. I feel that this project gave me a lot of experience in designing for public audiences, and creating visually appealing, but also intuitive designs. This project was finished after my internship ended, but it is now “live”, and is within ComputerLine.

Scroll Up