OYNB

One Year No Beer (OYNB) is an alcohol prevention program that helps people change their relationship with alcohol. The program's goal is to help members become healthier, more productive, and more present by cutting out alcohol.

product design

web design

behaviour-change

Goal

The primary goal of this process is conversion rate improvement (2% min. uplift). I applied the JTBD framework due to its heavy focus on versatility and the user's economic behaviour.

Secondary goal was updating the design to match a mobile-first approach.

Initial Exploration

When the kickoff meeting took place, I have already been experimenting with different value propositions via A/B testing. Based on several months worth of tracking data and existing user flows it became clear that making the initial user flow simpler is the first step towards the larger goal of improving conversion.

Following this, I sketched out a rough simplified user flow that locked the users in the product page in the first iteration.

User Research

I started conducting exploratory user interviews with newly signed-up members. The structure was informal and open-ended, with little to no "Yes/No" questions involved - resembling a guided chat rather than a structured interview.

During the interview, I asked questions pertaining to the jobs the user was trying to achieve, the inertia leading up to purchasing and the push they were experiencing.

Recordings were parsed and analysed via Grain and Otter and were further used to inform the behaviour mapping.

Jobs & Pull Mapping

After processing and tagging the interview recordings,

I mapped out the findings on a User Journey Canvas, following the *See-Think-Do-Care* framework in conjuction with JTBD.

I chose to alternate direct quotes with overall themes so the users' specific language could be captured.

The cards were also grouped by 'trends' within the larger categories, following a brainstorming session. Being able to identify 'trends' like this also provides insight to changes to the product itself further down the line.

Initial wireframes

Following the card sorting into groups, I developed copy and an initial layout that addressed user pains and product 'pulls'.

A strong H1 seemed paramount to encourage users to find out more, bringing the 50% scroll drop-off point further down the page compared to the previous build. The second section tackles the pains (or 'pushes' in JTBD methodology) head-on, with the most disruptive ones being prioritised.

First-time users reported being inspired and swayed by the testimonials advertised in the Success Stories section of the website, so the team and I sourced and included meaningful snippets as an added social value.

Comprehension & high-fi

Within the user feedback sessions, there have been reports that the original visuals being too masculine, "scammy" and seeming untrustworthy.

For this iteration I chose to follow a subdued colour-palette, using it sparsely to highlight attention foci and section breaks.

I opted for a simplified, neutral layout to declutter and box in the copy for accessibility. (this approach also helped produce clearer heatmaps down the line as sections became more clearly defined).

Results & Next Steps

Once I reached the final build, I set up an Optimize test with 50% of the traffic allocated to the new variant.

After a 2-week testing period, there was a clear trend of improvement in 'Add to Basket' events, purchases and bounce rate. Qualitative tools such as Hotjar showcased the traffic drop-off line to further down the page.

Next steps: While this is only the first iteration out of several, the results seemed promising enough that in the retro meeting the next steps included a full web remap & redesign, as well as defining the next 5 experiments in the backlog.

Next build: The successful test has set the basis for the entire site rebuild, which prompted me to create and organise a component library that will inform the structure of upcoming content. The library will improve user testing and prototype creation timelines for the upcoming iterations.