Work Is Round is web app helping HR teams in the European Union become more efficient with business trip documentation
UI / UX Design
As part of Evolution IT
Work is Round
Work is Round is a new European based startup focusing on helping companies deal with the very elaborate European Union posting law.
What is posting?
A "posted worker" is an employee who is sent by his employer to carry out a service in another EU Member State on a temporary basis.
I thought I should clear that up, it was a new term for me. Basically, law for business trips. I don’t know why lawyers like to complicate things. Anyways…
The company reached out to me to help them create the first version of their web app called Work Is Round.
They already had a dev team in place that had a working native prototype. So the functionality and backend logic was already tested and working. Now we have to make it simple and pleasant to use.
1. Simplify the process of preparing business trip documents for EU companies
2. Design an intuitive and slick looking web app that will be easy to sell to prospects
1. Making the new EU posting law accessible and easy to work with.
Help employees and HR stuff filter and read only the part of the law that is relevant to them.
2. Make the messy and time-consuming process of creating posting documents into an easy step-by-step workflow.
Understanding the challenge
We started by defining the target market, main user goals, and the key user flows.
We did an audit of the screens that the dev team had already built. They’ve used basic Bootstrap components just to flesh out what it needs to test the functionality.
Research & Sketching
After determining whether it was working or not it was time to look for potential solutions. I got inspiration from across different industries. It quickly became apparent that the main user flow is a linear process with very few minor deviations. Closely resembling the process of booking an airplane ticket. That was a great discovery since it closely related to what we are trying to solve - business trip docs.
From the hand-drawn sketches, I jumped to the Sketch App and did a very high level - bold lined wireframe prototype of the main user flow. After clearing details with the team of lawyers working on the product we were ready for high-fidelity design and visual identity.
There was already a first version of the logo. But I was given the chance to build upon the initial idea and improve it.
Most of this type of software on the market uses blue and gray colors for there UI. Often components are lumped together without much white space. And that creates an intimidating environment.
I wanted to move away from that and instead use fresh green and a generous amount of white space to create a sense of ease. I wanted to counterbalance the long tedious process of filling posting documents.
Components & Layout
To ensure speedy implementations from the dev team. I based the design of the components and layout on Bootstrap. This way they can easily use it as a base and build on top of it.
There were a couple of custom components that we couldn't escape in order to deliver a great user experience.
Throughout the design process, there was a bit of back and forth between me and the product lead to ensure that I’m designing something that could be implemented with ease from the dev team. In this case, my previous experience with writing front-end code helps a lot because I can anticipate potential problems and address them early in the process.
For the hands-off itself, we used InVision inspect tool. The developers loved it since their previous experience was opening Photoshop and measuring distances, color picking, and so on to make sure they have everything they need. So I created a UI kit with all the main components and all of their states. So they don’t need to stop work in order to wait for a response from me or make design decisions on their own.
Workflow - Step 1
Workflow - Step 2
Workflow - Step 3
Workflow - Step 4
Workflow - Step 5
"Before working together, the project was an idea compatible only with digital mechanisms, not with a human.
Vasil helps us to communicate our vision with consumer, improve workflow and makes idea looks pretty and user-friendly."