Responsive Web Design

Responsive Web Design

Responsive Web Design

Propósito Eventos

Propósito Eventos

Propósito Eventos

Propósito Eventos is a company dedicated to organizing weddings and other types of celebrations, but primarily weddings. Most event planning companies in the city don't have a website; they only conduct their business through social media. This means requesting a quote lacks formality and takes time. Therefore, Propósito Eventos wanted to go further and add an online quoting and booking system.

Throughout this presentation, you will find the results of the research and subsequent design of the website.

Propósito Eventos is a company dedicated to organizing weddings and other types of celebrations, but primarily weddings. Most event planning companies in the city don't have a website; they only conduct their business through social media. This means requesting a quote lacks formality and takes time. Therefore, Propósito Eventos wanted to go further and add an online quoting and booking system.

Throughout this presentation, you will find the results of the research and subsequent design of the website.

The Project

The Project

UX Designer leading the website design for Propósito Eventos, and UX Researcher.


Responsibilities include conducting interviews, creating paper and digital wireframes; developing low- and high-fidelity prototypes; performing usability studies; considering accessibility; and iterating on designs and responsive design.

UX Designer leading the website design for Propósito Eventos, and UX Researcher.


Responsibilities include conducting interviews, creating paper and digital wireframes; developing low- and high-fidelity prototypes; performing usability studies; considering accessibility; and iterating on designs and responsive design.

My Contribution

My Contribution

August - September 2023

August - September 2023

August - September 2023

Time

Time

Time

The Process

The Process

I conducted user interviews to create empathy maps, allowing me to better understand the end user and their immediate needs. The research revealed that users are typically pressed for time when organizing their wedding or any other event, juggling numerous tasks and searching for everything separately. Very few companies in the area offer this type of service with all the added value, and even those that do are difficult to contact and schedule appointments with. None of them have a website showcasing reviews, organized photos, promotions, and direct contact information. Although they all have social media presence, the lack of a professional website makes the companies appear unprofessional and presents their services in a disorganized manner, creating another problem for the user instead of solving their organizational challenges.

I conducted user interviews to create empathy maps, allowing me to better understand the end user and their immediate needs. The research revealed that users are typically pressed for time when organizing their wedding or any other event, juggling numerous tasks and searching for everything separately. Very few companies in the area offer this type of service with all the added value, and even those that do are difficult to contact and schedule appointments with. None of them have a website showcasing reviews, organized photos, promotions, and direct contact information. Although they all have social media presence, the lack of a professional website makes the companies appear unprofessional and presents their services in a disorganized manner, creating another problem for the user instead of solving their organizational challenges.

Weaknesses

Weaknesses

Most event planning companies can only be contacted through social media, which makes them seem like informal businesses, as they don't have an established website.

Web Site

Web Site

The few companies that do have a website have a poor design and lack adequate information for the customer, causing them to waste more time searching for information, calling companies, and delving into the details.

Information

Information

The limited offers that companies maintain online are outdated, have not been updated, and the user must contact them again to find out about any current promotions.

The limited offers that companies maintain online are outdated, have not been updated, and the user must contact them again to find out about any current promotions.

Offers

Offers

Social media platforms do not display information in an organized way that meets the user's needs, so users have to spend much more time searching until they find what they are actually looking for, resulting in a less than ideal experience.

Social media platforms do not display information in an organized way that meets the user's needs, so users have to spend much more time searching until they find what they are actually looking for, resulting in a less than ideal experience.

Organize Ideas

Organize Ideas

Problem Statement

Juan Pablo is a busy business engineer who needs to hire a service for his wedding because he lacks the time to do it himself.

Juan Pablo is a busy business engineer who needs to hire a service for his wedding because he lacks the time to do it himself.

Persona

Persona

I created a user journey map of Catalina's experience to help identify pain points and opportunities for improvement.

I created a user journey map of Catalina's experience to help identify pain points and opportunities for improvement.

User journey map

User journey map

Digital Page Layouts

Information Architecture: Site Map

The difficulty of finding certain information on the few similar websites was considerable, as most only operate through their social media channels, which was one of the most frequent pain points for users. The main objective in the information architecture is to make site navigation specific and directly relevant to what users are looking for; hence the chosen structure, designed to make the entire experience easier and simpler.

What we see below are the wireframes for the homepage. We can see four designs, which served as the starting point for creating the final homepage layout. As you can see, markers were used to select the elements that would later appear in the mockup.

What we see below are the wireframes for the homepage. We can see four designs, which served as the starting point for creating the final homepage layout. As you can see, markers were used to select the elements that would later appear in the mockup.

Paper Schemes

Paper Schemes

Previous design iterations focused on optimizing the user experience across different screen sizes, as most people access the internet from various devices, but primarily from their mobile phones. This is why we emphasize a responsive page layout that adapts to multiple screen dimensions.

Previous design iterations focused on optimizing the user experience across different screen sizes, as most people access the internet from various devices, but primarily from their mobile phones. This is why we emphasize a responsive page layout that adapts to multiple screen dimensions.

Screen size variation

Screen size variation

The paper page layouts were the starting point that led to the final result we see below. Most people look for information about offers and promotions. They also want to request a quote directly, expecting to receive a formal response. This is why the option to request online quotes was added, as a way to ease the user's burden and make their experience on the website a positive one.

The paper page layouts were the starting point that led to the final result we see below. Most people look for information about offers and promotions. They also want to request a quote directly, expecting to receive a formal response. This is why the option to request online quotes was added, as a way to ease the user's burden and make their experience on the website a positive one.

Digital page layouts

Digital page layouts

These are the home screens for both the desktop and mobile versions after several iterations.

These are the home screens for both the desktop and mobile versions after several iterations.

Screen size variation

Screen size variation

Lo-fi prototype

In this prototype, we can see the complete user interaction with the site, from the home screen to the contact page. The specific placement of the buttons and links was determined through iterations and approvals from the other people who evaluated the prototype from its initial stages.

Usability study: Findings

Most websites have very little information; they only feature images on social media and relevant information on related websites. Everything else has to be found out by calling a phone number, sending an email (which often goes unanswered), or, as is common these days, contacting them only through messaging apps.

Information

1

The promotions and offers that are posted are not recent. Another major drawback is that they don't publish their current prices, so users have to waste even more time calling or making inquiries through various platforms.

Promotions

2

None of them have an online quoting system; they all send the quotes via email after two or three days. This makes the waiting process slower and prevents us from moving forward with the rest of the plans for the event.

Quotes

3

Perfecting The Design

Models

The final conclusions of the usability study revealed that it was necessary to add shortcut buttons to the offer and quote screens, as many users do not want to spend more time than planned on the website. Therefore, we have decided to send them directly to what they are looking for in the corresponding section.

Before the usability study

Before the usability study

Before the usability study

After the usability study

After the usability study

After the usability study

Screen size variations

Screen size variations

I included designs for two screen sizes in my mockups, as users have greater access to technology and therefore use different devices to browse and search for information. The goal is to provide a good user experience, which is why I'm showing the homepage design for tablets and mobile phones here.

I included designs for two screen sizes in my mockups, as users have greater access to technology and therefore use different devices to browse and search for information. The goal is to provide a good user experience, which is why I'm showing the homepage design for tablets and mobile phones here.

Hi-fi Prototype

This is a screenshot of the high-fidelity prototype, which faithfully followed the iterations and changes resulting from the usability study. We can see the connections between each of the screens as the user interacts with each call to action.

Accessibility considerations

The website was designed with easy-to-see colors that create high contrast between them, so that anyone with vision problems can have a good experience.

1

I used landmarks to help users navigate the site.

2

The typography used was selected in such a way that it would not lose its sobriety or solemnity, while also being easy to read.

3

Every person who tested the design was satisfied with the results, as they were able to effectively complete the objectives they were given.

Every person who tested the design was satisfied with the results, as they were able to effectively complete the objectives they were given.

Impact

Impact

What struck me most while creating this project was that most of the other companies I researched didn't have a website, claiming that in these modern times, nobody needs a website anymore, that everything is done through social media. As I progressed with the design, I realized that many people need a website that provides clear and formal instructions, since social media lacks that formality.

What struck me most while creating this project was that most of the other companies I researched didn't have a website, claiming that in these modern times, nobody needs a website anymore, that everything is done through social media. As I progressed with the design, I realized that many people need a website that provides clear and formal instructions, since social media lacks that formality.

What did I learn?

What did I learn?

Next Steps

Conduct usability tests to further improve the user experience.

1

Conduct surveys to identify other needs and add them to the new website.

2

Improve the designs for smaller screens, adding the same features as a desktop screen.

3

Let's work together?

If you liked what you saw, let's stay in touch!

luistorresdesigner@gmail.com

luistorresdesigner@gmail.com

©Luis Torres 2025 | Diseñador UX

ltorresdesigner@gmail.com

©Luis Torres 2025 | Diseñador UX | ltorresdesigner@gmail.com