EasyWorkforce
|
|
Role
Lead Product Designer | UX/UI
Lead Product Designer | UX/UI
Tools
|
EasyWorkforce Software is a cloud-based SAAS company offering time and attendance as well as workforce management solutions across multiple devices to create happy workplaces.
|
Overview
THE GOAL |
Be a 1-Stop-Shop Workforce Management Platform
Formerly known as EasyClocking, the company is rebranding and expanding its scope from solely time and attendance to a workforce management platform of independent products. The goal is to be the overall one-stop-shop in facilitating payroll, helping businesses communicate with their people, and enabling more efficient workplaces. |
THE CHALLENGE |
Build a 2.0 Platform scalable across multiple devices and facilitate user on-boarding
Work across teams to provide the best user experience and intuitive UI for the new 2.0 platform enabling scalable usage across web, mobile, tablet and time clocks. Improve the work that was already developed by engineers and also create new features, prioritizing time and effort. Provide a smooth transition for the current 10,000+ global clients from the existing 1.0 time and attendance product to the new platform. |
TEAM & ROLE |
Led all design efforts from UX Strategy to UI Prototypes, enabling a more structured process and efficient results.
Having had previous experience in structured environments and working collaboratively across-teams, I helped the company implement UX processes and influence a major company shift from engineering focused to product led and user-centered. I came in to a small product team of 4 where I was the sole UX/UI Designer. As a result, I wore multiple hats and embraced leadership. Working closely with the Senior Product Manager and the rest of my team, I coordinated and led all design efforts including: information architecture, user task flows, interactions, consistent UIs, implementation of a new style guide/design system, prototyping, and testing. |
The Process
|
Learning and adapting through a non-linear process
|
|
Coming into a company with a legacy product and the new underway, I adapted my user-centered design process to be more flexible around the company’s needs. Having a fresh pair of eyes, I started by understanding the users. I studied current customers and their user journeys to uncover their relationship with the company and their experiences using the 1.0 product.
I met with every department involved in the customer’s journey and documented the user flow during order processing, on-boarding, account management and technical support. |
|
|
The results were long journeys with multiple routes and easy for the customer to get lost, confused or re-routed.
From these user flows, to sitting on on-boarding phone sessions, and reading customer feedbacks, I gathered data and created an affinity diagram focused on pain points. |
|
These were the main take aways from the current 1.0 customers.
|
USERS & AUDIENCE |
For the General Availability (GA) release of the new 2.0 platform, the focus was small to medium sized businesses ranging from diverse industries: public sectors to construction, health, food, and retail among others.
CHALLENGE: Making up the majority of the company’s current customers, these target users were already accustomed to the features available in the 1.0 product, so any new experiences needed to ultimately enhance what felt familiar. These are users looking to continue with simple, cost-efficient solutions that save them both time and money in organizing their company, managing their employees, and easing payroll.
For some industries such as construction, where users may be on the go, a strong emphasis in mobile-first was considered. |
MOSCOW PRIORITIZATIONBearing in mind the previous discoveries, I then worked with my team to make a list of the current features that had already been developed and those still pending. We started putting together a MOSCOW (Must Have, Should Have, Could Have, Won’t Have) to prioritize some of the features to be worked on (there were many!).
|
|
|
My team had never actually done this type of documentation before, so putting it all on paper helped everyone visualize better the workload: what had been done and what was still pending. They were astonished to see how complex the platform was becoming.
|
|
Getting Real with some Visuals
|
|
REVIEW & TESTING
We then reviewed and tested internally some of the features already developed by engineering and discussed improvements to both the user experience and the UI.
We analyzed the number of clicks while navigating features, looked for intuitive user flows, clear content instructions, ease when interacting with functions / features and more. |
|
|
We gathered at least 5 internal testers and had a pretty unanimous response:
100% of them asked for simplified user flows with less clicks and an interface that is easier to navigate. Too much flexibility and customization features were making the platform extremely complex and difficult for users to understand. So we took the "Less is More" approach, cutting back on excessive and unnecessary features, cleaning up any UI noise, and providing more objective actions for the user. |
|
Working closely with the senior product manager as well as engineering, we determined what essentially could be changed and to what extent. The platform already had a robust structure developed in C#, Java, and was using React on the front-end to span across devices.
Due to the complexity of the platform and to maximize speed, we adapted designs to the overall layout engineering had coded. There were already a lot of elements and components trickling down the whole platform that would require tremendous time and effort from engineering to change. Despite that, there were numerous areas of improvement within the platform, including:
This case study provides a glimpse into some of these items. |
|
DEFINING COLOR
In studying some of our competitors, it was decided together with the stakeholders, that the software needed fresh new colors and fonts to boost its look and be more competitive.
The original platform colors were very corporate and didn't quite stand out from the crowd. They also didn't work very well with the revamped product colors. |
New Product Colors - Lightest Shades
|
Original
|
New
|
|
This pushed the need for a solid Design Language and influenced the beginnings of a Design System being implemented and communicated properly across the company.
|
MOOD BOARD |
Shortly after honing in on the product colors, I developed a Mood Board and inspired my team to collaboratively create a Mind Map so we could define what the company represents and how we view it internally.
|
|
|
|
In this Mood Board, I highlighted the meaning behind workforce management and how the software is meant to ease the collection of employee data in preparation for payroll. We want to delight users with a product that helps everyone be more accountable and self-sufficient in the workplace. The key words we focused on here were: simplified, reliable, and time-saver, some concepts taken from the Mind Map itself.
Visuals and exercises like these were great to stimulate collaboration among my team and help motivate the company towards a more creative process. |
IDEATION & WIREFRAMING |
As a result of this creative push, I became effective in encouraging the use of tools for realtime collaboration, such as Miro, for digital whiteboarding.
We also freehanded wireframes daily using Invision Freehand to brainstorm a lot of concept sketches and ideate across teams. Here’s one of many user flows I wireframed for the new employee profile wizard: |
|
|
We then presented our progress to stakeholders on team meetings before editing and developing hi-fi’s. Because the platform is incredibly robust with multiple products, multiple features, we tackled each project and feature step-by-step following a gaant chart for deliveries and making sure we were on track.
I had daily communications among my team and weekly with cross-teams to check on to do’s and make sure we were prioritizing based on what was needed next. We treated each set of features as independent user flows and often drew out the more complex ones such as the above, the initial set up wizard, and timesheets approval on mobile. |
CUE IN DESIGN SYSTEMS |
When it comes to styling, I led my product team and worked heavily with the front-end engineers to get a proper design system into place.
We consulted with Marketing and not only got stakeholders onboard of embracing a new color palette for the product, but also helped push engineering to start working on a new framework to improve maintainability and better align with the proposed designs. This was a big win in easing UI efforts down the road and in keeping the design unified and consistent. |
|
I created a Design Language and shared all major elements, components, as well as color palette and fonts that would be spread throughout the platform on a clearly communicated style guide which engineering used as guidelines for their front-end developments.
I used my own style guide as reference throughout my designs, making my work easier and more efficient as I could quickly use and re-use elements from my library. |
Design Samples
NEW COLORS AND CLEANER UI Some of the biggest improvements my team and I achieved with engineering was the complete color change across the entire platform and implementing cleaner, simplified UIs. From researching competitors and other types of management platforms, I noticed not only the UI trend of the vertical nav bar, but also a lot of the same use of colors. It was no different in our case, and so after experimenting with a few different color combinations, it was decided in conjunction with Marketing to try a lighter look with minimal, more muted platform colors that matched each product color and communicate fresh, clean and modern.
The idea is that the platform colors would be the same throughout and only exhibit few product accent colors such as with the nav bar selector, the menu options circle at the bottom of the page, the line across the top nav bar and a few extra details. |
|
|
FROM SCATTERED TO UNIFIED PLATFORM SETTINGSA major UX challenge for the platform at the beginning was that the product and platform settings were dispersed in different places throughout the software. Some settings were on the nav bar, others inside different pages and if you wanted to see the settings per product you would have to navigate into each one and see them individually -- all a bit of a hassle.
We were then able to simplify the experience by organizing all settings into one feature page for easy access and where the user could also see those for each product altogether. Minimizing clicks and simplifying user flows was the name of the game here. |
|
|
Here's a quick demo of how the unified settings experience works on the actual beta product:
REVAMPED "SERVER PAGES"Having a new color palette for the whole platform, meant we also needed to revamp the platform login as well as other server pages such as:
The idea was to follow a consistent design, making sure all the pieces shared the same look and feel while adding to the brand personality. I carefully used illustrations on certain pages to add some whimsy and fun, especially on the support impersonation pages which are seen by our internal teams. |
NEW FEATURES THAT EASE UX: INITIAL SET UP WIZARDI spent a good amount of time discussing with the Senior Product Manager, the rest of product as well as engineering what would be the best user flow for new customers installing and using our platform for the very first time.
We brainstormed and whiteboarded the process collectively and I stressed the importance of a thorough initial set up wizard to ensure a better and delightful experience, avoiding frustrations and confusion. |
|
|
Our Freehands always got a bit crazy and long as can be seen here for the Initial Set Up Wizard flow. We ideated several different processes and discussed the feature functionality over several meetings. This was such a crucial feature for our product as this would be the first experience the user has interacting with the platform and the opportunity to set it up for their company use, so a clear and intuitive experience was our top priority, even if it took a bit more time finessing.
|
|
A bit closer look at the first steps of these wireframes…
|
|
CHALLENGE: Given the complexity of the platform, it was a great challenge for me and the rest of the team to simplify this wizard experience and get the necessary done in the least amount of steps. It required quite a bit of back and forth with engineering to arrive at a common ground that clarified the requirements to be produced on the back-end. As a result, the wizard was composed of 5 sections divided into sub-steps:
|
Some of the screens for the Initial Setup Wizard
|
|