MJC Landing page.
Product
Landing page
Role
Lead UX designer
Duration
1.5 month
Developing Landing page
for a new product promotion
Together with a launch of MJC, active promotional strategy was required to boost conversion rate to increase traffic. Our task was to develop a landing page for promotion of MJC’s launch.
Goal.
increase traffic and conversion rate through landing page promotion
1. Advertising MJC’s brand and promoting bonus rewarding system.
Intention of developing a landing page is primarily to build brand awareness and to promote the rewarding system. The main keys here are the content, which should be informative and fun enough to engage a customer and hopefully get them to click on the call-to-action buttons to sign up.
2. Increase traffic and conversion rate
With an effective UX and strategic information, we challenge to increase traffic conversion.
3. Making a landing page template
This product is not for one-time usage. It’s designed as a scalable and reusable landing page template for the future promotions as well as promotion of new brand launch.
Role.
I took full responsibility for this project
UX design process
I’ve created whole design deliverables throughout the process; from ideation, sketch the concept, low-fidelity wireframe and final screen design to user-testing and survey.
사용 프로그램
Figma로 작업을 마무리했며, Zeplin을 통해 스크린 쉐어링을 하였습니다. 모든 커뮤니케이션은 Slack을 통해 이루어졌습니다.
Visual design
By following MJC’s design system and creatives, the consistency of visual appearance has built up.
Collaboration
I mainly collaborated with Marketing team for gaining understandings of the customers and brand identity. Also constant communication with Front-end developers was essential to achieve the feasible design.
DESIGN PROCESS
Research and benchmarking
Understand the needs and define the problem that needs to be solved
Conceptualize and ideate
Generate ideas and concepts for a potential soltuion
Deliverables
Create a physical representation of the solutions
Test and evaluate
Test a prototypes and gathering feedbacks
Reverse
Developement
Designs are sent to Development team and it's under developed.
QA test
Developed issue is tested in QA team.
Staging
Evaluated by QA, the project is deployed to staging.
Reverse
Design Process #1
Benchmarking.
Learning from competitors
smart benchmarking
Benchmarking and pinpointing
PO (Product Owner), 마케팅 팀
Together with Marketing team, we benchmarked the other brands landing pages and collected several examples. We took them as users perspectives and pinpointed what we liked about the page. We identified what draws customers attention and what can be applied to our landing page. This session was important for me as a designer to understand what marketing team wants to deliver from the landing page design as well as grasping customers needs.
Design Process #2
Sketch.
Establishing design foundation
Marketing team provided the contents of the landing page such as good copy of brand introduction, promotions, and rewarding system etc. To determine layout of the landing page, we prioritized them and rearranged the contents. This content layout is for the first iteration design and to be tested by real customers to validate for improvement to the final design.
Content rearrangement and sketch
In order to prioritize and categorize the landing page contents from marketing team, I rearranged each element and made a layout of the landing page. Based on the content layout, a brief sketch of low fidelity wireframe was made.
Design Process #3
First iteration.
First iteration design for user test
Design Process #4
User test.
“How would real customers think about the design?”
We directly asked customers
Survey
PO (Product Owner)
Now it’s a time for us to make sure that all of the hard work translates into sales and to take a usertest to hear their voice.Firstly, we took a survey the real customers. We sent out the first design to targeted people on the mailing list, who are male in their 30-50s but not signed up to MJC yet. The CTA is redirected to the sign up page, and 3 simple survey questions are asked before the first step of registration. Whoever takes the survey would get complementary 5 free game coupons.
Task
Q1
How would you rate the design of the landing page?
Q2
Was the MJC loyalty program clear to you?
Q2-1
If not, what made the loyalty program unclear to you?
Q3
What are the attractive features of promotion to you?
We gave a week to get the data collected, and recieved considerable answers from the test. Below is the result of survey.
Analyzing customers' interests based on data analytics
Quantitative test
Beside of the survey, we also had a close look at heat maps and engagement zone maps to to see combined click, scroll, and move maps which helps us understand the elements that attract the most attention and interaction. By using Google analytics, we also had a close look at heat maps of movement and scroll to see if each content draws attention enough and has interaction with visitors.
Complete design based on data analyzing
Data analyzing
By analyzing survey and heat maps, we could have a meaningful insight of pros and cons of the first iteration design.
Pros
· They actually like the bonus offers.
· The visual appearance represents brand’s identity. Look and feels attracts male audience.
· They want to have a sense of security while playing games in new platform. It's a plus when the platform is trustworthy brand and has good reputation.
Cons
· They do not tend to scroll all the way down especially on mobile.
· They want to avoid reading the long and complicated promo copy.
· They ignore the video.
· Loyalty program is not clear enough. It should be more simple and straight forward.
Result
1. Kudos on visual design.
2. Bonus offer stands out enough, and it should be in the header just like it is now.
3. Make all copy simple.
4. Make video auto-play and place in the header.
5. Bring the Loyalty program above. It‘s reasonably gaining audience’s attention yet positioned too bottom, where they tend Not to scroll up to there.
6. Be more focused on audience’s interests. Get rid of the rest - 700+game and Jackpot promo, it only makes the page crowded and our players do not want to read a long text.
7. Keep why play with MJC area.
Design process #5
Final designs.
By applying the conclusion to design, we successfully moved the final version of landing page to staging.
· The bonus offer goes at the top of the page.
It intrigues the customers interests the most, and actually make a move to call to action.
· Consistency
Landing page design preserves consistent visual look and feel as MJC’s homepage to imprint its brand identity.
· Simple and clear description
I removed the promotional video due to low attention from customers. Instead, using image and short copy for promotion and rewarding system is sufficient enough to have users awearness about our offer. Simplicity keeps a visitor focused on the goal rather than distracted by multiple links that take them away from the page.
· Scalable template
his product is not for one-time usage. It’s designed as a scalable and reusable landing page template for the future promotions as well.
· DAU 1000+, sign-up conversion rate higher than 10%
After putting the final design on stage for the first distribution, we have achieved success on the traffic incresement and higher conversion rate.