VIVA AEROBUS - OCT 20
A renewed digital experience to increase the sales of flights
Designed a prototype that solves critical points in the Viva Aerobús purchase process
A satisfying local shopping experience for a pawn shop.
Created a consistent design system, improved navigation, offered a second hand buying experience.
| Client: | Maxilana |
| Sector: | Pawn shop |
| My role: | Research, design and prototyping |
| Project time: | 6 weeks |
Maxilana is a Mexico-based pawn shop, personal loan, and product auction. It has 74 branches in the cities of Culiacán, Mazatlán, Hermosillo, Mexicali, Tijuana and Guadalajara.
Introduction
During the pandemic, our agency was facing a difficult period with a declining client base. To address this, I took the initiative to create a prototype to attract potential clients. My goal was to showcase the value of the project and sell the idea to Maxilana, a business that had been hit hard by the pandemic.
Maxilana's store visits and sales had dropped significantly, and its website was difficult to use, further hindering online sales. My role was to identify the potential Maxilana already had with its infrastructure and find ways to fully leverage it. Inspired by platforms like Offer Up and Facebook Marketplace, I aimed to make Maxilana’s online presence a go-to destination for second-hand shopping.
Design Process
Conducting a heuristic evaluation to identify usability issues.
Given the time constraints, I conducted a heuristic evaluation of Maxilana’s existing site based on usability principles. This allowed me to quickly identify the most pressing issues impacting the user experience.
Problem
The main usability issues identified during the evaluation were:
- Inconsistent interface design, which affected visual hierarchy and user flow.
- Forms that hindered user interactions due to unclear labels and poor error handling.
- Difficult-to-read text formats that didn’t meet accessibility standards for contrast and font size.
- Separated online and in-store inventories, leading to confusion and difficulty finding products.
- Slow loading product images, which negatively impacted performance and user engagement.
- Complex navigation, making it hard for users to locate desired products and information.
These findings formed the basis of our design strategy, allowing us to focus on solving the key pain points that were preventing a seamless shopping experience.
Challenges
The biggest challenge was time. The project had to be executed quickly, and we didn’t have complete data on their infrastructure. Another difficulty was understanding how Maxilana’s inventory system worked, particularly the split between in-store and online sales. Ensuring a seamless experience for users navigating these two channels was key to the redesign.
Solutions
Building a Design System
To bring consistency to the platform, I designed a custom design system for Maxilana. This included foundations like colors, typography, borders, and rounded corners. I then designed components with different states and properties, ensuring they aligned with the system.
Simplifying Navigation
To improve navigation, I ran a card sorting exercise with Maxilana staff and my colleagues at the agency. This helped us restructure the site’s information architecture and make navigation more intuitive, allowing users to find what they were looking for with ease.
Resulting in two of the main components of the interface, the menu and the footer.
User-Centered Design
Although I didn’t have the chance to conduct formal user testing, I gathered informal feedback from colleagues and acquaintances to refine the design. One of the key decisions was creating a filter that allowed users to view combined inventories by default but also gave them the option to filter by location for in-store products.
Technical Improvements
We significantly improved site performance by moving to Next.js, which resulted in faster loading times and a more responsive experience for users. The improvements were clearly reflected in the metrics before and after optimization.
Initially, the **First Contentful Paint** was 3.3 seconds, and the **Time to Interactive** was 13.4 seconds, both of which contributed to a sluggish user experience. However, after the transition to Next.js and optimization efforts, these metrics improved significantly. The **First Contentful Paint** dropped to 2.0 seconds, and the **Time to Interactive** was reduced to 3.0 seconds, greatly enhancing the performance and user engagement.
Before Optimization
As shown in the performance audit before the redesign, the **First Contentful Paint** took 3.3 seconds and the **Time to Interactive** was over 13 seconds. This indicated significant delays in the user experience, particularly with how quickly the content was rendered and how soon users could interact with the site.
After Optimization
After optimizing the site, the **First Contentful Paint** improved to 2.0 seconds and the **Time to Interactive** dropped to 3.0 seconds. These changes made the site faster and more responsive, directly contributing to improved user confidence and a noticeable increase in pawn payments and loan requests.
Achievements
Creating an experience where inventories avalible for sale online and in-store are combined
One of the main challenges of this project is being able to offer a unique experience of selling used auction items. Only some of the products in their inventory are eligible for direct sale online; that is why it is important to be able to show the user the garments that are available locally by adding the products that can be sold online.
In order to educate the user that there are two types of inventories, two indicators were designed that allow us to know if the product is for "home delivery" or "pick up at a branch.".
That is why it was essential to design how the user is going to select the location. In addition to always having access to the menu, a filter was created for the list of products. By default the inventories are always shown combined. Selecting the city filter gives you the opportunity to separate inventories.
Loan Service
Designing a “Lead Magnet”
In order to attract more prospects for the personal loan service, we created a calculator that helps clients know how much they have to pay and how often.
In addition, when requesting the loan, we gave the user the option for Maxilana to communicate with them or for them as users to directly forward a Whatsapp message to Maxilana to get in touch.
Reflection
Working on Maxilana was a pivotal experience for both the agency and the client. My initiative to create a prototype early on helped us secure the project during a challenging time, which ultimately led to a successful redesign that greatly improved Maxilana’s digital presence.
After the launch, Maxilana reported a significant increase in sales, pawn payments, and loan requests, showcasing the impact of the new platform. By improving accessibility, simplifying the payment process, and creating a seamless in-store and online shopping experience, we positioned Maxilana to thrive in the online market.
This project taught me the value of proactive thinking and strategic design, reinforcing my belief in the power of user-centered solutions to drive business success.