HelpDesk

“A next-gen IT-as-a-service platform that automatizes IT Admin Workflows across the entire employee journey.”

Role: Product Designer

Tools: Figma, Miro, Photoshop

Deliverables:
UX Research - Competitive Analysis, Personas, User Flow
UX Design - Sketches, Low & Mid Fidelity Wireframes, and a High Fidelity Prototype

Timeline: September 2022 - October 2022 (4 weeks)

Design Team: Victor Chue, Arwin Paday, Prasanti Guntuku, Pegah Habibi

Project Overview

Companies spend on average $60k a year on routine IT - and still, struggle to achieve smooth and secure IT operations.

HelpDesk is here to change that with a plug-and-play IT set-up, designed by thought leaders in the IT industry with the edge of a next-gen, scalable software-as-a-service platform.

**Problem Statement**

Millions of SMEs (Small to Medium Enterprises) are struggling with managing their IT systems. IT managers and users need to decrease their time spent on computers to increase productivity.

Solution

HelpDesk creates an IT management website that allows users to request hardware/software and resolve requests from users. We automatizes IT admin workflows across the entire employee journey by covering use cases such as IT On-/Offboarding, Device Security, and IT Asset Management.

Competitive Analysis

To get an initial idea of what HelpDesk’s competition has been doing, the team did a competitive analysis for 4 companies: Lumos, Rippling, JumpCloud, and Electric.ai. Below are some highlights from the 4 companies:

Lumos

Pro - Uses an app layout for the dashboard that brings a familiar interface for the user.
Con - Does not have a feature to send out reminders to clients.
Similar - Can view each user & admin’s requests that are “ready to review”.

Rippling

Pro - Can onboard a new coworker in 90 seconds using employee data.
Con - User is forced into at least a one year contract.
Similar - Can onboard/offboard user in one click.

JumpCloud

Pro - Includes an open directory with protocols including SAML/SCIM, LDAP, and RADIUS.
Con - Dashboard & other webpages do not have a user friendly interface.
Similar - Also features a “one-click” onboard/offboard system.

Electric.ai

Pro - Is an AI based service for IT Devices and Applications.
Con - Can only support specific applications
Similar - Utilizes Slack & Email for support requests and issues.

Personas

To best represent our target demographic for HelpDesk, the team created two personas: one for the administrator and one for the user.

Admin

Sarah works at a healthcare startup as one of the co-founders. Because of the size of the company, she also manages the IT department. From her experience, ITSM platforms are expensive and not user-friendly. That’s why Sarah has two main goals for her company: to be able to easily complete the onboarding & offboarding process, and to review user device / software requests for approval.

User

Lucas is the director of business account managers for a local insurance company. As a tech-savy user, he loves being able to use the latest software & hardware for his job. Because the HR process is slow, he hasn’t been able to access his employee portal within the new system. His immediate goals as a director is to be able to update his job title and to access the new management-related tools.

User Flows

Click on image to enlarge.

After getting a better understanding of HelpDesk’s target audience, the team moved onto designing user flows. On the left is the admin onboarding user flow and below that is the user dashboard user flow.

Admin Goals:

Choose between ordering a new device, ordering from inventory, and bringing your own device.
Selecting relevant software.

End-User Goals:

Selecting apps on the app store.
Deciding on the correct hardware.
Utilizing the HelpDesk if issues arise.

Wireframes

The team created lo-fidelity wireframes for the client. Shown below are the red routes for admin onboarding and the user dashboard.

The goal was to streamline the process of onboarding and reduce the amount of screens for requesting hardware and software.

For the onboarding flow, there are 3 main sections:

Selecting a Device
Choosing your Applications
Viewing the Admin’s Task List

Despite already having the employee information from HR, our team decided to include text boxes for that info just in case there was mix up within departments. In addition to that, it was very important for our client to include an employee bringing their own device & selecting a device from the company.

We made sure to include selecting applications within the onboarding to make it convenient for the user. By being able to select devices & applications, the user is able to save time.

User Dashboard Wireframes

For the user dashboard flow, there are 5 main sections:

Main Dashboard
My Devices
My Applications
Device Store
Help Tickets

We decided to allow the user to click on each of the sections using the sidebar, easily giving them access to each feature. Each section has different interactions (e.g. device store - you can request a new device for your account).

Mid-Fidelity Wireframes

The team went through a lot of iterations before arriving at the final design for the onboarding task. Initially the employer info looked more like a form and the task list was separated into admin/user.

We decided to expand the employee info automatically to keep it visible at all times for the user. In addition, an option for bringing your own device for the user was added to the screens. For the site’s color palette, the team decided to use a blue/gray color pattern so the user feels relaxed when registering for the first time.

The main change for the dashboard page was the compliance icon. Originally, it started looking like a dark teal circle with a percentage sign.

Then we changed it to a 3 percentage circle system for the number of active users, for a color contrast.

Finally, the last iteration was a speedometer-like image showing the number of tasks left to be done. The team decided this was the best looking design out of the three.

On the right, the my devices pages went through some iterative changes.

Originally, the webpage only showed the image of each user’s device. The team added specifications for each device so there would be no ambiguity for the user.

We also decided to add an overview section above the devices, to provide the user more clarity and information.

The white rectangle that’s a part of this section was also adjusted to make it more consistent with the overall design.

Finally, we made some minor changes for the Help Tickets page. The “pending” color switched from yellow to light blue-grey. A “start new request” button was also added for the user’s convenience.

We also removed the quick ticket next to the search bar and added a “start new request” button next to the filter.

From the client’s feedback, it would be easier for the user to request a ticket this way since the button is closer to the “requests” section.

Prototype

After designing the mid-fidelity screens, the entire team worked on completing the high-fidelity prototype.

The first video shows the onboarding process from the admin’s perspective.

The biggest changes that we made to the final design include:

Changing the navigation bar to a horizontal view.
Adding an option to bring your own device under the device section.
Adding a list view option to the application section.
Having a drop down view for the task list section.

The second video shows the dashboard menu from the user’s perspective.

The biggest changes that we made to the final design include:

Changing the task management to a speedometer-like image.
Removing activity on the dashboard.
Replacing tasks with my requests on the dashboard.

Reflections & Future:

This 4-week journey had unique challenges that the team had to overcome. Some of them include:

Working remotely to scheduling client & team meetings across multiple time zones, it made designing as a team difficult at times.
There were previous designs from a prior team that we needed to decide on whether or not to implement.

Despite that, the entire process was rewarding as a Product Designer. One thing that I wish we could have done more user testing / usability testing. Unfortunately the team was limited due to time constraints. In the future, our team should prioritize this so that we can improve on our designs.

Overall, the team did an excellent job. We were able to send high-fidelity screens and a prototype to the development team. Looking back, there were 3 contributing factors for our team’s success.

Good Communication: Deciding early on to use Slack and Google Docs helped us stay on track on what needed to get done every week. Having team members that replied in a timely manner allowed us to move forward quickly with our designs.
Flexibility: Everyone was open to design changes and other team members opinions. It made it easy to make changes when there was a difference in design decisions.
Time Management: Having the team split into two sub-teams helped get both the user and admin screens done in time.

The client is looking to launch their IT SaaS platform soon. I hope to see it live on the web in the near future. Look out for it!