Case study: Redesigning Brazilian biggest marketing assistant for small and local businesses
In 2019 I joined Ahazou as a sole UX designer and received the mission to redesign their mobile apps. The success of this project would later allow me to lead a UX team and an innovation squad.
Ahazou is a digital marketing assistant for 200k Brazilian local businesses. In a self-service approach, the startup distributes ready-made social media content for the most varied market segments.
They achieve that by connecting a community of designers and copywriters to an internal team of content curators that prepare briefings according to customer demands, trending topics on the media, and national or local holidays. Ahazou’s content offer is so wide that it successfully serves dozens of industries, from beauty to gastronomy.
Why we redesigned the apps?
A few months after I joined Ahazou, two main events happened:
1) A full-time tech team was hired;
2) We received a notification from Apple telling us that our iOS app would no longer be updated because of the use of outdated tech.
We had three months to launch a new iOS app from scratch, and the tech team would start coding it in the next week. It was an opportunity to review our feature set and check what would make the cut to the new app and what would be discontinued. Basically, a minimum viable product (MVP) definition.
Until a couple of months earlier, Ahazou would develop apps in an ad-hoc manner: each new feature would be described for a freelance developer that would implement it without detailed Design specifications.
This has granted Ahazou launching speed but also resulted in solutions with Information Architecture and Usability issues, and lack of consistency and hierarchy.
Simple tasks would take several screens to be accomplished, the lack of Design Principles and mobile UI patterns would make the team overcompensate usability issues with long explanatory texts.
But above all, the main issue was that this caused iOS and Android apps to have different feature sets.
The first version of the new app would be launched only on iOS, so its already reduced feature set should be kept. The roadmap for the following months would bring the remaining Android app features, except for some that would be discontinued.
My first move was to map all existing features in user flows, like the one below. From these flows and the existing iOS feature set, the team discussed improvement points and determined the scope for an MVP.
A lean Design System approach
For a small startup, keeping different code bases for each platform is not cost-effective. Besides, it was one of the reasons our apps had different feature sets. To solve that, the new app was going to be entirely rewritten in Flutter, a Google technology that enables a single code base to be compiled as both iOS and Android apps.
In other words: I would have to create an agnostic Design System for Ahazou, so it would deliver the best experience possible for each platform, even though the apps were not native.
With that in mind, a first version of the Design System was designed and implemented in the first three weeks.
We used a lean approach where original screens were designed according to the project scope, and from them, I would “extract” the main components, add them to the Design System and reutilize them on the next screens to be designed.
Our tech team would update the code with the new styles and components as the new screens were implemented. This allowed us to move fast, keeping consistency.
Of course, one step before starting this lean approach, a basic setup had to be prepared with typographic styles, color palettes, button shapes, forms, navigation bars, etc. Complex components specific to Ahazou would be added later.
An icon set was also designed on demand. Because of that, some subsets of icons would be consistent primarily in their given contexts. Overall, the final result was very pleasing and brought a great improvement in clarity and consistency.
The MVP
Using consistent typographic styles, a defined color palette, and following standards like Google’s and Apple’s, I was able to deliver a mobile usability compliant UI, in constant collaboration with developers and product managers. The following image shows the iOS app when published.
The MVP was launched just on time. In the following months, the team was focused on bringing the remaining key features, bug fixing, and optimizing the app with the later technologies and 3rd party integrations. This provided smoother and less complicated sign-up and checkout flows (just to name a few), which contributed enormously to a better user experience.
It’s worth noting that after the MVP launch, the Ahazou brand was revamped by the amazing Diego Justino. You can check this awesome project on his Behance projects gallery.
The roadmap after the MVP
Some features had complicated user flows and needed some special attention. I listed a few below, before and after the redesign.
Home screen
During user research, we discovered that the Android app home screen was perceived as a social feed, giving an impression that Ahazou was a “yellow pages” app where small businesses would promote their services.
Thanks to quick guerrilla tests and a round of Heuristics evaluation, all issues listed on the project briefing regarding the home screen were addressed.
By replacing the social media look with a “curated content app” aesthetics, clearer copywriting, and a minimalistic UI focused on the content, the app proposition value was now reinforced at every screen.
With a minor but effective update to the Information Architecture, I moved the calendar feature to the home screen, in a prominent position and adopting a visual that would better communicate its purpose.
Content sharing flow
The six steps content sharing flow (showed at the beginning of this article) was replaced by a simplified one, requiring only three steps.
PRIME plan subscription
Before the redesign, the Ahazou monetization model was based on a credits system: new users would receive 5 credits, used to unlock posts. You could get more credits promoting the app and bringing new users, or pay to become a PRIME member, with unlimited credits.
User’s credits balance was displayed all over the app, in purple boxes that could resemble buttons, banners, or informative labels, depending on user interpretation.
During the redesign, Ahazou business model changed, becoming a freemium service where most posts would be free to use, with a watermark. This replaced the credits model. Our product and tech teams implemented credit card payment and subscription methods provided by App Store and Google Play.
These changes drastically simplified the subscription flow and increased reliability.
Placeholders and illustrations
I designed friendly and minimalistic vector illustrations for the onboarding flow, permission dialogs, empty states, progress indicators, and others.
This comparison sheet is a visual guide to summarize the progress made on the new apps.
Conclusion
Redesigning an app is not only a matter of aesthetics and replacing old things with new ones. And although this is by far more important, it is also not only about measuring quantitative changes on user funnels and analytics panels. In this case, the redesign was needed because of external and internal factors that required technology migration to keep the company delivering a great service.
Besides the improvements in aesthetics, usability, and user experience, I’m glad to say that this redesign paved the way for an agile and more mature collaboration between the Design, Product, and Tech teams at Ahazou. In the following months, it helped the team to launch, test, fix and improve dozens of new features.
I hope this article brings some insights for your redesign projects, and I’d love to hear some feedback about it.