Overview

On Q Financial is a national mortgage lender headquartered in Tempe, Arizona. They are a rapidly growing company, and as they continue to scale, they require many technological solutions to help them do their job. One such tool is On Q Connect, an intranet web application developed internally. As each department has its own specific needs and requirements, the goal of On Q Connect is to meet these needs while being intuitive and easy to use. For this project, I worked as a freelance UX Designer. My goals were to gain insight regarding On Q Connect’s users, and provide the development team with direction in regards to building an intuitive, empowering digital experience.

Stakeholder Interviews

In order to accomodate each department’s requirements for the tool, we first needed to define and understand those requirements. We conducted stakeholder interviews in order to help us do so. Participants in the interviews were from various departments, such as compliance and product development. Through these interviews, we were able to ascertain not only their desires, but also some surrounding concerns in moving to a new system. We were also able to gather knowledge regarding the current systems in place, what they liked about it, and what needed improving upon.

Features & Functionality

After conducting stakeholder interviews and additional user research, we were able to define the primary functionality that the tool would provide, in addition to some secondary features. The primary functionality includes:

  • Document Browser & File Management System
  • User Directory
  • Announcements & Event Calendar
  • Global Search Capability
  • Dashboard & Notifications

Wireframing

Once the requirements were defined, I developed a series of wireframes to help organize the application’s visual hierarchy and information architecture. For those unfamiliar with the term, wireframes act as blueprints for the interface. It organizes page layout and content structure. It does not contain visual design aspects, such as images or styling, aside from some basic visual hierarchy to help provide context into the page’s overall structure.

Interactive Prototyping

Although an interactive prototype is usually created once all of the visual styles and UI Design has been applied, I instead added some basic interactivity to the wireframes via Figma’s prototyping feature. The interactivity mostly focused on navigation. I included primary navigation, such as routing and navigating between pages. I also included sub-navigation for things like toggling information, modals, and navigating through on-page processes. I also included interactivity to the sidepanel-based layout, which added animation that adjusted the page layout depending on whether or not the sidepanel was open.

Note: This is an ongoing project, and will be updated as additional testing is conducted and improvements are made based on the results of that testing