Shiplux - improving CTA form
Shiplux - improving CTA form
Shiplux - improving CTA form
ShipLux - a large car shipping company based in Miami, FL with annual revenue ~ 2-5$M. The website in release now and you can test it by yourself. In this case study you’ll see more detailed work - improving user experience of CTA (take a quote form).
Category
Collaborators
UX/UI design
Stakeholders, development team
Timeline
March 2023
Before booking a car shipping users can get a detailed quote online, based on their vehicle details. As this is a main Call To Action on a website, it should provide smooth and fast experience to generate more leads.
business goal
Accessibility - 20% of users are older than 65
Limited functionality (it is not possible to add several cars and calculate the cost for international transportation)
Conversion - 75% of users are completing quote after they triggered, which is not bad, but can be more (?)
👀 The Challenge
Why there are so many inputs, if it’s just a lead form?
Why there are so many inputs, if it’s just a lead form?
The key point - this form leads users to the application with detailed quote, where they can pay and book their shipping instantly. A screen “success” on a video just conditional to show you the flow.
How we might create a form that helps users to get a shipping quote smoother and faster, and for business - generate more leads?
Exotic & vintage cars owners, business owners living in the US. Including all ages and genders from 18 to 65 and more.
- Users make mistakes in the form and get the wrong price. It is necessary to reduce the possibility of error for the user to a minimum
- Add a choice of shipping to different countries, ports and cities (currently only USA and Canada)
- Add the ability to add multiple vehicles (from 1 to infinity)
Business requirements:
1. User flow map
On this stage I created user flow map to understand how and where to add new inputs. Also it helps to design screens following user flow and not to skip any part.
I looked at the websites of other shipping companies to understand how competitors use this form. However, it was not possible to add multiple vehicles or select the "deliver to port" option on any site, so I decided to look at the best practices and user’s common patterns. Booking.com, Airbnb, Google Flights and others.
I reviewed several booking websites and OTAs, such as Booking.com, Expedia, Google Flights, Airbnb and others. I took screenshots of their inputs and form models to find inspiration for a more modern way of presenting data on a website.
- Users make mistakes in the form and get the wrong price. It is necessary to reduce the possibility of error for the user to a minimum
- Add a choice of shipping to different countries, ports and cities (currently only USA and Canada)
- Add the ability to add multiple vehicles (from 1 to infinity)
- Users make mistakes in the form and get the wrong price. It is necessary to reduce the possibility of error for the user to a minimum
- Add a choice of shipping to different countries, ports and cities (currently only USA and Canada)
- Add the ability to add multiple vehicles (from 1 to infinity)
I looked at the websites of other shipping companies to understand how competitors use this form. However, it was not possible to add multiple vehicles or select the "deliver to port" option on any site, so I decided to look at the best practices and user’s common patterns. Booking.com, Airbnb, Google Flights and others.
I reviewed several booking websites and OTAs, such as Booking.com, Expedia, Google Flights, Airbnb and others. I took screenshots of their inputs and form models to find inspiration for a more modern way of presenting data on a website.
2. Best practices:
2. Best practices
Brainstorming and ideation
The project aimed to create a user-friendly web application for a car shipping company, enabling users to easily book shipping services, select various options, and complete payments seamlessly. As the sole designer, I took charge of the end-to-end design process to ensure an intuitive and efficient user experience.
Stakeholders, development
team
💡Design process:
Brainstorming and ideation
Form user flow
Before booking a car shipping users can get a detailed quote online, based on their vehicle details. As this is a main Call To Action on a website, it should provide smooth and fast experience to generate more leads.
business goal
1. Get business and tech requirements (sales process, tech limitations, etc)
2. Compose user flow and parse each user step. It helped me to understand how we can add new functionality with a minimum amount of load on the user
3. Learn best practices, similar patterns that our users might using in their life
4. Wireframes design and intermediate testing
5. Selection of accessible colors and font sizes for dark and light themes
6. UI design, usability testing and design of UI kit
7. Takeaways and next steps
Since some of our users are over 30 years old, it was very important for me to check the contrast and readability of the elements. But at the same time, it is important that the form stands out on the main screen among other elements.
When selecting colors, I used plugins and contrast checking resources. This is how the colors for the light and dark themes were selected. I also used the MD3 guidelines.
Color system:
For testing, I selected 10 respondents who met our user criteria. I instructed them to fill out the form and observed the process. Unfortunately, at the stage of testing the prototype in Figma, I was not able to see the experience of typing text. However, all users successfully completed the task.
Usability test prototype screens:
User tests:
key problems:
Form (homepage) before redesign. Iphone 13 view
Form (homepage) before redesign. Iphone 13 view
How we might create a form that helps users to get a shipping quote smoother and faster, and for business - generate more leads?
👨🏻 Users
Exotic & vintage cars owners, business owners living in the US. Including all ages and genders from 18 to 65 and more.
The key point - this form leads users to the application with detailed quote, where they can pay and book their shipping instantly. A screen “success” on a video just conditional to show you the flow.
key problems:
Accessibility - 20% of users are older than 65
Limited functionality (it is not possible to add several cars and calculate the cost for international transportation)
Conversion - 75% of users are completing quote after they triggered, which is not bad, but can be more (?)
The key point - this form leads users to the application with detailed quote, where they can pay and book their shipping instantly. A screen “success” on a video just conditional to show you the flow.
1. Get business and tech requirements (sales process, tech limitations, etc)
2. Compose user flow and parse each user step. It helped me to understand how we can add new functionality with a minimum amount of load on the user
3. Learn best practices, similar patterns that our users might using in their life
4. Wireframes design and intermediate testing
5. Selection of accessible colors and font sizes for dark and light themes
6. UI design, usability testing and design of UI kit
7. Takeaways and next steps
💡Design process:
Form user flow
1. Get business and tech requirements (sales process, tech limitations, etc)
2. Compose user flow and parse each user step. It helped me to understand how we can add new functionality with a minimum amount of load on the user
3. Learn best practices, similar patterns that our users might using in their life
4. Wireframes design and intermediate testing
5. Selection of accessible colors and font sizes for dark and light themes
6. UI design, usability testing and design of UI kit
7. Takeaways and next steps
On this stage I created user flow map to understand how and where to add new inputs. Also it helps to design screens following user flow and not to skip any part.
1. User flow map:
Form user flow
Since some of our users are over 30 years old, it was very important for me to check the contrast and readability of the elements. But at the same time, it is important that the form stands out on the main screen among other elements.
When selecting colors, I used plugins and contrast checking resources. This is how the colors for the light and dark themes were selected. I also used the MD3 guidelines.
Color system
For testing, I selected 10 respondents who met our user criteria. I instructed them to fill out the form and observed the process. Unfortunately, at the stage of testing the prototype in Figma, I was not able to see the experience of typing text. However, all users successfully completed the task.
Usability test prototype screens:
User tests
As a result of redesigning the form on the site (and the entire site), conversion increased by approximately 25%. I also asked for feedback from the customer support team and it turned out that they began to encounter questions about price and service much less often, which means it made their work easier :)
As a result
Establish more accurate metrics showing each step in conversion
We can experiment and make the form cover a larger part of the screen by embedding the form in a side window or lowering the form below the main screen. This way you can work with the space and possibly reduce the number of clicks. However, this is a controversial point that needs to be tested
Since the form on the site is only an intermediate step for the user to purchase, I would map the user's journey and present the conditions under which he can fill out this form. I would also work on the user experience after filling out the form and going to the application, which is described in my next case
Next steps
Ekaterina Pipko
2024
Since some of our users are over 30 years old, it was very important for me to check the contrast and readability of the elements. But at the same time, it is important that the form stands out on the main screen among other elements.
When selecting colors, I used plugins and contrast checking resources. This is how the colors for the light and dark themes were selected. I also used the MD3 guidelines.
Color system:
I looked at the websites of other shipping companies to understand how competitors use this form. However, it was not possible to add multiple vehicles or select the "deliver to port" option on any site, so I decided to look at the best practices and user’s common patterns. Booking.com, Airbnb, Google Flights and others.
I reviewed several booking websites and OTAs, such as Booking.com, Expedia, Google Flights, Airbnb and others. I took screenshots of their inputs and form models to find inspiration for a more modern way of presenting data on a website.
2. Best practices::
Brainstorming and ideation
For testing, I selected 10 respondents who met our user criteria. I instructed them to fill out the form and observed the process. Unfortunately, at the stage of testing the prototype in Figma, I was not able to see the experience of typing text. However, all users successfully completed the task.
Usability test prototype screens:
User tests:
As a result of redesigning the form on the site (and the entire site), conversion increased by approximately 25%. I also asked for feedback from the customer support team and it turned out that they began to encounter questions about price and service much less often, which means it made their work easier :)
As a result:
Establish more accurate metrics showing each step in conversion
We can experiment and make the form cover a larger part of the screen by embedding the form in a side window or lowering the form below the main screen. This way you can work with the space and possibly reduce the number of clicks. However, this is a controversial point that needs to be tested
Since the form on the site is only an intermediate step for the user to purchase, I would map the user's journey and present the conditions under which he can fill out this form. I would also work on the user experience after filling out the form and going to the application, which is described in my next case
Next steps
Ekaterina Pipko
2024
As a result of redesigning the form on the site (and the entire site), conversion increased by approximately 25%. I also asked for feedback from the customer support team and it turned out that they began to encounter questions about price and service much less often, which means it made their work easier :)
As a result:
Establish more accurate metrics showing each step in conversion
We can experiment and make the form cover a larger part of the screen by embedding the form in a side window or lowering the form below the main screen. This way you can work with the space and possibly reduce the number of clicks. However, this is a controversial point that needs to be tested
Since the form on the site is only an intermediate step for the user to purchase, I would map the user's journey and present the conditions under which he can fill out this form. I would also work on the user experience after filling out the form and going to the application, which is described in my next case
Next steps