Visline -
team communication
application

Visiline - team communication app
Designing web and mobile applications for a TSL company to facilitate communication between different departments, automate reporting to the customer, reduce the number of missed orders, and create a common database for orders.

Tools:

  • Pen & Paper
  • Sketch
  • InVision
  • Zeplin

Team:

  • 2x developer
  • 1x project manager

Year

  • 2020
Screen

Client

Visline is a TSL company, delivering goods troughout Europe

150


employees

120


fleet cars

10


years on the market

25 mln


euro turnover in 2018
Screen

Challenge

Create a collaboration tool to work together with four different roles inside of the company. Currently, communication and managing orders were based on multiple channels, which led to miscommunication issues, delays, and a not effective chain of information.
Process

Project timeline - 8 weeks

Step 1

Discovery:

Interviews (1 day)
Competetive research

Step 2

Research:

UX Workshop (2 days)
User Personas
User Flow
User Story Mapping

Step 3

Wireframes:

Defining MVP
Information Architecture
Paper Prototype
User Testing

Step 4

Design:

User Interface
Style Guide

Stage 1

Discovery

Based on the interviews and notes from the client, we tried to understand the exciting workflow in the client’s company.

Visline - team communication app

3 Interviews

We have interviewed three employees at Visline: forwarding agent, dispatcher, and truck driver. It helped us to grab a sense of their daily activities and struggles. We understood the importance of communication within the company and that there are many communication problems between departments. It caused high stress and the quality of services.

Responsibilities

Forwarding Agent

  • Lunching transport order
  • Communication with a client
  • Assigning a driver to the order
  • Passing the order to the dispatcher

Dispatcher

  • Updating the status of each order twice a day
  • Managing the order
  • Communication with the truck driver
  • Solving upcoming issues
  • Informing the client about the progress

Truck Driver

  • Transporting items from A to B
  • Collecting documents and sending them to the dispatcher


Frustrations

Forwarding Agent

  • Lack of quick access to information about status order

Dispatcher

  • Unorganized communication with many truck drivers simultaneously

Truck Driver

  • Communication issues
  • No signal on the road
  • Unexpected delays

Agile sprints and why to work closely with developers?

The entire process was conducted hand-by-hand with the developers in an Agile approach. The client has been receiving a progress review every week. Close cooperation helped reducing project time as we could set up our ideas with the budget and time limits.

We understand the difficulties of software engineering. Any changes in the design phase are less time-consuming in contrast to the development phase, so we save time and money.

Visline - team communication app
Stage 2

Research

2


days

11


employees

3


designers

3


developers

UX Workshop

We spent two full days with the client with 11 employees, team of developers, examining the frustrations and needs related to their work. We’ve created four user personas, explored current work-flow and issues related, and how we can automate it using the software.

We spent the second day working on possible solutions, drawing low-fidelity wireframes all together, and created a user story map to determine the scope of MVP.

The most significant result was from the beginning, we have been working towards a mutual vision of the project and creating a 100% effective transportation management tool.

1. Project goal

Establish common vision and set up measurable goals of success

We started with setting a mutual, realistic goal for this project. The main goal was building a communication bridge between individual departments by automating the exchange of information in the company and clients in order to achieve competitive advantage.

2. Experts talks

Based on discussions within the company and experts talks, we have created together four user personas, collecting their problems, frustrations and needs.

Together we voted on points, which problems need to be solved the most and MVP should focus on.

Visline - team communication app

3. Exploring current work-flow

To have a clear picture of the relationships between the different roles inside of the company and to understand the transport process, we recreated the existing working flow.

"We draw together with participants how each persona participate in the process"

Visline - team communication app

4. Brainstorming

We had made 3 brianstorm rounds with “How might we” questions based on the main problems which came up in the “Ekspert Talks”. We gave participants time to speak loud their ideas.

How might we improve the dispatcher and forwarder?
How might we accelerate/improve communication between the driver and dispatcher?
How might we provide the customer with continuous access to the status of the order?
Visline - team communication app

5. Sketching

Afterwards, we moved to splitting the group into balanced teams with a developer and a designer in each one. A sketching stage began

Visline - team communication app

6. User story Mapping

We used a story mapping approach to establish what features and components are needed to provide solutions to the listed problems. There we also put the line what MVP wil cover and what will be implemented in the future.

Visline - team communication app

Physical version of the User Story Map we did with participants. We listed main features in each step of the new process.

Visline - team communication app
After the workshop we prepared a digital version of the User Story Map which was a base to create a backlog for a development team.

7. Defining MVP

Together with a product owner and the developers, we set the scope for the first version of the product.

At this point, we had a great relationships with the client, product owner, and development team. What is also essential, we were entirely ready to jump into the next phase

Stage 3

Wireframing

Information Architecture

Before we have started sketching, we were collecting detailed information about screens we were planning to create, including input forms, columns of a list of orders. The whole team from the client’s side was involved in that process. The menu has been designed at this phase based on the User Story Map.

Low & mid-fidelity prototype

Before jumping into user interface design, we have focused on building the app screen by screen. Getting feedback from the clients after each sprint helped us to spend time wisely.

Challenges

Home screen - deciding on the way of showing the orders. The list of essential information in each order was growing and growing. The decision was to build it as a dynamic table. Knowing that the list will have a 3-digits number of rows only assured us to take this approach.

Visline - team communication app

1. sorting tool in each column because employees have a different style of work

2. a communication tool, a separate channel for each order; notification about a message - in this case the order move on top

3. double pagination, the list of orders can reach hundreds of records

4. drivers inform about their availability by a tool to make a communication easier

5. design the system for prioritising the order status

Visline - team communication app

6. each user can change the order status to keep the orders organised by phase

7. stepper evolved during the process as one order can have multiple loadings/unloadings

8. order updates which are also going to the client

9. seperate chat for each order to keep organised communication

Stage 4

User Interface Design

Mood board

We have sent three mood board to understand what the client’s like and dislike in terms of design. It allows us to work in the right direction from the beginning and saves time on multiple iterations.

Visline - team communication app

Style direction

Together with the client, we confirmed that the app would have a rough, simple, low-variety o color design with the domination of red, which is Visiline’s primary brand color.

Visline - team communication app

Evolution

The higher fidelity of the prototype, the more time consuming changes are. We respect our client’s time and we before we start the visual design phase, we want to get acceptance on mid-fidelity level for UX part (navigation, structure etc.)

Visline - team communication app
Visline - team communication app

Get a free estimation

Need a successful project?