View mockups
Visier Workforce Planning (WFP) is a web application developed by Visier Inc. to help human resources experts see the past and current state of their company’s workforce, as well as forecast and plan how it might look in the future.
I worked on the application as a User Interface Designer, where I was tasked with designing the workflows, interfaces, and visual designs for new features, redesigning existing features, creating interactive prototypes, as well as helping with HTML and CSS development.
One of my main tasks was creating detailed workflow and interface specifications, in order to effectively communicate designs to stakeholders and developers.
For example, when I first started at Visier the application did not scale that well - the grid cells would become small and unreadable at lower screen resolutions. I created a specification to describe how to improve the app so it could scale to better support small screen sizes like projectors and laptops.
Another task I worked on was designing how Workforce Planning could support multiple currencies. After meetings with customers, the team and I discovered that they needed to be able to plan their workforce while taking into account costs in multiple currencies, since many of them are global organizations.
I was tasked with designing how we would integrate this feature into the app. I first mapped out and sketched out UI changes that would be needed for this feature.
With validation from customers and the team, I proceeded to created specifications and mockups to communicate these specific changes in more detail to the development team.
Our customers also wanted to be able to track their progress against fiscal year end goals for headcount and financials. As HR managers, they also wanted to be able to set limits and goals for other employees beneath them, and see how their teams' sub-plans would affect their overall plan before consolidating them all together.
I worked on a feature built to support this high-level goal-setting, along with improved collaboration workflows. There were a lot of complex details to work out, like how we could help the main planner set goals for their collaborators' plans, display a collaborator's plan at the same time as the main planner's, and finally, help the user quickly consolidate all the collaborators' plans.
This feature was much more complicated, since it introduced a ton of new states to the planning grid. I sketched out and created all the examples of how it should work, so that the whole team would be on the same page.
In addition to designing interfaces, I also created interactive UI prototypes to share and test within the company. Here's an example of a timeline selector prototype I coded:
See the Pen Range selector with drag select using x position by Visier UX Team (@visierux) on CodePen.
I also helped improve the front-end aesthetics of the application by implementing an improved visual design using HTML and CSS. I was tasked with implementing front-end polish for a demo at HR Tech Conference. The app was then demoed live in front of around 3000 people.
When I had time, I helped explore future features and improvements for Visier’s applications, but unfortunately, much of that work cannot be displayed here, as it is protected by NDA.
I returned to Visier in 2016 as a front-end developer to improve my programming skills, and continue to help develop new projects for Visier.
UX, UI, visual design, wireframing, prototyping, web development