Role and Team 

‍

In this project, I led the information architecture, interaction design, and definition of the new interface, delivering high fidelity prototypes, detailed user flows, and role based flow documentation. I collaborated daily through Slack with the external agency responsible for frontend, backend, and QA, and coordinated individual handoff meetings with the developer in charge to clarify design expectations. Clear communication from the beginning prevented synchronization issues. One critical decision was to enrich the interface with new interactive hover states and sticky behavior for the check in component, improving usability and visual guidance. I also strengthened the existing design system by updating key components: the event registration form, registration confirmation, and event overview cards. This ensured consistency and scalability for future iterations.

‍

‍Process and Key Decisions

‍

Initial Definition and Analysis

‍
To understand the current system thoroughly, I conducted semistructured interviews with product, business, and support teams, which helped identify internal logic and key requirements. I then explored the user flow directly in the test environment, mapping the actual experience step by step. In parallel, we implemented Hotjar to establish a conversion baseline at every stage. This provided quantitative visibility into drop offs and reinforced the need to improve the stage immediately before check in.

‍

Integrated Registration Strategy

‍
Using the foot in the door approach, I added account creation or sign in immediately before check in. At that point, users are already committed to registering and are more motivated to authenticate to secure attendance without perceiving it as an additional obstacle.

‍

Scenario Mapping in FigJam

‍
In FigJam I detailed four user journeys:

• Signed Out User: registration or sign in alternatives.
• Event Outside the Subscription: a screen explaining the required membership level and offering an upgrade or the option to add the event individually.
• Registration Cancellation: a modal confirming the reversal of the action.
• Successful Registration: immediate visual confirmation.

For each case, I defined success states, error states, and escape routes to ensure clarity throughout the experience.

‍

Key Interaction Decision

‍
To minimize friction, I implemented a sticky component that keeps the check in button visible at all times. Users no longer need to scroll back up after reading the event description, making the action accessible at any point.

‍

Internal Validation

‍
Without formal external testing, I validated the interactive prototype through three feedback sessions with the internal team and product leaders. We adjusted microinteractions such as hover duration and error copy, and confirmed that the new flow balanced business needs with the user experience. It was then ready for development by the external agency.

‍

‍

‍

‍

Wireframes and Interface Changes

‍

Registration Flow: Before and After

‍
The upper wireframes show the previous registration flow, where check in did not require authentication. The lower wireframes show the new design, which introduces sign in or account creation before event registration is completed. This evolution responds both to the heuristic analysis and to the shift toward a subscription business model, requiring authentication to access exclusive benefits and improve conversion measurement.

‍

‍

‍

‍

‍

‍

‍

Issues Identified in the Component Card (event overview)

‍

1. Unclear Visual Hierarchy
   • Every element, including sponsor, event type, and date, competes for equal attention, making the most relevant information difficult to identify at a glance.
2. Small Click Target
   • The CTA button is too small relative to the rest of the card, creating interaction friction and reducing accessibility, especially on mobile devices.
3. Insufficient Contrast
   • The CTA text color does not meet WCAG AA contrast, reducing legibility for users with low vision.
4. Missing Categorization
   • There is no label indicating the event category or subcategory, preventing users from identifying the content type quickly.

‍

‍

‍

‍

Improvements Implemented in the Component Card (event overview)

‍

• Reprioritized Content Hierarchy
  • Highlight the event date and title with larger typography and stronger visual weight, moving secondary information such as sponsor and event type to a lower level.
• Enlarged CTA
  • Increase the size and click area of the Register button to support touch interaction and improve the experience on smaller screens.
• Accessible Contrast
  • Adjust the CTA color scheme to meet WCAG AA with a minimum 4.5 to 1 ratio, ensuring clear readability even in bright environments.
• Category Labeling
  • Add a label to the upper corner of the card identifying the event category, such as Webinar or Workshop, to speed up recognition and visual filtering.

With these changes, the cards meet usability and accessibility criteria while reinforcing the new subscription model by guiding users more intuitively toward registration.

‍

‍

‍

‍

Component: Event Details Card

‍

Previous State

‍
On the event details page, the component displayed general information but introduced these key points of friction:

‍

• Missing Location Link: users could not open the location in a maps application such as Google Maps.
• Limited Calendar Flexibility: users could not choose which calendar, such as Google, Outlook, or iCal, to add the event to.
• Inconsistent UI: action buttons used different sizes, disrupting visual consistency and creating confusion about which elements were interactive.

These issues affected usability by limiting basic interactions and weakened the platform’s perceived professionalism.

‍

‍

‍

‍

Redesigned Version

‍
To address these limitations, I implemented a new Event Details Card with the following improvements:

‍

• Linked Location
  A direct link opens the location in the device’s default maps application, helping users plan their attendance.
• Calendar Selection
  A dropdown allows users to choose among Google, Outlook, and iCal, increasing flexibility and helping them integrate the event into their usual workflow.
• QR Code Generation
  A button generates a valid QR code for physical check in, aligning with the subscription business model and streamlining admission to the event.
• Visual Consistency Across CTAs
  Button sizes, typography, and margins were standardized to ensure a consistent style and reinforce the action hierarchy.

With these adjustments, the component addresses functional and business needs while offering a smoother, more accessible experience consistent with the rest of the interface.

‍

‍

‍

Component: Final Registration Modal

‍

Previous State

‍
In the modal shown before completing event registration, the flow presented these points of friction:

‍

• Missing Visual Feedback: the interface did not clearly identify which user was being registered, creating uncertainty about who should complete the form.
• No Data Prefill: the system did not automatically fill information already available, such as name and email, forcing users to reenter known data.
• Unnecessary Fields: the flow requested information such as name and email, which rarely changes, unnecessarily extending the process.

These issues slowed registration and increased the likelihood of abandonment immediately before completion.

‍

‍

‍

‍

Redesigned Version

‍
To improve usability and accelerate completion, I implemented the following improvements:

‍

1. Separated Editing
   Fields that rarely change, such as name and email, were moved to a separate optional section, removing unnecessary information from the primary modal.
2. Data Prefill
   In the design prototype, I added guidance for the browser or platform to prefill fields using profile information, saving steps and reducing typing errors.
3. Flexible Dismissal
   I added a visible close icon to the corner of the modal, allowing users to cancel or adjust the process without being forced to leave the main page.
4. Field Removal
   I removed all fields that were not essential to registration, leaving only the data required to confirm attendance.

These adjustments made the modal lighter and more direct, reducing cognitive load, accelerating registration, and improving completion without sacrificing control or clarity.

‍

‍

‍

‍

Prototype of event registration with account creation

‍

‍

‍

‍

Prototype of event registration without account creation.

‍

‍

‍
Impact

‍

One month after launching the new registration flow, we analyzed Hotjar data and confirmed a measurable improvement in conversion and new account acquisition:

• Event detail page visits: 218
• Completed registrations: 40 → 18.35 % conversion compared with the previous 15%, representing a 22% relative improvement in registration funnel effectiveness.
• New accounts created: 154
  • Of these, 40 were created through the event registration process, representing 25.97 % of all new monthly accounts, showing that more than one quarter of users created an account specifically to attend an event.

These results show that integrating authentication into the check in flow increased conversion on event pages and significantly drove account creation, supporting the goal of diversifying revenue and strengthening the registered user community.

‍