Claudio Merino
UX design / Strategy & Research

Ubeo's New site and App

UX Research, User testing, UI Design

The situation

Ubeo (formerly Subasta de Ocio) is one of the largest auction apps in Europe. Ubeo gives the users great deals on a massive selection of products and experiences. The user is competing against others to win and get the best price for them. When they started, they were focused on auctioning experiences and trips on the Spanish market. A few months before my arrival, they moved from leisure auctions to physical products and opened the platform to several European and Latin American countries.

With the shift from experiences to products, the design wasn’t helpful for the users to find attractive products. The main challenge was to showcase the enormous amount of auctions they were having and explain to the new users the mechanics of the website because it wasn’t the typical “I want it, I pay it, I receive it” flow the users are used to on any e-commerce website.

During my time in the company, I led the website and Android app redesign from research to the hand-off to developers.

Here I present my design process and some of the decisions I had to make during the Android redesign epic.

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 the customer service team to hear the primary user complaints. 

In those interviews, I complemented it with several phone calls to current and former customers to hear firsthand about their experiences with Ubeo.

The main problems I detected were:

  • Delivery times too longs

  • Confusing checkout process.

  • Difficulty to find attractive products

Ubeo's New site and android App

Competitive analysis

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

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

Part of the feedback gathered by Hotjar

Part of the feedback gathered by Hotjar

Online Feedback

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

After receiving hundreds of feedback and reviewing 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 testing round to reveal the old site's main usability problems.

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

During one week, I conducted the user testing sessions and observed firsthand some of the users' problems. 

Some of the issues detected were easy to solve before unveiling the new design, so we did it. With some minor 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 a while ago. you can check it out here (only in Spanish)

2nd phase. Ideation

User flows

I mapped out the primary 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 iterated 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 gathered all the feedback, I focused on the user interface design while the back-end team moved forward, preparing the new APIs and sockets the new design will 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 and 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 created all the required screens for the redesign.

Main improvements
Ubeo's New site and android App

Home page

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

Ubeo's New site and android App

Auction page

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

Ubeo's New site and android App

Checkout

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

Ubeo's New site and android App

My orders

In the former design, if a user wanted to check the product they bought, it was tough, and once they arrived at that area, they had to go one by one to check the primary information.