Solutions
My lead designer and myself convened to brainstorm and used Invision's Freehand tool to sketch out the first wireframes and flow.
The wizard would automatically display the province(s) pre-selected on the profile page, however, they now had the option to edit/add provinces on the Getting Started page.
We moved the Personalize Handbook page to the start of the process, right after the Getting Started page.
We changed the buttons at the end to "Generate Handbook" as the main CTA and "Looks Good" to close the wizard as the second priority. Users would now be able to access their most recently created handbooks even if they leave the page and come back without having to worry about losing their progress.
We changed the language to something slightly more casual and fun to lighten the experience and make it more positive.
We introduced an "auto save" option so that users can return to their progress.
Should users accidentally exit the wizard or leave the page, they can come back to it and a prompt will appear, asking them whether they would like to continue where they left off or start a new handbook.
1
2
3
4
5
6
Image 2.0 - Collaborating on User Flow/Wireframing
The HR Website
I was hired a few months after the project had kicked off and joined the lead designer on the team. We brainstormed and wireframed together using Invision and/or split tasks and designed specific pages or components separately depending on the scope of each task. Below are a few examples of some of the components/pages I worked on.
Overview
Client: ADP
Timeline: 2019-2020
HR Assist is a Human Resource website offering HR help, information and services to small businesses. ADP sells this product as part of a bundle with other services. The website was initially built by developers with little to no design resources. My lead designer and myself were tasked to redesign the website, with a proper UX foundation and research, as well as refresh the UI as the original one felt "a bit dated".
My Role
• UX/UI designer
The Objectives
The objective was to
• create a better user experience to attract new users and retain current ones
• refresh the UI and make it look more modern
The Challenges
-
There was little to no planning, nor design work, that went into the original website. Over time, several teams dropped content onto the site with no monitoring or updates. One of the challenges was to devise a method to weed out irrelevant or outdated content and re-organize the site structure.
-
The layout was outdated and not mobile friendly
Personas, Interviews and Initial Research
We worked with an existing persona that was provided to us and tracked the existing website to analyse where users were clicking and how much time they were spending on each page. This helped us determine the high priority areas to focus on for the release of phase one.
We considered the pages that were not getting many click throughs or visits and discussed the importance and relevance of such content with various teams and stakeholders. We were successful in removing a significant amount of information that was confirmed to be no longer relevant or necessary.
Now all we had to do was focus on restructuring the remaining content.
A series of phone interviews allowed us to understand users' pain points, what they valued on the site and how they used certain services. For example, one of the projects that was frequently used and required our attention was the document builder:
A step by step guide that allowed users to create company policy handbooks for their
employees or job description forms for hiring processes.
Image 1.0 - Persona
There was no option to save progress, if the user left the page before generating the handbook, their progress was lost.
There was no option to "edit as you go". The option to customize the information in the handbook could only be done in the generated word document.
One user mentioned the final product was "a little too one size fits all" and needed to be a little more than "a glorified google doc".
3
4
5
Part 1: The Document Builder
Highlights from interviews (Employee Handbook)
The interviews were conducted with my lead designer asking questions, allowing me to be a silent observer while I take notes. We had one user try the wizard for the first time to observe his reaction as he navigated through the tasks. Based on five interviews, we gathered data on users' pain points, journeys and what they liked about the process of creating the Employee Handbook.
The main pain points were:
There was no option to select which provinces the handbook would be generated for. The option had to be pre-selected on the user's profile settings page.
During a live walk-through demo, a user clicked "Finished" instead of "Generate" at the end of the process and lost their progress, forcing them to start over.
1
2
Design: Before and After Comparison
Previous version
Image 3.0 - Previous design - Document Builder Landing Page
Image 3.1 - Previous design - Getting Started Page
New Version
Image 4.0 - New design - Document Builder Landing Page
Image 4.1 - New design - Getting Started Page
Final Product Screenshots And Comparison
Image 5.1 - New design - Homepage
Image 5.0 - Previous design - Homepage
Conclusion
This project was unfortunately placed on hold due to COVID 19. It was however a wonderful experience; working with an experienced lead UX/UI designer, HR experts and talented developers, all of whom helped put together this site in an impressively short amount of time.
I walk away with a considerable understanding of team dynamics, and how to mediate discussions to find the best possible solutions with the users at the forefront of my mind. I find that a positive approach to working in teams never fails to resolve conflicts in opinions.
I learned that there may not always be the opportunity to test prototypes or conduct research by the book. However, it all comes down to how we adapt and improvise with the resources presented to us in the smartest and most efficient way possible. I find that this is one of the challenges that makes me passionate and excited about my field of work.
Part 1: The Document Builder
Highlights from interviews (Employee Handbook)
The interviews were conducted with my lead designer asking questions, allowing me to be a silent observer while I take notes. We had one user try the wizard for the first time to observe his reaction as he navigated through the tasks. Based on five interviews, we gathered data on users' pain points, journeys and what they liked about the process of creating the Employee Handbook.
The main pain points were:
There was no option to select which provinces the handbook would be generated for. The option had to be pre-selected on the user's profile settings page.
During a live walk-through demo, a user clicked "Finished" instead of "Generate" at the end of the process and lost their progress, forcing them to start over.
There was no option to save progress, if the user left the page before generating the handbook, their progress was lost.
There was no option to "edit as you go". The option to customize the information in the handbook could only be done in the generated word document.
One person mentioned the final product was "a little too one size fits all" and needed a little more than "a glorified google doc".
1
2
3
4
5
Part 1: The Document Builder
Highlights from interviews (Employee Handbook)
The interviews were conducted with my lead designer asking questions, allowing me to be a silent observer while I take notes. We had one user try the wizard for the first time to observe his reaction as he navigated through the tasks. Based on five interviews, we gathered data on users' pain points, journeys and what they liked about the process of creating the Employee Handbook.
The main pain points were:
There was no option to select which provinces the handbook would be generated for. The option had to be pre-selected on the user's profile settings page.
During a live walk-through demo, a user clicked "Finished" instead of "Generate" at the end of the process and lost their progress, forcing them to start over.
There was no option to save progress, if the user left the page before generating the handbook, their progress was lost.
There was no option to "edit as you go". The option to customize the information in the handbook could only be done in the generated word document.
One person mentioned the final product was "a little too one size fits all" and needed a little more than "a glorified google doc".
1
2
3
4
5
Solutions
My lead designer and myself convened to brainstorm and used Invision's Freehand tool to sketch out the first wireframes and flow.
The wizard would automatically display the province(s) pre-selected on the profile page, however, they now had the option to edit/add provinces on the Getting Started page.
We moved the Personalize Handbook page to the start of the process, right after the Getting Started page.
We changed the buttons at the end to "Generate Handbook" as the main CTA and "Looks Good" to close the wizard as the second priority. Users would now be able to access their most recently created handbooks even if they leave the page and come back without having to worry about losing their progress.
1
2
3
We changed the language to something slightly more casual and fun to lighten the experience and make it more positive.
We introduced an "auto save" option so that users can return to their progress.
Should users accidentally exit the wizard or leave the page, they can come back to it and a prompt will appear, asking them whether they would like to continue where they left off or start a new handbook.
4
5
6
Image 2.0 - Collaborating on User Flow/Wireframing