iForm redesign

We were tasked with testing and optimizing a campaign and the checkout process of iForm’s subscription.

Our approach

Since we had a product that was basically ready, we started with testing the existing campaign site, then create a prototype with the new features (based on assumptions being disproved or verified), and test it again.

Information we had initially, insights from client meetings

Nikolaj showed us a very detailed report about conversion rates and where users turn back the most. With that information in mind, I did 3 in-depth interviews and 1 think-aloud test to try and make connections.

The problems we found could be divided into two groups: they are either something we can, as designers, directly fix, or it’s related to other areas, like marketing.

Areas of improvement that are directly related to the checkout process:
  • Emphasize it to customers that they can unsubscribe at any time
  • Providing a size chart
  • Swedish in Danish text (“För”)
  • Showing all buttons at all times but in an inactive state when its not ready for use
  • “Go back” needs to be on top instead of under the button.
  • Visually differentiating between the saving and the price on the cart overview page
Other possible areas of improvement that we discovered during the initial tests:
  • Free shipping
  • Digital subscription
  • Communicate the next step after the introduction offer expires
  • Thank-you e-mails
  • Loyalty offers

The design changes

On the 1st page...

we emphasized that customers can unsubscribe at any time by splitting the last list item into two, and separating them with a header that says “What happens after my intro period expires?”.

We also added the original price with a strike-through, and included shipping in the total price, as user testing pointed that one out as a potential issue. You can read the full interview here >>>

We need to emphasize it to customers that they can unsubscribe at any time – verified, changed.

Read user input about:

“I’d rather see the original price than how much I’m saving. So I don’t have to calculate if it’s a good deal or not.”

“I really like the ‘show my savings’ option, it is very clear imo”
But after showing her the strike-through version, she said:
“I think it looks better this way. It makes the ‘customer’ look at the what it would have been first and then you see the new price without the stripe through it”
So strike-through price and savings are now both included.

“I don’t wanna pay 50kr for delivering 4 magazines and a jacket.”
Therefore we included shipping in the original price.

“What happens after the subscription should be earlier in the process”
We need to emphasize it to customers that they can unsubscribe at any time – verified, changed.

Original

Redesign

On the 2nd page...

Our assumption for the need of a size-chart was disproved. However, if implemented properly, I think it’s relatively risk-free to include it. So I’d add it regardless, in order to cater for cases that our sample didn’t cover.

Read user input about:

Interviewee 1 cruised through the size selection without any issues. Upon being presented the idea of an inactive button, he liked it, and pointed it out that it could be especially great for older target audiences. He didn’t need the size-chart, and neither did the rest of the users mention it.

Original

Redesign

On the 3rd page...

Corrected “För” that was in Swedish.

We added the original strike-through prices here, too, due to user test results. We also added a “price per magazine” line, in order to clarify pricing. 

We also placed the “See savings” link a little bit further away from the button, so it’s easier to tap the right one, reducing possible frustration caused by navigating to an unexpected interface.

Read user input about:

“I trust the “most popular” title, I’m assuming there’s an algorithm that calculates it, and it will change? Or is it just something you guys write there? It’s totally just something you write there.”

“What does the subscription normally cost? What does one magazine cost?”

“I’d never pay 8 months because it costs 37 kr for one magazine with the 4-issue package. To swap to the 6-issue package, I pay 50kr more for 2 more issues. And then it costs 100kr to get two more again with the 8-issue package. I’m not sure if the 8-issue package is too expensive or the 4-issue package is too cheap, but usually the more you order the cheaper it gets.”

Original

Redesign

On the 4th page...

Our assumption regarding the layout of the pricing got verified here so we redesigned the cart page, to visually separate total price, savings and product information, in a way that would work with multiple products, too. You can see that on our early prototype version.

Additionally, there’s now an option for digital subscription with which the user can save the price for delivery. However Nikolaj pointed it out, that the jacket still needs delivery, so in this case users should get an extra magazine as a “gift” instead of a physical product that needs shipping.

Read user input about:

“I understand from the list that the discount code is going to be subtracted, but then what about the color of total price? That should just be black.”

Original

Redesign

On the 5th page...

Our assumption regarding the “Go back” button being closer to top got disproved. None of the users struggled even remotely with finding and pressing it.

On the other hand, one user said the placeholder of the “Address” could be changed to an example of what’s expected from the user, like “Eksempel gade 16”.

Read user input about:

“I saw some places fill the city in, if I give them the ZIP code. I hate these long forms that I have to fill out, and if it can fill something in automatically for me, well, that’s great.”

– Might be beacuse it’s in Danish, but when you are putting in your details, your address says “must contain a number”. Not completely clear on this, might be me not understanding Danish.

– Would you expect to put the house number in another field, or why?

– As i said, might be lost in translation… if the address field is empty it says “skal indeholde et tal” which i think means “must contain a number”. It just strikes me as kinda odd that you must have a number in the address field. I know you need to have it for the full address but i don’t think I’ve ever encountered a warning about it needing a number. However, if we’re gonna be real technical, its a good thing that they have that check. I think as a programmer it would be an easy oversight to check that the address field must contain at least 1 number.

– Yeah, i also think that it comes from a validation pattern and then a user friendly warning about it, which then just comes off weird, since it focuses on the number. Would you rather see a placeholder fx “Example Street 12” ?

– Yes! Deffo have a placeholder example rather than the placeholder being “adresse”

Original

Redesign

On the 6th page...

“Emphasize it to customers that they can unsubscribe at any time” – when our users got here in the process, they verified our assumption about having to communicate what happens after the introduction period earlier. Therefore we made the changes we made on the first screen.

Read user input about:

– Did you read the terms for the subscription?
– No? It looked like that general legal stuff that comes with accepting terms, etc.

*after reading*

– Okay now it makes sense, but this should be somewhere earlier in the process. I want to know what happens after I got 4 magazines – is my subscription just over, or it continues with the normal price, or?

Original

Redesign (earlier screen)

On the 7th page...

Our users completely ignored the thank-you page, so we suggested that instead of summarizing everything here, send a thank – you email. However Nikolaj pointed it out, that the thank-you page is actually a great place for upsale, so it’s definitely not to replace.

With that in mind, we suggested a short text that summarizes details of the agreement (instead of personal information), as well as communicates what happens after the introduction period expires – again.

We also suggested a loyalty offer from other partners, or other digital subscriptions, in order to keep customers longer than the first 3-4 months, because in his presentation, Nikolaj mentioned that the longer the subscription lasts, the more profit.

– Did you read the thank-you page?
– No, I never read those.
– Would you like an e-mail about it?
– Perhaps an email about the details could be nice, like, thank you, here are the details of your subscription. After 4 issues, the fee will increase to 310 DKK.

Original

Redesign

Code

Our coded prototype was made using HTML5, SCSS, JavaScript, Git and GitHub. See some of my code on CodePen: