As one of the most experienced designers in audibene's design team I recognized we needed design artifacts to become much more efficient while keeping the different brands' visual language consistent throughout the customer journey.
The marketing team at audibene relies mainly on online performance marketing connected to weekly A/B test of landing pages and registration forms. The reality of such a fast-paced environment is that the design team needs to produce a large number of assets in very short periods of time, often leading to production mistakes, general inconsistency, and redundant work.
A recent rebranding of the company presented also an additional challenge to our workflow. Unifying our (visual and written) language was more important than ever. Consistency wasn't going to be achieved through thorough design checks (reaction), but rather from the beginning of the design process through a set of templates and artifacts that set designers on the right path (preemptive action).
For most of our A/B tests, we used a secondary brand looking almost exactly like audibene with the goal to learn as quickly as possible without damaging audibene's brand. This secondary brand was our experiment area, yet we spent most of our marketing resources in it.
Winning tests would be modified and implemented on the audibene brand. However, we would always run the risk of implementing something that simply wouldn't work for audibene after adapting it to fit the brand.
After audibene was rebranded, and the secondary brands' performance stagnated, we saw the opportunity to revamp the secondary brand. We continued testing, but audibene was used more and more to gather learnings. This meant that both brands webpages and ads could finally be noticeably different and meet different kinds of customers.
For the redesign of the secondary brand landing pages I looked into heatmaps, conversion rates, and into competitors and examples we wanted to follow. The pages needed to look editorial.
I proposed three simple but fundamental changes that gave us a conversion rate uplift above 10% and turned my design into the new best performer.
With the new design for the landing pages defined, and the changes needed for registration forms, success pages, and other pages, the timing felt right to start a components library for this brand.
The library helped other designers who weren't so knowledgeable about web design produce mock-ups that were consistent with the overall design and didn't create additional challenges or friction with the developers.
Besides the component libraries I also created a couple of landing pages templates. This helped other designers take over CRO projects, spending less time being concerned about the mock-up accuracy, and more time focused on the actual task.
These artifacts helped me reproduce changes very quickly as well, and with the help of the designers, we kept nurturing this and other component libraries with new elements from winning tests. We had now a culture of proactive sharing and keeping track.
I had now more time to spend creating clickable prototypes and focus on interactions.
When the time came around to refresh audibene's web pages I was prepared with learnings from the secondary brand revamp. The pressure was a bit high though, because the redesign of the audibene pages needed to happen, with or without stable performance – no tests, straight up rollout after rollout.
To make things more reassuring, I decided to keep the basic placement of the most important conversion elements, while spending more effort on the visual style of elements like buttons to communicate better their interactive affordances.
And exactly as it happened with the secondary brand, I started collecting elements in two component libraries. One for web pages and one for emails, containing tokens, atoms, and molecules, in different languages and sizes. Templates were also created and shared and the team made more efficient.
