Ticket Log UX Case
A case study developed in 48 hours to test a selection process.
Briefing
Among the solutions developed by Ticket Log, some are aimed at partnerships with accredited fuel stations. Considering this activity, develop a portal that presents information you believe is necessary to support partners in their administrative tasks. Also bring some suggestions on how to address points of attention such as overdue invoices, available advance amounts, process for joining a new service, terms of acceptance or joining the rewards program.
The first step is to resolve immediate doubts such as:
- Who are Ticket Log’s competitors?
Gasola, Posto Gestor - What facilities do Ticket Log and its competitors offer as a differentiator?
- Simplified indicators panel and dashboard
- Integration of data between finance, tax, and registration
- Fuel supply control with pump integration and tank measurement.
- Who are the users?
Our users are owners and administrators of fuel stations. Less connected to operations and more linked to business management.
Business Objectives
- Facilitate integration between administrative and operational aspects, analyze competitors with a single click, increase operational efficiency, and ensure security in financial and fiscal flows.
Benchmark
Since competing companies offer solutions that require a login and password, I used their websites, blogs, and YouTube channel to learn more about the products.
Para Postos | É o Mapa Log! 📊 — YouTube
Gasola
Posto Gestor
Xpert
SGA Petro
Design Process
Research
Due to the tight deadline, it was not possible to conduct elaborate research. I used Desk Research and personally visited 8 fuel stations in my area to interview those responsible for administration.
However, since it was Saturday, the administrative manager was not available at all locations. To not waste the trip, I also interviewed the managers about the administrative routine of the stations.
The research began by asking the user to tell about their day with payment management control and market:
- Do you accept any type of fuel card like Ticket?
- Is there a control system for payment management?
- What is your biggest problem today?
- How is the market analysis regarding your competitors in the region conducted?
- Do you accept payment via fleet? If so, how does it work?
As the user described the process, I used techniques to encourage them to talk more, such as:
User: “We set prices according to the value of my direct competitors and margin.
Me: “And how do you do this research?”
User: “I or another person visit nearby stations and note the prices.”
Me: “Is this person a fixed employee? When it’s you, how is it done?”
User: “I can’t provide information about this guy, but when I go, I walk.”
Other questions included: “Do you have any payment management and invoice system today? / Besides credit card, do you accept any fuel voucher like ticket and alelo? / When a fleet operator arrives, how is the charge and generation of invoices handled? / Have you ever had problems generating an invoice or computing the receipt from this fleet operator? / What information is essential in your decision-making?”
This research helped collect information that could identify gaps and opportunities, recognize professional jargon for use in UX Writing, etc.
Of the 8 stations, only 3 accepted fuel vouchers. And of these 3, only one accepted the ticket log, the remaining two accepted alelo. They talked about difficulties related to incorrect data provided by the customer that made charging impossible, preference for well-known card machines like Cielo and RedeNet which facilitate advance payments, use of other systems, not the ticket, for payment management, difficulty in preventing fraud or non-payment of the product, among others.
Pixar Storytelling
Lívia Overloaded — Administrative Analyst
Once upon a time, there was Lívia, an administrative analyst for a network of gas stations, 31 years old, single, and extremely overloaded.
Every day, she had to spend at least 2 hours validating invoices, in addition to the work of making the monthly Excel report of what was sold, how it was paid, and the type of fuel from each franchise for management to understand the refueling flow of the station and how the business was doing. After that, she tried to fit in the study of direct competitors for price comparison and evaluation.
One day she noticed a problem with the computer and lost all the work of the month, which invoices needed to be generated, the market study, and the entire manual business report.
Because of this, Lívia sought a quick solution to improve her productivity and quality of life. Finding Ticket Log and Mapa Log, which allows all this management to be in one place, with digitized invoices and market analysis at a click.
Because of this, she brought this project to management for inclusion as the primary management system, replacing old, flawed, and manual flows.
Finally, management approved, improving Lívia’s productivity, allowing them to see the real numbers of the business and how to be more competitive with quality and speed.
MVP
As our MVP, I started our product focused on helping Lívia analyze her sales with all the necessary metrics and an area to advance her receivables.
Style Guide
Using the already established company logo, I created a color palette using the Adobe Color tool. This palette will help compose our style guide to ensure a connection with the brand.
- Colors
https://color.adobe.com/color-theme_ticket-log-color-theme-20541238 #AdobeColor #AdobeColorThemes
And that was the way I categorized the colors.
The green is a predominant color in the product that conveys money, growth, vitality.
The texts in a darker blue tone aim to bring credibility, which is essential for a management software.
2. Grid
Used the Bootstrap grid and an 8-point grid. This ensures flexibility and consistency in the layout, making it easier for developers to understand.
3. Typography
4. Buttons
Wireframe
In this phase, I used my tablet to start sketching my ideas “on paper” and build a low-fidelity prototype to validate the requirements.
This is a timelapse that I recorded during the process.
High-Fidelity Prototype
Click here to view the prototype on Figma
Click here to view the mobile prototype on Figma
Accessibility
I used the Stark plugin to test contrast and legibility. This plugin provides a visual simulator for different types of color blindness, thus allowing me to include a broader audience in my product.
Tests Part 2
I used the VisualEyes plugin to make a prediction about user interaction. This plugin has a 93% accuracy in its predictive analysis in eye-tracking studies and behavior patterns.
Unfortunately, I didn’t have enough time to build the rest of the pages to create a navigable enough flow to generate tests.
My strategy was to use Maze to test the Figma prototype to collect usability metrics like heatmaps, mis-click rate, journey abandonment rate, etc.
The interfaces were created based on the laws of similarity and proximity to ensure a smoother experience. I also adopted the use of cards to ensure a scalable product.
The design adopted was inspired by the following platforms:
Learnings
- Calling the stations might have been a more assertive bet to check the operating hours of each administrative sector.
- Working on a UX process in 48 hours is not a trivial task. However, it was a very enriching experience and an opportunity for face-to-face interviews, which have their value.
The challenge also proved to be an opportunity to teach more about time management and prioritization of steps.
Evolution
- Anticipate the states of components in the Style Guide.
- Incluir Include more accessibility studies.
- Build the Figma prototype of all the menu areas that were missing: Registrations, Reports, Finance, Rewards. Moreover, it lacked exploring what those additional services of the challenge would be.
- Implement a “Ticket Log Academy” to help administrators train and assist in the client success process.
- As an evolution of the product as a whole, I felt the lack of a space more dedicated to the Ticket Log product called Mapa Log.Conclusão
I would really appreciate feedback on what you think about this case and what you would do differently. I believe the richest method of learning is the constant exchange between professionals.
Thank you for your attention and the time invested in reading!
See more about me on Linkedin
