2019 ．OnRamp Lab．Family Security Service
Optimizing the User flow of subscribed funnel and online service
KidGuard is an online cellphone monitor service in the U.S. and the sole mission for KidGuard is to protect children online. It helps parents to find out some solutions on issues of cyberbullying, online predators, teen suicide, and childhood depression in the age of technology.
Design Goal
By 3 easy steps to sign up and check their children’s phone call logs of messages and other information.
Challenge
There are many similar online services in the U.S. and most of them are doing very well. But this kind of mobile monitoring service is still a new concept and it keeps growing every day. In the beginning, there were only some basic pages and a beta version of KidGuard app. I spent hours discussing with the development team and tried to understand each feature they already launched and explain to them the upcoming functions we are going to have.
Research& Progress
The service with KidGuard is kind of difficult to understand by only words and unfortunately there wasn't any image records for the market team or designer. And even the engineers have no idea how to explain clearly the whole product. Therefore, if I wanted to get to know the “Call logs” feature, I need to screenshots of each step with different devices and variants. So I spent another two days gathering each step and recreating them on Sketch so I can easily do a mockup. And I arranged a kick-off meeting with the marketing members which gave me a lot of food for thought for the future look. I found out most of our users gave up because of the nitty-gritty details while doing the signup process in KG. Therefore, simplifying the signup process became my first job.
Design Ideation
With every growing variation in technology, many parents are left wondering how to defend children in an increasingly complex world. Based on this idea, I try to give people a more positive image of this service.
Some of partnership badge design
Pop-out ads design on mobile
Since the development resource has been decreased, I created a strong and helpful core value of KidGuard from the original knight Logo. And also made sure the design was consistent.
And from at least 5 steps (or even more cause there are multiple device options) to only 3 easy steps, the performance just improved 3% in only 3 weeks. Just same as we predicated, the performance was very stunning.
Optimization of Payment page UI Design
After publishing the new updates for a couple of months, one day I was pointed to improve the funnel. Honestly, I wasn't sure what that is since that was only maintained by the marketers but "How to get the higher conversion?" question was sitting in my head in the meeting room and I have to come out with 5 to 10 executable ideas next week. Therefore, my research started again.
User Analyze & Progress
It was another field for me at that moment, from UI improvement to a funnel conversion rate optimization design. It was a big jump but to a higher view. So first thing after going through the online flow by myself, I asked the Tech team to pull out the data from the latest 30 days. It's easy to see where the users often had trouble with. As you can see in the raw data below, the number naturally dropped out step by step.
Raw data of the KG funnel
After collecting raw data from the funnel, I visualized these numbers. It's pretty clear that there is a big drop-down between the Account creating page to the Payment page. According to our CTO, these data were fired by pixel tracking and the numbers were presenting how many users finished the page.
According to the Tech team, if there is anything empty or incorrect in the field, our users won't be able to go to the next step and, of course, the tracking code of the next page won't be fired either. So the main reason for this big dropped down was probably because our user didn't finish the payment page.
But for me, it's hard to dig out the reason, we can't clearly say if they CAN'T nor they DIDN'T WANT to finish from these numbers. It's two different things since there might be different psychology. So I asked the Tech team again for pulling out the data of this each input field in this page.
Payment page and payment page CVR data analyze
However, this requirement was hard to reach because the tracking was very messy and the new tracking data needs to have waited at least 24 hours. Besides, CTO notified me that the order of each step on the payment page can't be changed or broken down because it was based on a three-party payment SDK. Therefore, I changed my direction immediately and analyzed what our competitors and try to simplify only the layout.
A/ B Testing
Based on the control (left) I've tried many layout and UI designs for the whole process. In the end, we used the simplified version for a/b testing. After running the a/b test for one week, the new variant has increased 5-10% more performance of the funnel which means the design works very well and my hypothesis was correct!
Top - Simplify Design
Left - Control
Clients: OnrampLab (inhouse)
Role: Design Lead and visual communication Tool: Sketch, Zeplin, Photoshop Date: 2017 - 2019