Bébé Voyage

Overview
Role
Tools
Platform
Timeframe
Platform
Type

Creating a bridge to convert Bebe Voyage’s existing Facebook group members into paid members of their B2C site

UX Researcher

Information Architect

Interaction Designer

Figma

Google Analytics

HotJar

Resposive web

Client

3 weeks

The Problem

Bringing the client's established Facebook community over to their website as paid members.

Bébé Voyage is a global community of 20,000+ traveling parents who share tips, tricks, and recommendations about family travel with each other on their Facebook group.

 

Wanting to create a consistent revenue stream, the co-founders asked us to figure out how to convert their community into paying members on the site.  I worked for 3 weeks alongside fellow designer Ariane, 5 stakeholders and their in-house engineer.

 

The idea for the membership started as:

 

  • Access to recommendations from local parents

  • Expert advice on kid-friendly travel

  • Webinars and premium themed content

  • Private forums

  • Discount codes from their brand partners

 

Research

After looking at competitors and auditing the client’s website, we decided to focus on revamping the homepage to funnel to the membership.

To get an understanding of what we were working with, I conducted a content audit of the site, which revealed some information hierarchy issues.  It also became clear that until that point, the site had mainly functioned as a blog, which necessitated further restructuring.

A small portion of the content audit.

A sample of the current version of the Bébé Voyage site.

A competitive analysis showed that competitors generally focused on a B2C model and had all their CTAs leading to their specific service.  The website and the idea for the membership both had a lot of different features, but we felt the strength of the competition was their well-executed and clear value propositions.  To address this with our limited timeline, we decided to focus on redesigning the homepage, prioritizing driving users towards the membership.

Understanding Users

Interviews indicated we needed to work with the client to focus the premium membership on the ambassador program.

We were given a list of stakeholders to talk to, and we sourced end users through a survey on the Facebook group.  The 6 stakeholders were generally contributors to the blog who were also active members of the group - their data was helpful, but inherently biased.  Our interview timeline coincided with the outbreak of COVID-19, so we were unfortunately only able to source 4 end users.

After affinity diagramming, we found that users...

 

     Either didn’t know the site existed or elected not to use it

     Had no interest in or time for webinars

   ‣  Were wary of paying for premium content, felt they could get it themselves

   ‣  Had difficulty navigating the existing website

   ‣  Were genuinely interested in the ambassador program & coupon codes

   ‣  Would only pay for expert access if they could directly ask questions


Users still clearly used and loved the Facebook group and didn’t seem to be interested in premium content, so we proposed that the membership be focused on the ambassador program, discount/coupon codes, and potentially 1:1 access to experts.  These were reflected in our primary persona.

Analytics

Google Analytics showed that 68% of users were mobile and 82% of users were spending less than 10 seconds on the site on average.  

We were able to talk to the data scientist on the team, who was able to provide us detailed analytics about how users engaged with the site.  The high bounce rate (>80%) showed us we had to prioritize CTAs and making simple and actionable designs for the landing pages.  


Notably, many users’ entry point to the site was not through the homepage, and rather through a specific article.  This made it clear to us that we also would have to design funnels/CTAs that could be plugged into existing articles and posts.

Ideating

We went straight to mid-fi wireframes to expedite the process and get to testing more quickly.

The analytics clearly showed we needed to design the mobile experience first because that would ultimately be the main touchpoint for future users.  We iterated a few ideas and internally agreed on the following wireframes as our general direction.  

Mockups

As a communication tool with stakeholders and to get a better read on our direction, we skipped to mockups fairly quickly, with a new visual style.

In our meetings, I got the sense it would be most helpful to present fully visually designed mockups to explain the rather radical changes we were making to the stakeholders.  I iterated a quick style tile based on their existing website design.  I pulled colors from the existing site and emphasized illustrations that had already been commissioned for the site - aiming for a more kid-friendly and modern feel.

With this style in mind, we created the first draft of our mockups for both mobile and desktop.  The client was very taken with the new direction, and greenlit the design to start testing. 

Heatmap Testing

Using HotJar, we were able to see heatmaps of how users interacted with our landing page - we had some work to do.

We posted a link to our “beta” landing page in the Facebook group, and were able to log 74 heatmaps, 73% of which were mobile users.  The numbers that stood out were…

 

   ‣  27% of mobile users tapped on a COVID article, the most taps of any  button

   ‣  1% of users clicked/tapped on the CTAs in the Pricing section

   ‣  15% of desktop, 11% of mobile users clicked/tapped “Find Your Ambassador”

 

These results indicated that the blog was still a primary touchpoint, and at this point I decided it would be helpful to design a new layout for the blog that would promote conversion.  The lack of engagement with the Pricing section and Find Your Ambassador reinforced that we needed to focus on simplifying the ask in the viewport.

The Redesign

We ultimately proposed a heavily restructured version of the site with a new IA and visual design.

Going along with the running theme of our designs, we sought to simplify the site’s navigation and information architecture.  We created a before and after site map: 

Before.

After.

After doing additional research about best practices for blogs re: SEO & user retention, I redesigned the blog and blog post template.  I also iterated and further simplified the landing page.

 

Mobile Prototype

Tap or click through the mobile prototype below:

Lessons Learned

Talk to everyone.  🗣

Especially in a situation like this, where we didn’t have much time to get acquainted with the company and the product, our early conversations with the whole team proved invaluable.  Understanding engineering constraints, the existing analytics, and the goals of the founders was paramount to making informed and business-driven choices.

Explaining good UX to non-designers is critical. 👨🏻‍🏫

We were able to collaborate most successfully when we were able to elucidate why we made a particular design decision or recommendation to the stakeholders.  It’s ultimately my job as a designer to advocate for what I think is right, because nobody is being willfully ignorant, and we’re both ultimately after the same high-level goals.

Even when time's tight, it can still be managed.  ⏱

A lot of the groundwork for us having to re-do work is that our interview script was not focused, and we didn’t define what we wanted to find out that well.  I learned a lot about how to create scripts and conduct interviews, which I have been able to use to my advantage since this project.

🙌🏼

UX teammate of the year goes to Ariane Andong

Illustrations by Camila Tubaro

Get in touch!