Role and team

‍

In this project, I took the lead in the information architecture, the interaction design and the definition of the new interface, delivering artifacts such as high-fidelity prototypes, detailed user flows and documentation of the flow according to different roles. I worked in continuous and daily collaboration via Slack with the external agency in charge of the frontend, backend and QA, and coordinated a handoff in individual meetings with the developer in charge to clarify design expectations. Thanks to smooth communication from the start, there were no synchronization problems; a critical decision I made was to enrich the interface with new interactive states (hover) and sticky behavior in the check-in component, improving usability and visual guidance. In addition, during the project, I reinforced the existing design system by updating key components: the event registration form, the registration confirmation, and the event overview cards. Ensuring consistency and scalability in future iterations.
‍

‍Key process and decisions

‍

Definition and initial analysis
To fully understand how the current system works, I conducted semi-structured interviews with the product, business and support teams, allowing me to identify internal logic and key requirements. Next, I directly explored the user flow in the test development environment, tracing step by step the real experience that users followed. In parallel, we implemented Hotjar to establish a baseline for measuring conversions at each phase of the process, which gave us quantitative visibility of the drop-offs and reinforced the need to intervene in the run-up to check-in.

Integrated registration strategy
Applying the “foot-in-the-door” approach, I added the step of creating or logging in immediately before check-in. In this way, the user, already committed to the registration, is motivated to authenticate to ensure their attendance, without perceiving it as an additional obstacle.

Scenario mapping in FigJam/Figma
In FigJam I detailed four user journeys:

• User not logged in: registration or login alternatives.
• Unsubscribed event: screen that explains the required membership level and offers to upgrade or add the a-la-carte event.
• Cancellation of enrollment: modal that confirms the reversal of the action.
• Successful registration: immediate visual confirmation.

For each case, I defined states of success, error and escape routes, ensuring clarity at all times.

Key interaction decision
To minimize friction, I implemented a sticky component that keeps the check-in button always visible. This prevents the user from having to scroll up after exploring the description of the event, making it easier to take action at any reading point.

Internal validation
Without formal external testing, I validated the interactive prototype in three feedback sessions with the internal team and product leaders. During these meetings, we adjusted micro-interactions (hover duration, error text) and confirmed that the new flow perfectly balanced business needs and user experience, making it ready for development with the external agency.

‍

‍

Wireframes and interface changes

Registration flow: before and after
Above are the wireframes of the previous registration flow, where the check-in screen is displayed without requiring authentication, and below the new design, which integrates the login/registration step before completing the registration for the event. This evolution responds both to the heuristic analysis carried out and to the change to a subscription business model, requiring that each user be authenticated in order to access exclusive benefits and to improve the measurement of conversions.

‍

‍

‍

‍

‍

‍

Problems detected in the component Card (overview of events)

1. Unclear visual hierarchy
   • All elements (sponsor, type of event, date) compete for the same attention, making it difficult to understand the most relevant information at first glance.
2. Reduced click target
   • The CTA button is too small compared to the rest of the card, causing friction in interaction and worsening accessibility, especially on mobile devices.
3. Insufficient contrast
   • The color of the CTA text does not meet the AA contrast level of WCAG, complicating readability for users with low vision.
4. Lack of categorization
   • There is no label to indicate the category or subcategory of the event, preventing a quick identification of the type of content.

‍

‍

‍

Improvements implemented in the component Card (overview of events)

• Rhierarchization of content
  • Highlight the date and title of the event with larger typography and colors of greater visual weight, moving secondary information (sponsor, type) to a lower level.
• Expanded CTA
  • Increase the size of the “Register” button and its click area, facilitating tactile interaction and improving the experience on small screens.
• Guaranteed contrast
  • Adjust the color scheme of the CTA to comply with WCAG AA (minimum ratio 4. 5:1), ensuring a clear reading even in bright environments.
• Tagged by category
  • Add a label in the upper corner of the card that indicates the category of the event (for example, “Webinar”, “Workshop”), streamlining visual identification and filtering.

With these changes, the cards not only meet usability and accessibility criteria, but they also reinforce the new subscription model by guiding the user more intuitively to the registration action.

‍

‍

‍

‍

Component: Event Details Card

Previous state
On the event details page, the component displayed general information but had these key frictions:

• Lack of a link for the location: The user couldn't open the location in a map app (e.g., Google Maps).
• Low calendar flexibility: it was impossible to choose which calendar (Google, Outlook, iCal) to add the event to.
• Inconsistent UI: the action buttons were of different sizes, breaking visual coherence and causing confusion about which element was interactive.

These problems affected both usability — limiting interaction with basic functions — and the platform's perception of professionalism.

‍

‍

‍

‍

Redesigned version
To address these deficiencies, I implemented a new Event Details Card with the following improvements:

• Location with link
  A direct link opens the location in the device's default map app, making it easier for the user to plan their assistance.
• Calendar selection
  A drop-down menu allows you to choose between several calendars (Google, Outlook, iCal), increasing flexibility and ensuring that each user can integrate the event into their regular flow.
• QR code generation
  A button has been added that generates a valid QR for the physical check-in process, aligned with the subscription business model and optimizing registration when accessing the event.
• Visual consistency in CTAs
  All button sizes, fonts and margins were approved, ensuring a uniform style and reinforcing the hierarchy of actions.

With these settings, the component not only covers functional and business needs, but also offers a more fluid, accessible and consistent experience with the rest of the interface.

‍

‍

‍

Component: Final Record Modal

Previous state
In the mode prior to completing registration for the event, the flow presented these frictions:

• Lack of visual feedback: It was not clearly indicated which user was in the process of registering, raising doubts about who should complete the form.
• Absence of self-population of data: The system did not automatically fill in the information already available (name, email), forcing the user to re-enter data that the system knew.
• Unnecessary fields: Information such as name and email was requested, which rarely changes, unnecessarily lengthening the process.

These problems slowed enrollment and increased the likelihood of abandonment just before final enrollment.

‍

‍

‍

Redesigned version
To optimize usability and accelerate flow closure, I implemented the following improvements:

1. Editing segmentation
   The fields that rarely change (name, email) were moved to a separate and optional section, freeing the main modal from superfluous information.
2. Auto-fill data
   In the design prototype, I activated instructions for the browser or platform to self-populate the fields with the user's profile information, saving steps and reducing typing errors.
3. Flexible closure
   I added a visible “×” icon in the corner of the modal, allowing you to cancel or adjust the process without necessarily leaving the main page.
4. Deleting fields
   I deleted all the fields not essential for registration (name, email), leaving only the specific confirmation of attendance data.

With these adjustments, the modal became lighter and more direct, reducing cognitive load, accelerating registration and improving the completion rate without sacrificing control or clarity.

‍

‍

‍

‍

Interactive prototype: explore and test new user flows

‍

‍
Impact

One month after the launch of the new registration flow, we analyzed the data collected with Hotjar and confirmed a tangible improvement in the conversion and acquisition of new accounts:

• Visits to event detail pages: 218
• Completed registrations: 40 → 18.35% conversion rate (vs. 15% before), representing a 22% relative increase in the effectiveness of the enrollment funnel.
• New accounts created: 154
  • Of these, 40 were generated thanks to the event registration process → 25.97% of the total number of new monthly accounts, showing that more than a quarter of users registered specifically to attend an event.

These results demonstrate that integrating the authentication step into the check-in flow not only increased the conversion rate on event pages, but also significantly boosted account creation, supporting the goal of diversifying revenues and strengthening the community of registered users.

‍

‍