screely-1532110341811

Focus Support Site

UX/UI
Quicken Loans

The Guy Focus is a support website that helps employees find answers to commonly asked questions and reach out for assistance for issues in the workplace.

 


 

Introduction

The Facilities support team is an internal team that receives requests from hundreds of employees a day looking for answers on a variety of issues. This team fields calls and emails pertaining to Mail services, Print services, Inventory, as well as a wide range of building/furniture issues.

Ethnographic research

I started my research with the facilities support team to get a better understanding of what their day to day consisted. The most common issue I noticed was that they felt they couldn't complete longer projects or tasks (defined as taking 3 hours or longer) because of the sheer volume of “insignificant calls and questions” they received. These were issues and requests that employees could solve on their own if only they had the knowledge how. Simple tasks like adjusting a chair or help ordering inventory.

User Interviews

Using my research done with the faculties support team I conducted user interviews with Eight Quicken Loans employees. My goal for these interviews was to gain a better perspective of how users perceived Focus and to identify gaps in the knowledge of its services. There were several trends that I noticed from these interviews. Most participants did not know the range of services offered by Focus (specifically the Print Center). Many participants expressed an interest in solving problems on their own and all participants were confused by the terms the facilities supports team used to describe its services.

Goals

  • Foster a culture of self sufficiency among Quicken Loans employees.
  • Free up time for the facilities support teams.
  • Educate employees about the full range of support options offered.

 

Sketches

After doing some initial research I began sketching a support website that would be able to achieve our goals. I began to layout some of the key pages and features with while annotating certain elements using a red pen. I like this method of sketching as it adds another layer of fidelity without sacrificing time.

 

Focus Home Page
3bb2d088-51d4-4d52-a99d-d2a09c44835b_rw_1920+(1)
 
Focus Home Page #2
homeksecth2

 

Contact Page/Block
contact

 

Contact Page/Block
insidepage

Wireframes

At this point in the project I was looking to get feedback/testing from both users and our stakeholders on the facilities support team so I moved my paper sketchs to wireframes using sketch.

HELP+CENTER
HOME
mojodo_home

Information Architecture  

My first instinct when designing the information architecture of the help center was to group issues by the team that handled the issue (Inventory, Facilities, Mail, Print).I conducted an open card sort online with Quicken Loans employees to get a better grasp of how users perceived and categorized the facilities team’s services. What I found was that users did not group the issues into the traditional team responsibilities but rather into lexicons that encompassed multiple teams in one category.

44dd3b96-7237-4088-9e7b-515e5199d2cf
POP@2x

Help Center 

Using my wireframes, I conducted user testing where I found users were confused about the meaning of our category titles even after changing our copy to match the data from the card sort. The illustrations didn't give enough context to what each category contained. I decided to display the top four most common issues in each category below the category title. This change helped to provide users with more information to base their decisions on, leading to less mistakes when completing the task.

helpcahnge

The homepage features both a search box as well as a section of different help topics with questions listed below. Based on our testing we weren’t satisfied with the user experience of wordpress’s native search. Because of our technology restrictions we decided it would be important to give the user another primary way of finding the information they need in our design

Contact Forms

During my requirements gathering with the facilities support team, they expressed the need for receiving three different kinds of requests: Ticket Submission Form, Feedback Form, and Nomination Form. Each of these forms channeled the data to a different area of Focus.

Screen+Shot+2018-07-31+at+8.12.36+PM

Instead of using separate pages, I decided to use the tabbed form system you see above. This design pattern was taken from another internal project at Quicken Loans where the element had tested well with users. 

Focus Hub

Part of the requirements we gathered from the facilities support team was a space for team news, awards and team events. The focus hub is the home of those three features. The focus hub section features a sub menu to navigate between four main screens.

The+Hub

UI Design

I then jumped back into sketch and started building the high-fidelity designs using the wireframes and Focus style guide. I wanted the design to feel fresh, open and fun. The idea for the visual design was to use large amounts of white space to let the content breath and let the little color I did use stand out.

Home
Home (1)
Help Center 
Help+Center

Results

The Guy Focus website helped reduce tickets sent to the guy by about 20%. After seeing the site and the impact it was having, two other support teams put in requests for a similar site. Currently one all encompassing site is being built for all support services to be a one stop shop for support at Quicken Loans.

What I Learned

  • Ask for feedback early and often
  • Include a group of people with diverse backgrounds during testing

 

Interested in learning more about my work? Email me at cass.stephan@gmail.com