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.

There was a lack of consistency between iOS and Android apps, both in feature set and in visual style.

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.

This user flow illustrates the inconsistencies and use of many explanatory popups in a single user task.

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.

This is the thumbnail I prepared for our Design System.

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.

And this is the real deal, what Ahazou Design System actually looks like.

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.

Ahazou icon set

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.

These are the original screens designed for the iOS MVP, from which the Design System was derived.

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.

List of issues found on the Android app home screen.

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.

This is Ahazou home screen after the redesign, replacing the "social feed" with a "curated content" look.

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.

The new and simplified content sharing flow.

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.

The old subscription flow, with the questionable paywall that would sometimes be described as “looks like a scam”.

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.

The new PRIME subscription flow.

Placeholders and illustrations

I designed friendly and minimalistic vector illustrations for the onboarding flow, permission dialogs, empty states, progress indicators, and others.

The illustrations in use.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store