PTGet a quote
Get a quote
Back to portfolio

UX/UI

Data CFM — UX/UI

Data CFM

Data CFM dashboard on desktop, with current credits, daily and monthly spending, an alert for when credits run out and a line chart of spending history, next to two phones showing the Wallet screen, with credit packages and discount badges, and the Simulator. Fictitious data.
UX/UI case studyData CFMBuying and managing credits for queries
System map diagram: Sign-up leads to Sign-in, which splits into two profiles. Institution: Dashboard, Profile, Wallet, Simulator and Security. Administrator: Dashboard, Membership requests, Packages, Reports and Usage volume.Sign-upSign-inInstitutionDashboardProfileWalletSimulatorSecurityAdministratorDashboardMembership requestsPackagesReportsUsage volume
System mapFrom sign-up to two access profiles
Institution flow diagram with six screens connected by arrows: Sign-up, Sign-in, Simulator, Wallet, Payment and Dashboard.Sign-upSign-inSimulatorWalletPaymentDashboard
Institution flowFrom sign-up to dashboard, through purchase
Desktop sign-in screen titled Sign in to your account, with a choice between CNPJ and digital certificate, a password field, a stay signed in option, a forgot password link and a Sign in button. Fictitious data.
Sign-inAccess by CNPJ or digital certificate
Three-step sign-upAttachments, company details and terms
Dashboard detail: a line chart of spending history with filters from 1 day to 1 year, a bar chart of queries by type (simple, digital and facial) and a table of recent queries with the credits used. Fictitious data.
Dashboard chartsSpending by period and queries by type
Simulator on desktop and phone: fields for simple, digital and facial queries with the credit total for each type, the result “You need 37 thousand credits” and a package table with a Buy button. Fictitious data.
Credit simulatorPlanned queries become a credit total
Buying creditsFrom wallet to receipt in four screens
Two desktop screens: My orders, with a table of order number, package, date, total, payment method and status, and Order details, with the order steps and the details, payment and summary blocks. Fictitious data.
OrdersList with status and details for each order
Order details close-up: a step indicator with Order placed, Payment approval and Order completed, plus blocks with the order number and date, bank slip payment with Awaiting payment status, and a summary with a Print receipt button. Fictitious data.
Order trackingSteps, payment method and summary
Three phone screens of the sign-up, with a vertical step indicator: Attachments, with the e-CNPJ certificate upload; Details, with company name, CNPJ, email and address; and Terms, with the contract text. Fictitious data.
Mobile sign-upThree steps with a vertical indicator
Security screen on desktop and phone: a table of recent queries with type, date, time and credits, and a list of account access with device, browser, location and session status. Fictitious data.
SecurityRecent queries and account access
Profile screen on desktop and phone: account owner details, Access key, Access password and Download my statement buttons, and a product rating form with stars and a comment field. Fictitious data.
ProfileOwner, access, statement and rating
Administrator dashboard on desktop: a quick panel with membership requests awaiting review, queries run, credits and revenue, a chart of usage history by query type and the top of the statement and recent purchases tables by institution. Fictitious data.
Admin dashboardMembership requests, queries, credits and revenue
Administrator Membership requests screen: totals of requests, approved, rejected and awaiting review, and a request table with date, company name, CNPJ, representative, email and status. Fictitious data.
Membership requestsTotals by status and request list
Two administrator screens: Packages, with editable cards for credits, price, discount and visibility, and Reports, with purchase and usage tables by institution, date filters and a Save as PDF button. Fictitious data.
Packages and reportsPackage management and reports by institution
Data CFM UI kit: Roboto type scale (headlines H1 to H6, title, subhead, paragraph and caption), button variants and a 12-color palette with the main green, status colors and grays.#008159#00986E#02A2B9#4884BC#EF355A#FFD80C#232424#747575#7D8282#CCD0D0#EAEEF0#F4F4F4
ComponentsRoboto type, buttons and color palette

The product

Data CFM is a web and mobile platform for buying and managing credits. Institutions spend these credits on three types of queries (simple, digital and facial), and each type uses a different number of credits. In this case I show the system’s screens, from sign-up to administration.

Two profiles

After sign-up and login, the system splits into two profiles. The institution has Dashboard, Profile, Wallet, Simulator and Security. The administrator has Dashboard, Membership requests, Packages, Reports and Usage volume. Both menus have five areas, each with the tasks of its profile.

From sign-up to query

  • Three-step sign-up: attachments (e-CNPJ certificate and articles of incorporation), company and account owner details, and terms. On mobile, the steps run vertically.
  • Login with a CNPJ or a digital certificate.
  • Dashboard: current credits, daily and monthly spending, an estimate of when the balance runs out, spending history with filters from 1 day to 1 year, queries by type and the latest queries.

Buying credits

  • Simulator: the institution enters how many queries of each type it plans to run, sees the total credits and gets a suggested package (“You need 37 thousand credits”).
  • Wallet: packages from 50 thousand to 10 million credits, with discounts on the larger ones.
  • Payment: credit balance, card, boleto, Pix or bank deposit, through to order confirmation and the receipt.

Tracking and security

  • Orders: a list with status and a detail page with the steps Order placed, Payment approval and Order completed.
  • Security: latest queries and account access, with device, location and session.
  • Profile: account owner, access key and password, statement and a star rating of the product.

Administration

The administrator dashboard brings together membership requests awaiting review, queries, credits and revenue, plus usage history, statements by institution and the latest purchases. Membership requests lists the requests with totals for approved, rejected and pending. In Packages, the administrator sets each package’s price, discount and visibility, and the reports show purchases and usage by institution.

Visual system

Roboto in a scale from headings to captions, buttons and a 12-color palette: green #008159 as the primary, supporting grays and status colors. The same cards, tables and step indicators appear on desktop and mobile.

The final screens are in the gallery above.

More projects

Graphic Design

DNIT — Visual Identity

DNIT — Brazilian National Department of Transport Infrastructure

Graphic Design

Esoteric Mundi — Identity & Packaging

Esoteric Mundi

Graphic Design

Ideologia & Tal — Rebranding

Ideologia & Tal