Part of the feedback gathered by Hotjar
Ubeo's New site and App
UX Research, User testing, UI Design
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.
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
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.
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
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)
I mapped out the main users’ flows to find quick ways to optimize them and consense the proposed changes with the team.
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.
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.
Once I got all the UI elements needed for my design, I started producing the final screens in Sketch. Using the design system components and material design guidelines, I started all the screens needed for the redesign.
A new masonry grid and an endless scroll for an easier product discovery.
New bidding area with information about the last 3 bidders and a less crowded call to action and top bar.
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)
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.