Mobile view is under maintenance. Switch to a computer with a higher screen resolution.

Dynamic Page Template for Different Clients & Marketing Purposes

Templates gives power to client's acquisition teams to customize their landing pages easily and with the utmost flexibility in order to get more user acquisition.

Start Browsing   

Brief

Overview

The templates are designed for CMS. Users can customize template color, content, element position and embed external service on their business landing pages in order to get more user conversion rate.

‍

‍

My Role

Interview users • Gather user requirements for product features. • Provide wireframe • Provide mockup • Design QA

‍

Product Core Idea

  1. A page to acquire members and promote your product and brand.
  2. Great page flexibility for different products, brands, and markets.
  3. Customize page content - create a new event page efficiently without the requirement of a technical background.
  4. Every template design is based on a defined page structure. Every page structure is constructed by defined page sections.

Understanding Problems

To understand the problems of current landing pages, we interviewed users and different roles in the team, such as POs, PMs, QAs, and developers.

‍

Users:
  1. The page designs are outdated.
  2. The styles had to be changed if the users' want some element to be moved in the layout like form being placed on right side and not on the left side.
POs, PMs:
  1. Every client provides us with their page design but most of them are similar with very slight difference.
  2. Users hardly use different templates.
  3. Users usually use the same images for different events' banner but with different slogans on them.
  4. The same image cannot be used on different templates because of different image dimensions.
  5. The template design doesn’t come from us so it’s hard to control page quality.
QAs:
  1. It is common to find UI overlapping issues in smaller screen resolutions, especially for languages with longer words.
  2. It is common to find the form or slogan covering important information on the banner in different screen resolution‍s.
Developers:
  1. It takes a long time to do minor layout adjustments because of issues related to overlapping,  such as the form covering the slogan or the character’s face on the banner.
  2. Design documents are not provided by our side so it is hard to communicate during the development process.

‍

Contents and Features in New ALP Templates

To redesign the ALP (acquisition landing page) template, we first interviewed marketing users to understand the purpose of ALP.


Purposes of ALP:
  1. Acquire new members
  2. Promote new events, products, or brands
  3. Promote the app
  4. Attract customers to the client's social profiles

‍

We came out with new ideas, integrated contents from old templates, and listed them out in 4 main purposes of ALP.

‍

Acquire new member:
  • Registration form
  • A section for registration action button to encourage the users to register
Promote the app:
  • App download section
  • App download buttons on footer or header
Attract customers to the client's social profiles:
  • Social profile on the footer

‍

‍

Page Structure

There were 13 templates. After discussing with users about page usage and the template combination plan, we merged 13 templates into 4 templates. The page will be designed based on new templates and each page is composed of 7  elements. The defined page elements help ensure that all pages can be built by CMS. In the future, designers can also construct new templates by using the 7 page elements which are dynamically adjustable.


4 templates

All the templates will be designed based on the 7 page elements: header, form, banner, content, action button section, and footer. 

Template Design & Library

Understanding the concept of the product before starting the design. In the case of ALP, the following points should be noted when designing.


Template is for all the clients -> different content, color, and content can be more or less

Template applies in different languages -> language with long or short text

Template supports different theme colors -> client's preference color and supports light / dark mode

Responsive design library -> supports desktop, tablet, mobile design

‍

Template Design

Here we take template 1 as an example: blank template, blue color, dark mode, and yellow color

‍

For better responsive design, we setup breakpoints of template with developer:

‍

Library - components

The components should be able to apply to all the situations mentioned before: different clients, languages, colors, responsive design

‍

Input box
One input box fulfills all the situations of field: field status, number of input fields, and the hint text of field

The gif shows how the library works

‍

‍

Header

Adjust the header width to fit different screen resolutions. Hide or show the elements to fit different situations.

‍

Form

A form suits all the situations: different length of slogan, different amount of fields, different screen resolutions, and different size of form.

‍

Library - color & effect styles

Every page consists of 2 kinds of color library: client's preferred color with light / dark mode. For example client A’s light mode page consists of client A’s color and light mode color.

Light / Dark color is subdivided into template, neutral, character. For example in dark mode there are template, neutral and character color.

Effect styles are for shadow and blur style. They are also subdivided into client's preferred light / dark effects.

‍

Color & effect styles

‍

Naming rules

Same naming rules makes sure that the colors are interchangeable.

Swap the color library to get another new page.

Get in touch
chiahua1114@gmail.com
+886 932315702