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

Create a One Page Acquisition Site for your On-Demand Business.

A system for your team to build, review and publish acquisition pages. Users can customize the page for their companies/brands with the templates for their marketing purposes. The whole building process is effortless!

Start Browsing   

Brief

Overview

This product integrates the data of the content management system and provides users to build and manage acquisition landing pages fast and easily. The team builds the system base on Ant Design and the mockup is built in Figma. Designed in 2021.

My Role

Research users • Provide user journey • Provide wireframe • Design mockup • Provide information architecture           

Product Core Idea

  1. Complete content review and publish process 
  2. Dynamic design for different kinds of businesses 
  3. Simple and intuitive UI
  4. Live preview - what you see is what you get

Problems

According to my past collaboration experiences with POs, PMs, and interviews with users, I was able to find the following pain points of the current product.

  • The users have to make a new page every time when they do minor changes of contents (ex. slogan and banner). 
  • The barrier of learning how to create a landing page is quite high.

‍

Understand the Product

Before redesigning the product, I interviewed PMs, developers, and researchers to understand the product from the following perspectives:

  • The purpose of every setting and element
  • The current flow 

‍

User Research

The product’s current users, who are from the acquisition team, were interviewed so that I can understand what they think of the product flow from creating to publishing landing pages. We separated the interview into two sections: usability testing and business logic understanding.  

‍

Interview Process:

  1. First section of interview is usability testing for current create page.
  2. Second section of interview we were mainly focused on user's working process and business logic of management process since the product didn't have review process.

Focus points:

  1. What are their desires at every stage.
  2. What are their emotions and thoughts at every stage.

‍

We integrated the 2 sections of interview results into 2 user journeys.

These are the problems or needs from 2 interviews.

Main problems of creating a page:

  1. Lack of description
  2. Lack of UI interaction
  3. Lack of completion progress
Need for adding content management process:
  1. To know what pages are ready to send to review.
  2. Avoid accidentally publishing incorrect content.
  3. Users can duplicate the page, do minor changes and straight away publish.
  4. Know the reason for a rejection or unpublishing a page, which earlier users didn’t get any feedback.
  5. Archive pages for future reference

Design Goals

Based on the user journeys, we came out with solutions:

‍

Product that is easier to understand and operate
  1. Users can predict how much effort is needed to create a page.
  2. Users can predict what they might get after setting.
  3. Blank state for no data interface.
  4. Avoid using terminology and add more descriptions.
  5. Visualized template module.
  6. Users can know which part they are operating in the live preview.
  7. Restructure the layout of content settings to be understandable.

‍‍

Establish a fault tolerance mechanism
  1. Users can know what contents are needed to set up a new page.
  2. Users can create new contents without leaving the flow.
  3. User can go to next step only if there’s no error in current step.

‍

Enhance the flexibility of the product
  1. Users can change slogan and form position to meet different banners of multiple events.
  2. Users can set different color and light / dark mode of a page for different brand and market.

‍

Enhance the process of managing content
  1. Users can check page’s URL setting related information easily on list.
  2. Users can know the reasons why the page is rejected or unpublished.
  3. Users can always review the page before publishing.
  4. Users can do reject or publish fluently in the flow.
  5. Users can update domain whenever they want to add or remove.
  6. Users can archive currently unneeded contents instead of deleting

‍

Information Architecture

Before designing wireframe, we built IA to reorganize the structure and recheck with the team about all the functions.

Final Outputs

Designed the wireframe and flow document for the team and users to review. Once the wireframe was passed I designed the mockups.

‍

Create Features

Enhancement 1: Setup Step by Step
  1. Group all the similar type of settings and complete the whole flow into 4 steps so that it's easier for the users to understand.
  2. Guide users through the complete journey of creating a page. From the 4 steps, users can know what information is needed for them to create a page and how much time it will take for them to complete.
  3. The “Next” button is clickable only if there’s no error in the current step.

‍UI Interaction

‍I marked interaction details on flow document.

‍

Enhancement 2: More Description & Short Cuts
  1. For the settings which requires more technical background, I avoided using technical terminology, and instead added more descriptions and examples which makes it easier for the users to understand.
  2. I provided various short cuts to the users to create additional content within the flow so that they don't have to leave the current flow anytime during the process of creating a page.
    ‍
UI Interaction

‍

Enhancement 3: Page’s Flexibility

  1. User is free to set page’s main color according to their brand theme, etc.
  2. User has the flexibility to decide which templates are more suitable for their pages.
  3. User can enable or disable dark and light mode as per the market requirements.
  4. User can adjust the position of the form and slogan to match the banner in the background.
UI Interaction

‍

Enhancement 4: Live Preview
  1. I highlighted the sections in the live preview as and when the user hovers or select for better UI feedback.
  2. Decide banners’ sorting order by simple drag n drop right within the list.
  3. To give the users better idea of how the content will look like after they select the template, live template shows dummy data for their reference.
UI Interaction

New Feature: Page Management

Feature Introduction:
  1. Tab’s position indicates content publishing flow (Unpublished -> Review -> Published)
  2. Display page URL on list so that it's easy to lookup any domain directly from the home page.
  3. Different status depending on the action button indicates the next action for user.
  4. Archive expired pages for future usage or reference.

‍

Flow of Page's Status

‍There are four statuses under unpublished tab: Draft, Rejected, Ready to review, Was published
No status under review, published tab and archive list.

Main Page's UI Interaction

‍

ALP List - Edit Unpublished Pages
  1. Show remark on edit page to notify users about the rejection reason.

‍

ALP List - Review Process

  1. Review process includes preview to make sure content on the page is reviewed before publishing.
  2. Users can leave a reason for the rejection while rejecting pages.‍

‍

ALP List - Published Pages
  1. Update online pages' domain for marketing reasons.
  2. Users can leave a reason for the un-publishing while un-publishing pages.
Get in touch
chiahua1114@gmail.com
+886 932315702