Modelling a solution within the galaxy's monitoring and surveillance fleets

logistic app thumbnail

Space is a private-use app for assets’ logistic control through GPS and GPRS location technologies. This project starts from the need to improve the interface’s aesthetic, using available current app resources (logical functions, code, services, task flows), but it didn’t take us long to show that it is necessary to propose a better experience for this app’s user, which facilitates monitoring tasks and keeps the user informed of important events related to their fleet of vehicles. The result was a native, modern and dynamic app, easy to use, with useful on-hand information to make decisions.

Location: Colombia.
Time: 6 months, 2020-2021.
Project: Mobile app redesign.
Role: Researcher, UX/UI designer.

Houston: We have a problem!

When users ask for avant-garde experience, and we need that our app be up to relevant apps in the market (Whatsapp, Rappi or any other that facilitates their lives), redesign the user interface it seems like the best solution, but we could realized the true problem, we began to see a speck in space, but as we got closer it looked more and more like a black hole.

As we got closer it looked more and more like a black hole...

The actual problem

Space app was born in 2012, a hybrid web app as a complement for desktop app in logistic operation tracking from a mobile phone, as time went by, user expectations rose and they felt frustrated because they couldn’t take some actions on their vehicles fleet from mobile phone.

In 2020, the market and users demand new functionalities, modern style and better mobile experience, because of that we made user research, stakeholders meetings to learn how to drive this new stage for Space app.

Concretely,

  • app’s low response time,
  • outdated visual interface,
  • non-aesthetic visual interface,
  • push notifications needed,
  • inconsistent data between app and web applications, 
  • and the need to perform some actions on the operation in real time,

were the reasons for frustrated users, but our team also was looking for design and code scalability, to improve response times and include new functionalities.

Through this understanding and learning process, we observed and talked with users and stakeholders, we made some surveys, competitor’s analysis, and we also mapped users’ main tasks, to had a clear landscape about the environment.

Competitor’s analysis opportunities

– Fleet management for individuals.

– Mobile reports

– Notifications management

– Camera records in mobile devices

– Share position

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.

Space brand parallel universes

It was interesting to watch the brand user’s perception when we were in the research process. The brand was perceived as a little weak and distant, so it was necessary to rediscover its origin and document it. Also, we identified some responsiveness problems, legibility and brand remembrance.

Space brand mapping
Mapping current Space brand to have a landscape’s full view.

It was necessary to make some little changes on the color palette, making it more brilliant, rearrange the logo elements to make it adaptable to all devices, polish some lines, endings and symbol’s symmetry, but we kept the same brand’s typography.

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

Taking off to the mobile universe

With collected data on the board, we started to ideate solutions. 

Thinking about the home screen, comes to mind the word immediacy, I proposed different ways to present relevant data about the operation. Clearly differentiated buttons for indicators.

We also considered some useful indicators like speeding to keep in control about the fleet. To navigate through indicators sections we proposed to use tabs.

For the vehicles view we try some ideas after observing users interacting with the current app, they felt comfortable with components like accordions to navigate through fleets and their vehicles, but I tried to make visual differences between interactive and informative elements.   

All these ideas must be tested and approved by users and stakeholders, so keeping in mind users’ needs we made decisions and filtering ideas to create wireframes, a basic interface view to help us to prioritize contents and organize elements in the screen.

Moscow analysis
Moscow prioritization technique for this project
App sketching

Time to land

Now, it’s time to validate ideas, I made a low fidelity prototype, so users could interact with it to testing the product’s main functions. 

I asked users to do some specific tasks, so I could observe their performance.

Some findings:

  1. Tabs are not clear enough. 7 of 10 users couldn’t understand the tab’s navigation bar.
  2. Maps options are hidden. Most of the users couldn’t find options like ‘send command’ because they weren’t obvious.
  3. Vehicle detail is confusing.

“Fleet and vehicle look similar, I couldn’t see the difference”

Findings tabs werent clear enough
Tabs are not clear enough
Map's options are hidden
Hidden option
Vehicle view is confusing
Vehicle detail is confusing

About this usability test: 

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

Planets convergence

Finally, I made necessary adjustments to refine the design. I added a few details and implemented the new design system, creating a version closest to the final product.

The designs are also tested for usability and user experience.

Space design system

Here we can access to the design system’s definition.

logistic app screens
Logistic app mockups
logistic app UI kit
App stickersheet as a part of full design system
Other screen size view, some adjusts for dark mode and white label product

Space journey log

Challenges

A challenge for this project was to try to balance changes, while some users need improvements in workflow, others were very familiar with how this app works with almost 10 years on their devices.

Another challenge was to think about Space as the parent app for white-labels, since they require brand customization for their apps, so in the design system I set guidelines for that.  

Furthermore, it was challenging to work in a only one person UX team, so I tried to involve everyone on the project. People from QA, Sales, Project, Software Development and Consulting Services were there, it was really fun and enriching.

Impact

With the implementation of the new design system, the design time for white-label apps has been cut by 80%, while the development time has been cut by 40%.

Furthermore, both new and old users achieved better performance in usability testing. 

Additionally, we could see the new app and brand in a better place as far as competitors are concerned. in words of an user

“the new brand is fresh, modern and the app looks aesthetic”

Learning

For this project, it was necessary to engage a bit more in the commercial perspective, there were so many elements to consider before implementing changes.

It was rewarding to me to collaborate with all the company’s people, they were so interested in the final product but also in contributing during the process, always ready to give but to learn too.