Logistics web application
I worked as UX Designer at Logistics Company for 2+ years. I designed TMS system.  When I left the company, I decided to rework 1 user scenario to make it more user friendly and modern. And also to test my skills of UX and UI designer.
1
From years of experience in IT field I knew that deep understanding of industry field, business processes and user needs is critical for successful software application. During my work at Logistics Company I learned as much as possible about Logistics field and business processes on which it relies. This knowledge was a base for web application design. Functional requirements were generalized.

First of all I made mock-ups in Balsamiq. I made 4 iteration of design. Some iterations required big rework, other less. With each iteration I solve next problem in UI or UX.
You can open any image and check quality of design, every element carefully positioned and aligned. Pixel perfect!
2
After that I translated all screens into Axure RP. I made few experimental fields: Notifications and combined field text area and label.

You can open any image and check quality of design, every element carefully positioned and aligned. Pixel perfect!
3
Notifications block consists from 2 state buttons (ON/OFF), search field with progressive logic and block of badges with close button. User can switch on/off which notification he wants to receive. User types in search field, select from available options and add selected option as a badge.
4
When user clicks in text area block, placeholder text disappears and user can type in it his note. Font color of typed text will be the same as placeholder text.
5
Of course to make application wire-frames it’s only first step. Main task is to make prototype interactive and responsive. Unfortunately to make both interactive and responsive prototypes simultaneously is very difficult. In Axure every interaction or responsive break point adds one level of complexity. At one moment I faced with situation where I fix some interaction and break view of some responsive break point. So I decided to separate interactive and responsive prototypes.

I add ONLY important micro-interactions to each page to show general experience of application. I didn't add complex functionality, like date pickers, progressive search, filtering, etc. But all fields and elements are active; you can type in text field, select a check-box, open drop-down list, and switch tab buttons.

Fully functional Interactive prototype you can find by this link
Login: user@acme.com Password: P@ssw0rd

Below I put showcase of micro-interactions for each page.
6
Save Quotes micro-interactions. Yes performance is a bit slow, but this is what generates Axure.
7
Add Item micro-interactions and functionality.
8
Pickup City or ZIP micro-interactions.
9
Select Carrier micro-interactions.
10
Create Order micro-interactions.
11
I made 2 breakpoints less then 1199 px and less then 991 px. So we have 3 intervals: more then 1199 px, 1199 - 991 px and less then 991 px. First interval for Desktop, 2-nd for Laptop and 3-rd for Tablet. I didn't make separate break point for Mobile, because Mobile version of this application should have completely different requirements.
12
Fully functional Responsive prototype you can find by this link

For tablet version I made completely custom controls.
You can also click on "Menu" and "JS". Have fun!
Please appreciate if you liked it!
Logistics web application
249
1,156
1
Published:

Logistics web application

Web application
249
1,156
1
Published:

Tools

Creative Fields