The final goal of this design was to increase the conversion rate to the checkout on their product page, one of the most important pages, where their users takes the purchase decision of buying or not.

Scroll down


UI/UX designer

Technical Test

Visit Website



First of all, I wanted to meet their user persona, Laura. Although I didn’t know if she was a new user, or not, I wanted to figure out her possible gains and pains when she was surfing at Colvin and find out what could I improve to give her a better experience.

Then, I analyzed the actual product page (app and web) to check the accessibility and I try to detect errors to solve or how to improve it.

Colvin Project


I also studied the competitors, what were they doing, and see if I could take advantage of any feature that I could apply to the product page, and realize what I didn’t want to do.

Colvin Project


I also analyzed their styleguide to create my own library (fonts, styles, colors, measures, icons…) to develop a design system that was going to transmit that sensation of consistency that I missed in both Colvin platforms, web, and app.

Colvin Project

Colvin Project

Having in mind how to increase the conversation rate to the checkout, I redesigned the mobile web product page basing me on the content I found on the app and the mobile web.

Reaching the goal


Header section

I redistributed some menu items and add a shopping cart and search icons.

Product section

I redesigned or/and added: shipping bar, heart icon (favorites), rating (valuable and determinant for users), access to more information, selections by default, selector test proposal (although I didn't have data to consider this option), cart button behavior, update icons and properties data, softer color palette, displayed items...

The rest

If Laura arrived here, it was because maybe she wanted to explore more bouquets. Now they are displayed in 2 columns and there's a category banner. There's also the subscription banner, Instagram pictures (offer, offer, offer…), help section has been restructured, highlighted the download app, and modified the structure of the footer section.

Colvin Project



I prepared two samples of animated elements to be used on the product page.

Bouquet size selector:

Colvin Project


“Add to cart” button behavior

Colvin Project


Also, I prototyped a simple interaction to view the selector (a proposal, test a/b). You can have a look on the following link.

Measurement and iteration

All that said, the only way to know if my proposal worked better than the previous design was with tests and metrics. Obviously, my proposal should increase the conversation rate, which was my final goal, and check if I had reached it.

Also, don’t forget about Laura: how to empathize with her and her needs. Check if the proposal worked better: is it more efficient or do I have to improve more processes? (on the product page, at the checkout… metrics, metrics, metrics!) And also, I could test a prototype with real users and know their feedback before any development or release.

Let's Work Together

Your designs need to convey the right emotions and a good experience.
You've found the right person to work with to achieve your goal.

Beatriz Terreu |
All Rights Reserved.

Back to top