Role and team:

My role in the project was to lead the information architecture, the interaction design and the new interface, ensuring the correct implementation of the previously defined design system.

I worked in collaboration with an external agency responsible for front-end, back-end and QA development, coordinating reviews and ensuring alignment with design and functionality guidelines.

Within the internal team, we have a lead developer, who defined the technical requirements and served as a bridge between design and development.
‍

‍Key process and decisions

As part of the process of creating the Membership model Of the company, an analysis was carried out of the Overall user experience. The objective was to define the new user flow, incorporating the Registration as a necessary step to successfully complete the registration process for an event.

‍

https://www.figma.com/board/zS3HU9PLKtKbfD0FbZBXIg/User-flow---Events-and-webinars?node-id=0-1&t=6T9p0ytxtQYSDyqh-1

‍

‍

Based on the new user flow, different designs were designed Use cases where the user might find themselves trying to register for an event. These cases were as follows:

1. The user wants to register for an event, but is not logged in.
2. The user wants to register, but the event is out of their subscription.
3. The user wishes to cancel their registration for an event for which they are already registered.
4. The user successfully completes their registration for the event.
   
   

Below are the Wireframes of the pre-registration flow (at the top of the image) and the Wireframes of the registration flow with the new interface (at the bottom of the image).

‍

‍

‍

‍

‍

‍

The changes made to the UI of the user flow were mainly motivated by a heuristic analysis and also respond to the current time of business needs, since a subscription business model evolved, they had to be adapted to better meet those needs.

Below are some components of the interface that changed in detail as a result of the very findings documented in the examples:

‍

‍

‍

‍

This is the example of the component Card, used in the Overview of the available events. However, it has several problems:

1. Unclear visual hierarchy: Information about the sponsor, the type of event and the date has the same level of relevance, making it difficult to understand.
2. ‍CTA size: The call-to-action (CTA) button is too small compared to the total size of the component, reducing its usability. Un Click Target such a small amount affects user interaction and generates accessibility problems.
3. ‍Insufficient contrast: The color of the text in the CTA does not meet the minimum standard AA Of the guidelines Of the WCAG, making it difficult to read.
4. ‍Lack of categorization: The component does not include a label that indicates the category or subcategory of the event, which prevents a quick identification of its type.
   
   

These problems affect both the user experience and the accessibility of the system, so it was essential to improve the visual hierarchy, adjust the size of the CTA and ensure adequate contrast.

‍

‍

‍

‍

This is the new component Card, designed for the Overview of the available events, incorporating improvements in functionality, information hierarchy and accessibility.

Key optimizations include:

• Better Visual Hierarchy: Elements are clearly differentiated by adjusting the size and style of the typography, assigning appropriate visual weights to each level of information.
• ‍Increased accessibility: The contrast between the content and the background was optimized, improving readability and complying with web accessibility standards.
• ‍Incorporation of labels: The component now includes Labels that allow users to quickly identify the type of event.
  
  

These improvements make the component clearer, more functional and accessible to all users.

‍

‍

‍

‍

This is the component that was shown on the event details page, where the general information of the event is presented. In the analysis of this component, we identified several usability issues:

1. Lack of a link for the location: There was no link to open the location of the event on a navigation platform, such as Google Maps.
2. ‍Low flexibility: You couldn't select what type of calendar you wanted to add the event to, limiting the user experience.‍
3. Inconsistent UI: A different button size was used, causing inconsistency in the interface and affecting the visual coherence of the component.
   
   

These areas of improvement are key to optimizing the user experience and component functionality.

‍

‍

‍

‍

This is the new component of Details of the event, available on the corresponding page. Improvements include:

1. Location with link: A link was added that redirects to the default map application in the user's system, allowing the event to be easily located.
2. ‍QR code generation: The option of generating a QR code was incorporated, responding to the business need to allow the registration of attendees using an identification code upon arrival at the event.‍
3. Visual Consistency in Buttons: The CTA buttons were redesigned, aligning them and ensuring that both follow parameters of visual consistency.
   
   

These improvements optimize functionality and user experience, making it more intuitive and efficient.

‍

‍

‍

‍

In the Modal that the user must complete to complete their registration for the event, we identified several problems in the previous version:

1. Lack of visual feedback: A clear indication of which user was being registered was not provided, causing confusion.
2. ‍Absence of self-population of data: Information that was already registered in our database was not self-populated in the modal fields, forcing the user to fill in already known data.‍
3. Unnecessary fields: Fields such as name and email were included, which rarely change and probably don't need to be edited during registration.
   
   

These issues affected the usability and efficiency of the registration process, so improvements have been made to simplify the user experience.

‍

‍

‍

‍

In the changes made to Modal Prior to completing registration to attend an event, key improvements were implemented to optimize the user experience:

1. Clearer segmentation: The fields were separated on a separate page to edit data that doesn't change frequently, such as name and email.‍
2. Auto-fill data: Instructions were added to the design platform to use the functionality of Auto-fill, automatically filling in the fields with the information already registered in the system.‍
3. Increased flexibility: The option to close the modal using the “x” icon was included, giving the user the possibility to correct the process if they wish.‍
4. Elimination of unnecessary fields: Fields that are not essential to complete this specific flow were eliminated, simplifying the process.
   
   

These improvements improve usability, reduce friction in the registration process, and provide a smoother and more flexible experience.

‍
IMPACT

After measuring the results using Hotjar for a month after the implementation, we obtained the following data:

Of the 218 users who visited a detail page of an event, 40 successfully completed their registration process, which represents a 18.35% of conversion.

Of the 154 new accounts created in that month, 40 they were users who, encouraged by the registration process to attend an event, created a new account in the system. This represents a 25.97% of the total number of new accounts created during that period, after the launch of the new event registration system.

‍

‍