UI/UX designer for business software
wir-cover-home.jpg

HR App

Helping HR teams in European Union be more efficient with business trips documentation

 

HR App

Work Is Round is web app helping HR teams in the European Union become more efficient with business trip documentation

 
 

Deliverables
UI / UX Design

Platform
Web

As part of Evolution IT

Client
Work is Round

Timeline
2 Months

wir-cover-website.jpg
 


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. 

 

Goals
 

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

goals.png
 

The Challenge

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.
 

 

The Process

prosses.png
 

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.

wires.png

Wireframing


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.

 

Visual Design
 

Logo design
There was already a first version of the logo. But I was given the chance to build upon the initial idea and improve it.

Color scheme
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.

Design Hand-Off
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.

 
 
 

Designs

POSTINGS

posting list.png
 
 

Workflow - Step 1

s1.png
 
 

Workflow - Step 2

s2.png
 

Workflow - Step 3

s3.png
 
 

Workflow - Step 4

s4.png
 
 

Workflow - Step 5

s5.png
 
 
client.png

"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."

Galin Stanev
Product Manager