Redesigning the MaxMilhas shopping flow
Early in 2017 I joined MaxMilhas’ product team with one mission and big challenges: help Antônio Araújo to rebuild and redesign the company’s main product — it’s website.
Update
The Redesign in ON and at full speed! Almost a year after and a lot of work from the Design and Engineering teams, the project is finally live! Click here and check it out first hand!
About MaxMilhas:
Launched in 2013 and based in Belo Horizonte/Brazil, MaxMilhas is a tech startup that connects people who wants to travel and save up in flight tickets with the people who wants make extra money by selling their flight miles.
MaxMilhas have experienced fantastic growth, quadrupling it’s size year after year and increasing it’s market share in an exponential way. The MaxMilhas main product, it's website, has currently about 300.000 registered users and more than 5 Million unique page views per month.
Despite all the success of the company, the product hadn't changed in the past 3 years, while all other user touch points have. The product felt overpast and out of line with the current brand identity and tone.
Do what you can with the resources you have:
In an ideal world, it would be awesome to rebuild and improve all the UX, applying all the Design process: starting with research and UX and iterating it up until the final visual design. Although ideal, this was impossible to be done at the time due factors like team size and business strategy.
The product diagnosis we done was:
- the product was supporting the company’s growth;
- the product was generating revenue;
- the product’s visual design was very outdated, especially when compared with it’s competition;
- the product’s visual didn’t reflect the company’s values. language, ideas and ambitions anymore.
Keeping it in mind all the limitations that we had, the team made the decision to put our efforts in the bigger pain point and also the one the would deliver most value: redesign the product visual, improving just the essential points in the UX.
Starting from the beginning
The first thing we did was to create the bases for an UI Kit.
This was a very rough version. It was good enough to set the tone and guide the project and also basic enough to not consume too much time and to leave room to iterate and make changes when needed.
At this point we also made the decision that we would built the product's interface using a card based approach. Each component is contained in a card, creating a clear delimitation to what part of the interface is, and what’s it's content.
The process
After mapping and breaking the project down we started effectively designing the product. The whole process was based on iterations and continuous validation. For each flow we worked through assessments, concept, designing, prototyping, and validation.
From the start we knew that we wouldn’t be able to make everyone happy, but we wanted to address the needs of the most amount of users, and cover the most screen sizes possible. We focused our design decisions in the main devices the our users use to access the product. Backed by data we ended up making a controversial decision, but we think was the right one: the project wouldn’t be mobile-first, we would apply graceful degradation instead.
The process was long, but in end we were able to build a visual design that looked fresh, modern and that reflects the MaxMilhas’ identity, ideals and vision of future.
Home Page
At the Home page we needed to address two very important factors:
- The home should explain to the user how our business works, inspiring trust and making it clear that MaxMilhas is the best option fot buying cheap flight tickets.
- As the product’s main goal is conversion, is extremely important that the Home Page clearly guides the user right into the sales funnel, and for us, that means search for a flight.
In order to balance this two goals, we designed a Home Page that puts the main spotlight in the search form, but that also, tells the user why MaxMilhas is the best place for them to buy flight tickets.
In the first folder we present the value proposition and short, lazer focused business arguments, alongside with the search form. The rest of the page is focus on explaining a little more about how MaxMilhas’ product works, how the company is able to sell flight tickets so cheap compared with other OTA’s and travel companies. We did this in order to build trust, and then guide the user back to search form.
Search Results
The core of MaxMilhas' product is it's search results page. At this point we have a very separating bar between the users that will follow through the funnel and eventually will convert (now or in future sessions) and the users that may abandon the search now and never come back.
We designed the page in order to make more clear what were the flights information, while putting a spotlight on the price tag and showing more tickets per folder.
Passengers information
After choosing it's flights, the user now will go through the steps of Log-in and then filling all the passengers information. This step is very important as it has a huge impact on the risk analysis. Also, here, is when the user chooses to "buy" extra luggage or not.
What we did was to restrict the fields needed to minimum and make clear and easy to spot what information was needed. We were extra careful in making sure the users know if he had "bought" extra luggage or not.
Payment
The payment page was a very sensitive one. We didn't too munch control over what it is and is not in this page since it is a very business-heavy one. What we did was to clarify the information needed and also split the initial "method of payment" decision and full payment form in two distinct moments.
Throwing out weeks of design work in order to save months of development
After spending weeks design a new and well polished FAQ and Help Center flow, we faced the hard truth: the development of this flow would be just too expensive, and it probably delay the whole project by months. It would be just inviable. There were better solutions available on the market, solutions that would be super fast to implement and that also would improve the whole Help Center experience in so many more levels. So, we ate our pride and made that better decision to the company: we killed the FAQ and Help Center design we just had finished and were so happy about, and choose to implement Intercom (an awesome solution by the way).
Product design is way more than just drawing pretty interfaces, it’s about making tough choices, it’s also, sometimes, to take a step back, reevaluating early decisions as soon new information arrives and taking the best choice.
It’s no good if it doesn’t work on Mobile
As I pointed out early, we didn’t designed this project mobile-first, but it doesn’t mean we didn’t care for mobile. The project was responsive and while it worked well in all devices, we focused in providing the the best possible solutions for the 360x640px devices (more than 80% of our mobile traffic was from this screen size).
Bellow there is a link to the functional prototype for the mobile home and search results page. We ended up building a slight different experience for mobile, one that delivered a munch focused "one task per screen" and therefore easy to use experience.
Conclusion
The redesign project was very successful. We were able to update the product identity and make it clear, fresh and aligned with it’s brand tone. We also improved the overall experience, specially the mobile experience and the clarity of the shopping flow.
