Book & Pay

Adaptating a desktop-based design to a mobile design with UX advisory and user's inputs and insights.

Overview

KLog, seeking to digitalize their business, requested the adaptation of the current Cargo Book & Pay, designed for a desktop device, to its mobile version, thinking of an agile digital Book&Pay solution, due to the increasing demand of their customers to have a mobile solution to this operation.

My role

UX Designer defining the Strategy & Executing User Research, Interaction, Prototyping, Testing & Reporting.

February 2022.

Background

KLog.co is the main company in Latin America to democratize international freight transport. Through its intuitive digital platform, users looking to import or export merchandise have full control of their cargo movement, being able to book and manage their shipments in the same place.

In their search for improving their services by delivering top-market solutions in a region where the Logistic Industry has yet too much space to grow in digital terms, KLog is putting their efforts towards digital tooling and a world-class SaaS platform for engaging and expanding across Latin and North America.

I was the sole Experience designer of the project with complete freedom to define and propose the strategy and process to get it done.

I was contacted by KLog as an external UX Consultant for this particular project, but due the results and my mehodology, I've been keepingcontact with them as a consultant for a series of projects until this day, and also I've been helping them to build their UX team as an external Lead and mentor.

Understanding the context

Problem and business needs were clear, but it was my first time working with this Industry of Logistics so I needed to do a series of interviews with the key Stakeholders first, along with some Desk Research, in order to understand the business and the industry itself. With that information in mind, my next step was to define the strategy and process I would execute, so I can deliver a successful design within the deadline they had: 3 to 4 weeks.

In terms of provided material, besides a clear understanding of their clients, their segmentations and the specifics of each one -and for whom this Book & Pay tool was focused on-, they provided me with a very simple Figma file, which I followed since it was essential to their branding and their digital tools.

Strategy & Methodology

The strategy was very concise and straightforward:

  • Usability Analysis and User's feedback on current Desktop Book & Pay
  • Wireframe ideation and quick presentation of ideas
  • Prototype the posible solution
  • Test it and iterate it.

As for the Design Process, I decided to work with Design Thinking, as it fit with the steps I needed to go through with the time I had. For the kickoff meeting, I presented and explained the decision along with the definition of the activities to perform in each stage of the Design Thinking.

Heuristic Evaluation on Desktop Book & Pay

With the help of four more UX colleagues, I ran an Usability Analysis on the Book & Pay flow, detecting several problems that needed to be considered before adapting it to a mobile version.



With a Usability Score of 74%, which indicates that some fixes are needed for improving the experience, most problems were related to an unclear navigation and storytelling on the screens, missing key components and button for action taking and poor hierarchization of information. Major usability problem was detected on a Registration step which wasn't included in the stepper, working as an experience breaker as the user didn't have knowledge of this until it reaches it later in the flow.



User testing the Desktop Book & Pay

With KLog's help, I managed to get access to some real users from their clients database. With this, the first approach was to perform a guided remote testing in order to detect some usability issues and some Cualitative data with a previously designed Script for this purpose.



Once feedback was gathered, I Quantified it within a Usability Metrics Matrix in order to get some numbers regarding tasks and usability in general. Finally, with all this information in hand and feeling Empathized with the users, I was able to Define some alignments to consider and then jump to the Ideation stage of the process.


Ideation and Prototyping

Since I was pretty clear with the actions to take thanks to the feedback obtained in the previous steps, and thanks to the UI Kit KLog shared for me to use it, I felt confident to jump from a few quick sketches to a Hi-Fi Prototype right away using Figma.




At this stage, and with an interactive prototype in hands, the design and research so far were presented to Stakeholders to get their feedback and the response was very positive, both with the research and with the preliminary design, on which they commented on certain things that I applied before proceeding to Test.

Testing, Iteration and Delivery

The intention of this test on the proposed design was to focus on usability mostly, so it was important to see interaction results such as heatmaps, time on screen, bounce or misclick rates. Considering this goal, the test was executed with Maze tool, on which I could obtained all the data I need to evaluate the design.


With the inclusion of Satisfaction Questionnaires (ASQ & SUS), plus some open questions regarding the experience at the end of the test, I was able to obtain valuable information to improve the design and iterate.

With a second round of testings, I finally polished the design enough to present and deliver all the documentation and Figma file for the Dev team to develop.


The Design