Logistic app header

Upgrading user experience on a logistic mobile app​

-80%

Design time for white-label products

Up

Better positioning of the brand

-40%

Users’ time on task

Project

The product is part of a logistic management web platform that allow users to track their actives, fleets and employees using GPS/GPRS technology. This product includes around of 54 different modules and features, also hundreds of active devices reporting data all the time. Before the project, it was a hybrid app launched in 2005 to provide users real time data from their mobile phones and facilitate the fleet manager’s decision-making.

When changing is a necessity

We tried to resolve the user experience struggles within the app, such as usability issues, visual and brand inconsistencies in the user interface, and some weaknesses in the actions that users needed to do. At the same time, we thought of other tech alternatives to develop the app because maintenance of the hybrid version was becoming untenable. We knew users were resistant to change, but at the same time the product needed to highlight their benefits, to show it’s a vanguard technological product and to be outstanding in the market

Project framework

Project structure, empathize, define, ideate, prototype and test
Project framework
Process: Empathize

User research

After we got the bit picture with stakeholders and some of desktop research analyzing competitors, we were ready to deepen in users world through observation, interviews and surveys, because we wanted to determine how our users manage their operation. Some pain points are listed below.

Look and feel

  • “I don’t feel identified with the user interface, I feel it old”
  • “Other apps look better”

Features

  • “I can’t to turn on or turn off any vehicle remotely”
  • “I would like to see all the information about my vehicles, their patterns”

Usability

  • “The Web platform gives me a bunch of details from my operation when I’m at the office, but I also need to be up-to-date on the way”
  • “At the beginning, it’s hard to learn to use all the features”

Reliability

  • “Sometimes, the data showed in the app is different to the web platform data”
  • “It’s hard to get the real location of my vehicles”
Process: Define

Defining the problem

It’s time to collate data from the previous stage to define the design problems and challenges. Our problem statement:

Juan is a busy fleet manager who needs a faster, more reliable and usable tool to view and manage their fleet events, because he needs to stay on top about those and able to make informed decisions on the go.

Persona Juan a fleet manager
Our persona Juan helps us to keep in mind who we are designing for.
Task flow example, see vehicle journey
Task flow. A way to map our user's main tasks.
Process: Ideate

The fun part

At this moment, I need to make the process organized to translate ideas in better form. The visuals & features of ideation tools bring clarity to the bumbled-up ideas.

Prioritize

We needed to prioritize, and we used the Moscow method,  a prioritization technique used to reach a common understanding with stakeholders on the importance they place on the delivery of each requirement.

Moscow analysis
Moscow prioritization technique for this project
Mind mapping

After data analysis, it is helpful to put the ideas on paper to make connections in a visual form and notice new things that I didn’t see before.

Mind mapping
Branding

Also, I learned about the brand, origin, meaning, spirit and values to help to build a consistent product across the mediums. As a result, it was necessary to suggest some changes to help the brand communicate better and adapt it better to the different mediums.

Mapping current brand and main issues

I didn’t want to change the logo, only adjust it to the current needs. Basically, I changed the color palette a little to make it more brilliant, I rearranged symbol’s elements to improve readability in small formats, I polished the endings and symmetry and kept the typography.

Moodboard for visual design
New brand’s moodboard
Construction of the new brand Space
Sketching

For the home screen, we thought about immediacy and different ways to show relevant data to know what’s going on. Clear buttons to go to details about vehicles.

Another critical part in the operation is the visualization of the status and location of the vehicles in real time, this can be as complex as needed and that is why the use of symbols and expandable menus is suggested to see the details.

Also, we considered main indicators about the operation to put them in the home screen. We proposed three tabs with summary information.

 

App sketching
Process: Prototype

The new app

I created wireframes, a simple and clear representation of the product that help users to have an idea about the final product, sections, buttons, main features, so in this way we can test the product before invest more time on it.

Homescreen wireframes
Wireframes vehicles and map view
Process: Test

The moment of truth

Usability study summary and findings, early test.

Study type: unmoderated
Location: Colombia, remote
Participants: 10
Length: 20-30 min.

Some findings

Tabs are not clear enough. 7 of 10 users couldn’t understand the tab’s navigation bar.

Findings tabs werent clear enough

Maps options are hidden. Most of the users couldn’t find options like ‘send command’ because they weren’t obvious.

Map's options are hidden

Vehicle detail is confusing. “Fleet and vehicle look similar, I couldn’t see the difference”.

Vehicle view is confusing
Process: Prototype

Refining the design

It’s time to refine the design, adding more details to getting closer to the real product, besides, I added interaction to test with users again.

This is the core product of the company, was established a system of transversal design to the devices to be able to visually and functionally guide the other products and no longer look disconnected from each other.

logistic app design system
Cross platform design system documentation
logistic app UI kit
App stickersheet as a part of full design system

Finally, it’s time to refine the design, I added details, and apply the defined design system to build a more real version of the final product.

logistic app screens
Logistic app mockups

Time to innovate, thanks to the insights of the research, we included sections of interest, such as the top 5, filters and we were able to improve the way to represent and find others like speed markers and paths.

Mockup homescreen
Mockup speed dashboard
Mockup map view
Mockup vehicles view

Impact

  • The product team uses 80% less time in white-label app design and 40% less in development.
  • We improve the brand position regarding competitors. Our renewed look and feel allowed us to be better positioned.
  • The complexity of the information was reduced, thanks to the new presentation organized with symbols

 

Here is a quote from one of the Company’s consultants:

“I’m sure that this new app will put us a step ahead of the competition, because it is simple, beautiful and cover all the user needs”

Challenges

Uno de los retos de este proyecto fue el tratar de equilibrar los cambios, ya que mientras unos usuarios requerían mejoras en los flujos de tareas otros estaban muy acostumbrados al modo de funcionar de esta app con más de 10 años en sus dispositivos prácticamente sin cambios. 

Algunos de los cambios fueron iconografía, estableciendo un sistema de colores con una paleta más luminosa pero conservando algunas de las significancias de los anteriores, renovando el estilo de la marca y la respectiva documentación para su uso y divulgación. 

Otro reto importante es la posibilidad de utilizar esta misma app base para los aliados de la marca, que son otras marcas, y exigen la personalización de la app, por lo que en el sistema de diseño se definen también las pautas para el diseño de las apps hijas. 

Ya a nivel técnico se recomienda el desarrollo de apps nativas para mejorar el rendimiento y permitir  la escalabilidad.

What I learned

It was great to consider not only the user’s opinion but to take into account the business perspective and the traditional customer care, to innovate while taking it into account. 

Managing all the actors in the company, it was enriching to have so many people interested in building such an important product for the company, its different requirements, expectations, and points of view.

I had the opportunity to collaborate with all the Business Technology team, leaders, developers, consultants and as this project is the star-product of the company, I had to be open to listen and manage expectations, frustrations and likes from users, colleagues and interested people in general.

Next steps

Continue with the learning process, analyzing the users’ behavior within the app.

Meetings with the app team, to analyze the next priorities to include in the app.

There is something that I would like to explore, people don’t asked me for a reports’ builder module, but I could see them downloading an Excel document and then editing the columns to eliminate irrelevant data for their operation, and building totally new reports to be their job done.