Claudio Merino
UX design / Strategy & Research
Made with

Ubeo's New site and App

UX Research, User testing, UI Design

A new web for the new Ubeo

Ubeo (formerly Subasta de Ocio) is an e-commerce startup based in Barcelona. Ubeo let their users get great deals on a huge selection of products. The user is competing against others users to win and get the best price for them. When they started, they were focused on auctioning leisure and travel experiences for the Spanish market. About a year ago, they move from leisure auctions to physical products and opened the platform to several countries in Europe and Latin America.

With the shift from experiences to products, the design wasn't helpful to find attractive products to the users. The main challenge we were pursuing, was to showcase the enormous amount of existing auctions and explain to the customers the mechanics of the site. This was necessary because this wasn't the typical "I want it, I pay it, I receive it" flow the users are used to in any e-commerce site.  

Ubeo is still a medium-size company and I was the only designer in the team. So, during the duration of the project, I was involved in all the roles the redesign required

1rst phase. Discovery

Interviews with customer services and clients

I started the discovery phase by conducting internal interviews with the management team to collect information about the business and with the customer service team to hear about the main user complaints. 

Those interviews I complemented it with several phone calls to current and former customers to hear first hand about their experiences with Ubeo.

The main problems I detected were:

  • Delivery times too longs

  • Confusing check out process.

  • Difficulty to find attractive products

Ubeo's new site and APP redesign

Competitive analysis

During my first month in Ubeo, I bought small products in several e-commerce competitors and screengrab all the key screens for reference and inspiration. 

I created a sketch document with all the flows and Share it with the team. This was especially useful during the early ideation process to find good and recurrent practices among the competitors. 

Part of the feedback gathered by Hotjar

Part of the feedback gathered by Hotjar

Online Feedback

To complement the user interviews, I set up an online survey using Hotjar and add them to key screens inside the user flow. I also set up the screen recording feature to review how the users were really using our site.

After receiving hundreds of feedback and review a ton of screen recordings, we were able to figure the main problems the users were facing while using the platform out


Capture from one of the user testing

Capture from one of the user testing

User Testing

Before starting the ideation phase, I did a testing round to reveal the main usability problems the old site had.

To achieve this I tested 20 different users, 10 active users and 10 users who didn't know about Ubeo. In order to recruit them, I made a google form and distributed it on social networks and between friends of friends. Among the +100 people who did fill the form, I booked 24 of them for a 1-hour user testing at Ubeo's office. 

During 1 week I conducted the user testing sessions and was able to observe by first hand some of the problems the users were having. 

Some of the issues detected were easy to solve before unveiling the new design so we did it. With some small challenges in the design, we were able to improve the experience of our customers.

If you are interested in the detail of the process, I made a presentation to a group of design students while ago. you can check it out here (only in Spanish)

2nd phase. Ideation

User flows

I mapped out the main users’ flows to find quick ways to optimize them and consense the proposed changes with the team.

First time user experience flow.

First time user experience flow.

Wireframes

At the beginning of my design process, I created wireframes, not for testing purposes but to show the desired functionality to the development team and as a baseline for the design system. 

During this phase, I create full HD wireframes of the main screens and flows in Sketch using the symbols tools and the atomic design approach for naming and grouping.

I iterate those wireframes with the management and development team, to make sure the ideas I was proposing met the business requirements and were doable from a development perspective. Once I gather all the feedback I was able to focus on the user interface design while the back-end team moved forward preparing the new APIs and sockets the new design will gonna need.

3rd phase. Design

Design System

One of the main goals of this phase was to build a design system. Inspired by the Atomic Design Methodology and using the Material design as a design framework, I collected all the elements from the site to build a reusable library to help carry a unified design language throughout all the platforms.

I built the system within a Sketch document that could be easily implemented and maintained. This document includes design guidelines such as colors and typeface in addition to all the UI elements for forms, buttons and other web elements planned to reuse.

Part of the design system used to buid the new ubeo

Part of the design system used to buid the new ubeo

UI Design

Once I got all the UI elements needed for my design, I started producing the final screens in SketchUsing the design system components and material design guidelines, I started all the screens needed for the redesign.

Main improvements

Ubeo's new site and APP redesign

Home page

A new masonry grid and an endless scroll for an easier product discovery. 

Ubeo's new site and APP redesign

Auction page

New bidding area with information about the last 3 bidders and a less crowded call to action and top bar.

Ubeo's new site and APP redesign

Checkout

A new one-step checkout that makes easier the product selection and payment in one flow (before we had one flow for payment and then another for checkout)

Ubeo's new site and APP redesign

My orders

In the former design, if a user wants to check where was the product they bought it was very difficult, and once they arrive to that area they had to go one by one to check the main information.