Ubeo’s New site and App

01. The situation

Ubeo (formerly Subasta de Ocio) is one of the largest auction app in Europe. Ubeo gives the users great deals on a huge 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 countries in Europe and Latin America.

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.

1. Research

User Testing

I started this project by conducting user testing in the office with the rest of the team observing some of the sessions. This activity helps me to spot some of the worst usability problems the former app had. For the team, was a mind-blowing experience to watch the users struggling to complete the given tasks.

Some of the issues detected were easy to solve before unveiling the new design, so we did it. With some small changes in the design, like increasing the text contrast, we were able to increase the number of users going from won auction to paid auction by 8% among other improvements

If you are interested in the details of the process, I made a presentation for Ux students that you can check it out here (only in Spanish)

Other activities conducted in this stage:

  • User interviews: I conducted several interviews with the management and customer service teams to align the business requirements and get a better understanding of the main user complaints received by customer service.
  • Competitive analysis: I bought small products from several auctions and e-commerce competitors to analyzed their strengths and how they resolved the design problems we were facing.

2. Ux design

User Journey Map

I mapped out the main users’ flows in order to find quick ways to optimize them and agree on changes with the team.

User flows

I mapped out the main users’ flows in order to find quick ways to optimize them and agree on changes with the team.

Wireframes

I created full HD wireframes of the main screens and flows using the atomic design methodology for creating all the reusable elements and components of the new app.

I iterated those wireframes with the management and development teams, to make sure the ideas I was suggesting met the business requirements and were doable from a development perspective. Once I gathered all the feedback, I was able to focus on the user interface design while the back-end team moved forward planning the new APIs calls and sockets that the new design needed.

3. UI Design

Design System

One of the main goals of this project was to create a design system. Based on the Atomic Design Methodology and using Material as a design framework, I set the foundations of the design system that allows us to build reusable components and unify the design language throughout all the screens.

Screens mockups

Once I got all the UI elements needed for the project, I started producing the final screens

Main improvements

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

Home

A new masonry grid that allows the user a better visualization of the running auctions and an endless scroll for improving the product discovery.

A bid from the feed button that allows the users to place a bid directly from the feed instead of the product description.

Auction page

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

Checkout

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

My orders

In the former design, if a user wanted to check where the product they had bought was, it was very difficult, and once they reached that area, they could only see the information about their order one at a time.

What have I learned?

In my 14 years working in the Ux field, this was the first time I worked inside the development team. Most of my career has been carried out in the consultant area or as a partner in design studios with limited scope and hours per project. Working full time inside the company allowed me to dedicate more time to the discovery phase and get clearer and faster retro-alimentation from the management and development teams during all the phases of the project.