PTGet a quote
Get a quote
Back to portfolio

UX/UI

Sescoop: Events — UX/UI

Sescoop

The Events page on desktop and phone, with a Create new event button, tabs and event cards, next to another phone showing an open notification. It opens the case with the module in high fidelity. Sample data.
UX/UI case studySescoop: EventsA web module for events with travel and lodging
CSD matrix in three columns of cards: eight certainties, three assumptions and three doubts, with the first certainty highlighted. It organizes what was known about the process before designing the screens.CertaintiesExpense reporting is the biggest problemNo report, no new tripValidation by the State UnitToo many formsAccess is the biggest difficultyFocus on travel and lodgingCap on participants per stateResponsive for mobileAssumptionsA single process is possibleSign-in by email codeRegional differences affect the processDoubtsDo cooperatives access the process?Official letter or email?Still require flight check-in?
CSD matrixWhat we knew, assumed and asked
Thirteen numbered steps in two rows linked by arrows, from creating the event to checking the expense report, highlighted as the last step. It shows the whole process the module has to cover.1Create the event2Announce to State Units3Receive the notice4Prepare invites to cooperatives5Send the invites6Participant confirms7State Unit sends registrations8Buy tickets and book lodging9Check what the agency issued10Send to the traveler11Trip12Return13Check the expense report
A 13-step journeyFrom event to expense report
Desktop sign-in screen with fields for email or tax ID (CPF) and password, a link to recover access and a sign-in button. It shows the single way into the system.
Sign-inEmail or tax ID, plus access recovery
Diagram with four cards in sequence, National Unit, State Unit, Cooperative and Traveler, linked by solid forward arrows and dashed return arrows, with the travel agency below, connected to the National Unit and the Traveler. It shows who does what and where validation happens.National UnitCreates the event, distributes spots, confirms purchaseState UnitReviews registrations and validates expense reportsCooperativeHandles registrationTravelerEnters their data and attaches receiptsTravel agencyIssues tickets and bookings
Four levels, one flowRegistrations move on; validations and returns come back
The same event page on two desktops: on the left the wireframe in grey and black, on the right the final interface, with dates, venue and participating units with their spot availability. It compares the screen's structure and finish. Sample data.
From wireframe to UIThe event page, before and after
Crop of the Home screen with the scheduled events calendar and the recent notifications panel showing a no-notifications message. It shows how the screen looks before there are any events. Sample data.
Empty stateHome before the first event
Event creationFrom the form to spots created per state
Crop of the event creation form with two blocks: the event schedule, with start and end dates and times, and spot allocation, with state, contact person, date, number of spots and an availability counter. Sample data.
Schedule and spotsDates and spots per state in one form
Three phone screens: Create event, with registration dates and image upload; participant registration, with personal details; and the voucher list, with an import button and download and delete actions. It shows the main tasks on a small screen. Sample data.
Mobile versionCreate events, register participants, import vouchers
Component panel: primary, success and danger buttons in five states, event and notification status tags, a notification card in default and selected states, and eight color swatches. It sums up the visual language of the screens. Sample data.#0076BD#04588A#02395F#08C4FC#40BF55#CC3300#3F4F58#CFCFCF
ComponentsThe system's buttons, statuses, cards and colors
Spots per state on desktop, as a table with unit contact, deadline, number of spots, filled, remaining and actions, and on phone, as cards with the same data and Edit and Delete buttons. It lets you follow each state's occupancy. Sample data.
Spots per stateTotal, filled and remaining per state
Registering a participantFrom the list to data confirmation
Two overlapping desktop screens: hotel information, a table by state with contact person, hotel and contact details, and the voucher list, with a button to import a new voucher and a data check. It shows lodging inside the same module. Sample data.
Hotels and vouchersLodging inside the same module
Hotel information form on desktop and phone, with company tax ID, hotel name, legal name, contacts, state, city, the name of the person making the booking and a save button. It keeps hotel and booking in one record. Sample data.
Hotel registrationHotel and booking details
NotificationsList and reading side by side
Desktop Reports screen with a table of events showing venue, spot deadline, number of spots, filled, remaining and download, edit and delete actions. It gives an overview of spots across all events. Sample data.
ReportsSpots and hotel for each event
Print sheet for an event, with its name, dates, venue and a table by state, in a window with a close button. It takes the event list onto paper. Sample data.
Ready to printEvent list as a printable sheet

Context

The Events module organizes events that involve travel: registration, tickets, lodging and expense reporting. Before it, the process ran through official letters, emails and many forms, with several validation steps between the National Unit, the State Units, the cooperatives and the travelers. In the research, expense reporting came up as the biggest problem, and access to the system as people’s biggest difficulty.

The system serves four levels with different responsibilities (National Unit, State Unit, Cooperative and Traveler), plus the travel agency that issues tickets and bookings.

My role

I supported the research and the design thinking workshops. I designed the journeys, assets and screens, prototyped the navigation experience and followed the usability tests.

Process

  1. CSD matrix (August 2022). It sorted certainties, assumptions and doubts about the process. The certainty that guided the rest: expense reporting is the biggest problem, and no one travels again without reporting the last trip.
  2. A 13-step journey. From creating the event to checking the expense report. The touchpoints revealed a process scattered across links, email, phone, in person, WhatsApp, the agency’s platform and forms.
  3. Four levels, one flow. Each level plays its part in the chain, and the State Unit validates registrations and expense reports before the process moves on.
  4. From wireframe to UI. First in mid fidelity, in grey, to discuss structure; then in high fidelity, on desktop and mobile.
  5. Prototype and test. I prototyped the navigation, and the National Unit flow was tested with one user.

Design decisions

  • Spots per state, with total, filled and remaining, as a table on desktop and as cards on mobile. It answers the certainty that participants had to be capped per state.
  • The expense-report deadline on the event page itself, plus a “Report due” status among the tags. The biggest problem stays in view from the start.
  • A single sign-in by email or tax ID, with access recovery, for the biggest difficulty raised: getting into the system.
  • A fixed side help tab on every inner screen, with the occasional traveler in mind too.
  • Explicit actions on each row (download, edit, delete) and color-coded statuses (open, happening, pending, cancelled, scheduled), to follow every change to an event.
  • Notifications with filters by month and year, list and reading side by side, and read, unread, important and archived states.
  • Hotels and voucher import inside the same module, since this stage focused on tickets and lodging.
  • Mobile versions of the main tasks: creating an event, registering a participant, importing a voucher and reports.

Usability test

On September 29, 2022, a user from the National Unit profile went through the prototype in five scenarios: general navigation, event creation, spot distribution, reports and hotel registration. The goal was to find difficulties, inconsistencies and problems in the flow and to gather suggestions.

What worked

  • Browsing the events calendar on the home screen was easy.
  • The event was created quickly and intuitively, and she liked the help in the quick-access area.
  • The information in the reports table met her needs.

What needed adjustment

  • Wording. The term “availability” raised questions, and the “Create availability” option was unclear. Suggestions: “Make spots available” and, instead of “Date/Time”, “Event schedule”.
  • Shortcuts. A create-event button on the events screen itself.
  • Units. Picking the State Unit from a list instead of typing it, and allowing the unit’s contact to be someone other than the event’s contact.
  • Open rules. Whether unfilled spots can be redistributed.
  • Reports and hotels. Printing by flight, by State Unit and by hotel; on the hotel form, the label “Name of the person making the booking”.
  • Help and alerts. Quick-access help texts based on the travel policy, and notifications grouped by event.

Result

A module designed for desktop and mobile, from spots per state to hotels and reports, tested with someone who uses the national profile. 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