THE PROJECT

 

More than 50% our users comes from mobile device. However I’ve discovered that our landing page template for redeeming the voucher is not really mobile friendly.

 

 


 

DESIGN PROCESS


 

PERSONAS  +  SCENARIOS

 

Based on our customer profile datas, the main customer for Double Wear foundation is around 22-46 years old. I’ve  identified most common personas which have different needs and goals for improving the mobile experience.

 


 

TASK FLOW

 

I’ve created a flow to define the user journey. Based on this flow, I’ve made the mpp banner on the landing page to direct to the form section. Once user click “TRY IT FREE”, it will scroll down to the form and users can feel responded. It’s a simple way to add in HTML and CSS when we build the page.
The voucher has been re-designed in portrait so it’s easier to read on the mobile.

 

 

 

 


GUERRILLA USABILITY TESTING

 

 

I’ve done a guerrilla usability test on the mobile device to see what might occur to general users.
The users are between 26 to 42 years old females.

FEEDBACKS
  • The page is not working well on the mobile.
  • After clicking the TRY IT FREE button, but it doesn’t do anything.
  • I landed from email, I was expecting to go to the form but I’m confused to find it.
  • The product provides free example is very tempting, but I can’t find where to claim the voucher.
  • I can’t claim the voucher on mobile since the page looks buggy on my phone.
  • The voucher seems buggy on the mobile.

 

 

 


THE SOLUTIONS

 

The mpp banners directed to the same page which causes a lot of confusion for the users.
Users who wants to try the sample once they click “TRY IT FREE”. Then they will find confusion since the page stays the same page and nothing comes up. It causes a lot of drop-off from this stage.

Users didn’t realise that they need to scroll down more to find out the form to fill and click to submit to go to the voucher page. I’ve added an anchor on the form section, so no matter where users come in from, it should direct to the form straight away.

Also the landing page and the voucher should be designed mobile-friendly too.

 

 

 


WIREFRAMES

I’ve designed the user journey and flow to establish the best method to achieve this, and the result proved to be very successful, the traffics visited the voucher page have been much increased.

 

 


DESIGN MOCK-UP

 

 

 


 

PROTOTYPE

 

 


 

 

THE RESULT

 

The feedback came out really positive that it successfully reduce the bounce rate on the landing page. And the users can now download the voucher on their mobile device.

The template has built in the CMS so the client can use this template for further promotions.

Bitnami