screely-1532110341811.png

Focus Support Site

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.

screely-1532110341811.png

Focus Support Site

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.

 
 
 

Role: UI/UX/Development

Introduction

The Guy Focus is an internal support 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. 

Research Methods

Ethnographic research

I started the study by performing ethnographic research with The Guy Focus 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. 

User Interviews

I conducted user interviews with four 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 Focus used to describe its services.

Card Sort

44dd3b96-7237-4088-9e7b-515e5199d2cf.png

To  organize the contents of the help center, I  conducted an open card sort online with a small group of users to get a better grasp of how  users perceived and categorized Focus’ services.My first instinct was the group issues by the team that handled the issue. 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.

taxonomy.png

Sketches

I like starting my designs with sketches where I sometimes annotate certain elements using a red pen. This gives me an opportunity to get feedback and iterate over ideas quickly. 

Wireframes

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 illustarrions 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.

Contact Forms

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

Instead of using separate pages, I decided to use the tabbed form system you see above. This design pattern was borrowed from one of my colleagues projects, where they were able to prototype and perform usability testing of the element. 

Focus Hub

Part of the requirements received from the guy Focus was a space for team news, awards and team events. The focus hub section features a sub menu to nagivate between four main screens.

The Hub.png

UI Design

I then jumped 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.

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 requested for a similar site. Currently one large 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 
  • Design with accessibility in mind