The preface

“The Birth of an APP” is defined as a textbook and reference book, which is suitable for the audience who want to realize their product dream through the APP. That is, through the book, you can quickly understand the whole process of APP products, from zero to one, and create APP products.

Reading through this book, you and I may feel the same way, that most of it is a designer’s way of looking at things. So, if you’re a designer, maybe this will give you a better understanding of how your APP works; If you are a software engineer, you can also think of it as understanding the software process from another perspective. Of course, these knowledge only stay in the book level, and for the actual project, discrepancy is inevitable, but do not lose its reference value. In short, this example illustrated storybook, close to the reality and contain many cross-border elements (design, development, interaction, products, etc.) of the reference books, especially the products of this kind other titles (the following has the same type of books recommended), not only let you have the opportunity to work process of empathy industry outstanding enterprises, is a methodology of choice for itself to seek products.

  • Recommended books

    • U Point · Material: By Alibaba Group 1688.UED team after years of practice, the content of emphasis on actual combat, talk about methods, professional, on culture, and the “dao – art – tool” train of thought as the arrangement, from the design view, thinking system, methodology layer by layer analysis, scattered industry technical know-how string system, The author puts forward his insights on “how to develop UED breakthrough”. Paste the douban book review, for friends to judge, make a choice.

    • “Under Design” : it is an excellent work jointly produced by THE UED team of Sohu news client, which comprehensively explains the process and methods of user experience design in terms of interaction design, visual design and designer vision. Paste the douban book review, for friends to judge, make a choice.

  • The update process
    • 2018.03.25 – Complete the preface;
    • 2018.03.26 – Updated Content (Chapter 05/06);

Zero mind mapping

Learning ideas: Master knowledge according to the framework of mind mapping; As well as reference part of the project experience, document induction.

  • Future exploration
    • Competing goods analysis
      • Familiar with the process of competitive product analysis;
      • Define the contents of each part of competitive product analysis;
      • Analyze the output of the report.
    • User research
      • Understand user research methods and their definitions;
      • 1) Master the established process; 2) Classification of user portraits, usage methods and advantages and disadvantages of each category; 3) Composition and value of user portrait.
  • Design specifications and procedures
    • The specific circumstances in which the design specifications are established;
    • Differences between the iOS and Android specifications;
    • Main elements and functions.
  • Interaction design
    • The user experience
      • Work content, status analysis and processing of interaction designers;
      • Connect with your life.
    • The basic flow of interaction design
      • Five elements of interaction design:people,purpose,The environment,medium,behavior;
      • Basic process.
  • The visual design
    • Ui design
      • Ui design and production process;
      • Understanding and grasping of future design trends.
    • Improved icon quality
    • Interface Detail Design
      • Grid system improves interface legibility and usability;
      • Knowledge and skills of drawing annotation;
      • Design resource naming and file classification.
  • The development of implementation
    • How to work with product, operation and development
      • Product development and realization process in Internet enterprises;
      • Main job responsibilities and job nature, as well as the matters needing attention in post coordination.
    • Release the finished APP
      • Release way
      • The common market
  • The online operation
    • Definition of Operation
      • What is the operation and its objectives;
      • Operation means and operation positions.
    • Online operation activities: plan online activity process
    • H5 page and Banner design

  • Service design

    Recommended readingThis is service design thinking

    • Service design concepts
    • Service design process
    • Toolbox: Familiar with common service design tools
  • Crossover design

One Prospect Exploration

Competing goods analysis

Competitive product analysis, can bring value:

  • Enterprise: Strength, S and Weakness, W
  • Design: User Interface

Why competitive product analysis

  • Enemy and know yourself
    • Markets: Red Sea (known market space); Blue Ocean (Products that do not yet exist)
    • Trends: Target population, operation strategy, user experience, user feedback
  • Designing a lighthouse: Balancing benefits against design costs

How to do competitive product analysis

  • establishcompetitors
    • Consistent market objectives;
    • The target users are the same;
    • Product functions are the same and similar;
    • Users have the same needs.

Select quality and suitable competitive products, and then analyze. As shown in Table 1-1, it is targeted at instant messaging APP, namely, the type of competition and competition relationship to be considered.

consideration Main analysis object Reference analysis object
The market target direction is consistent, the target user group is roughly the same, and the functional user needs are similar QQ, WeChat Momo, JUJU
Inconsistent market target direction and complementary functional requirements YY, bettas –

Analyze data information

Development trend (negative) conditions Development Trend (positive)
Weakness (Weakness, W) Compare the enterprise’s own strength with its competitors Strength (S)
Threats, T The possible impact of external environment changes on the enterprise Opportunity (O)

Example: SWOT analysis is applied to Mafengwo APP

  • S: Travel strategy is mafengwo’s flagship product in mobile terminal, armed with massive UGC data and strategy engine technology.
  • W: Single profit model, knowledge and traditional OTA cooperation commission + advertising model).
  • O: OTA & O2O.

  • T: Industry barriers; How far can liquidity support technology and operations?

  • About the Boston Matrix: The Boston Matrix distinguishes four business portfolios, as shown in Table 1-3.

Sales growth rate Market share
Star products high high
Thin dog products low low
Problem products high low
Cash cow products low high

Output analysis report

  • Competitive product analysis includes:
    • Market trend and industry status; –The SWOT analysis method,
    • Corporate vision, APP positioning and development strategy of competitive products;
    • Target user, user profile;
    • Core functions;
    • Interaction design;
    • Advantages and disadvantages of APP;
    • Operation and promotion strategy;
    • Summarize and suggest.

User research

One of the final outputs of user research is user portrait, that is, user research => user portrait.

A general method

  • Scenario observation: Normal working environment or other products suitableThe physical sceneTo observe and communicate with users.
  • Usability testing: Users use the product in certain scenarios. By the usability engineerUser operation process and habitsEtc.Observe, record and measureTo evaluate product availability issues.
  • Questionnaire survey: forUnified and strictly designed questionnaireCollect information about the research objectPsychological characteristics 和 Behavioral dataData.

  • Interview research: in the process of interviewing users, it hints the potential winter, New Year, attitude and feelings of the interviewees towards a certain problem.

    Potential winter, New Year, attitudes and feelings?

  • Focus groups: qualitative research methods. An organizational structure that allows users to interact with each other to stimulate new thinking and ideas.

  • Desktop research: conduct research activities on collected information, that is, collect and screen second-hand data, and judge whether the problem has been solvedLocal address 或 All solve.
  • Expert evaluation: organize experts in various fields to make comprehensive analysis and research on the past, present and development process of products through intuitive induction by using professional knowledge and experience, and then make judgment.

User portrait

  • The process of outputting user portraits

    • Obtain research user information
    • Segmented user groups
    • Create and enrich user profiles

  • Method of building user portrait

    • qualitativeUser portrait
    • theQuantitative validation 的 qualitativeUser portrait

    • Quantitative user profile

      Qualitative research: The process of formulating a theory. That is, concrete to abstract transformation, forming theory. First hand descriptive information is usually collected through interviews, observations and other methods (induction).

      Quantitative (metric) research: put forward theoretical hypotheses, use questionnaires and other tools to collect quantitative data, quantify the data, and verify hypotheses in the form of data.

  • Qualitative user profiles – Direct user groups

    • Step 1) Qualitative research interview; 2) Segmentation of user groups; 3) Build user portraits of segmented groups.
    • Identify the strengths and weaknesses of user profiles
      • Advantages – Time – and labor-saving, simple, requiring fewer professionals.
      • Disadvantages – Lack of data support and validation.

  • Qualitative user profiles that have been quantitatively verified – re-verified by user groups

    • Step 1) Qualitative research interview; 2) Segmentation of user groups; 3) Quantitative validation of subgroups; 4) Build user portraits of segmented groups.
    • Advantages and disadvantages of quantitatively validated qualitative user profiles
      • Advantages – There is a certain amount of quantitative verification work, requiring a small number of professionals.
      • Disadvantages – Heavy workload and high cost.

  • Quantitative user profile – Verify the subgroup of users

    • Step 1) Qualitative research; 2) Multiple subdivision assumptions; 3) Quantitative collection of segmentation data; 4) Cluster analysis to subdivide users; 5) Build user portraits of segmented groups.
    • Quantify the pros and cons of user profiles
      • Advantages – Well supported, more scientific, requires a large number of professionals.
      • Disadvantages – Heavy workload and high cost.

  • The user portrait contains the following elements:

    • Basic information (name, photo, age, family status, income, job);
    • Typical scene;
    • Goals and motivations;
    • Needs and pain points;

    • Attitude towards APP;

      As shown in Figure 1-1, taking music immersion lovers as an example, user portraits are established.

Questionnaire design

The purpose of designing the questionnaire is to better collect information or quantitatively verify the results of qualitative research. Therefore, in the process of questionnaire design, the purpose and demand of the survey should be grasped, which can be divided into the following steps:

  • Questionnaire Design Process

    • Determine the information you need
      • Research purpose
      • Competitive product analysis documents
      • User portrait
    • Determine the order of questions:After the first difficult
    • Test and modify the questionnaire
      • Drop test
      • Problem to modify

  • Design questionnaire questions

    • Basic information of users (age, hobbies, app-related life behaviors)
    • Typical scenarios of APP use by users (fragmentation time, frequency)

    • Pain points and needs of users

      You can refer to the example of P27-30 in the book, the questionnaire on user experience of nationwide karaoke.

Two interaction design

The user experience

  • User experience, that is, thinking from the user’s point of view.
  • Interaction designer
    • Core value: Communication
    • Workflow:
      • Prepare, divide and arrange important or urgent design tasks;
      • Write solutions, drawings;
      • Review designs to be approved;
      • Summarize the plan, output the result and synchronize it to the department;
      • Output design draft, timely communication with products and R&D;
      • Communicate with project interface person.

Basic flow of interaction design

Five elements of interaction

  • People (Amber) : Designers with documented inspirations, called users by people with needs.
  • Tools: devices used by users.
  • Behavior: User operations.
  • Purpose, “Purpose,” means to achieve a certain effect.
  • Enviroment: the equipment used by the user, here refers to the mobile phone.

How to participate in a project

Interaction designers, after receiving a project or demand their basic according to the following process execution work process, namely, demand analysis, information architecture design, flow design, prototype design, eventually into product usability testing, of course, after the completion of the requirements analysis phase, also can undertake a usability test, to verify that the scheme is feasible. Figure 2-2 illustrates how an interaction designer participates in a project.

Tip: In the example, we started our discussion on the topic of sticky note APP.

  • 1) Demand analysis

    • Understand the requirements
    • User survey
    • Requirements positioning: product analysis, brainstorming, storyboarding, character modeling (user portraits), product data
    • The instance: In the demand analysis stage, we obtained the product positioning of notepad APP from many research methods and data:
      • Product definition
        • User group —A designer, a design student
        • Main Functions –Record ideas and share them
      • The user needs
        • Using goals –Write down ideas and share them with colleagues and friends whenever possible
        • Usage Scenarios –Shopping mall, conference, class, work, training, drawing
        • User goals –Easy and fast operation, less consumption of flow, low learning cost

  • 2) Information architecture

    • Requirements gathering
    • Demand for reducing
    • Define priorities
    • User tasks

    • Example: Based on the information obtained from the requirements analysis, the architecture is then combed and sketched. See Figure 2-2.

      Figure 2-3 Information architecture diagram

  • 3) flow chart

    • Operation process
    • Page flow
    • The layout design

  • 4) Prototype design

    • Interactive prototype
    • Interactive instructions
    • The design specification
    • Project follow up

  • 5) test

    • Usability testing
    • A/B testing
    • User feedback
    • Product data

Requirements analysis considerations

In the whole process of product design, the balance between business needs and user experience should be fully considered. Figure 2-4 shows the considerations for requirements gathering.

Demand reduction is a necessary step in demand analysis, which is the result of designers’ comprehensive consideration of various factors.

How to organize requirements

  • 1) Define information priorities
    • Product positioning: Core features, meaning those features have the highest priority.
    • Real needs: Distinguish between secondary needs. They are expanded around core functionality.
    • Requirement reduction: Weigh requirement reduction.
  • 2) Information architecture: the depth and breadth should be balanced.

Flow chart design

  • Define information architecture
  • Identify user tasks

  • How to do it

    Task completion method is what we call the process, the task process is determined according to the user’s actual operation psychology and behavior.

    [example] The process of using paper notes:

    • First take out a pen and paper;
    • Writing down ideas on paper;

    • Paste it in a prominent place for easy viewing.

      The procedure for using a note in real life is similar to the procedure for using a note on a mobile phone. Figure 2-5 shows the flowchart for adding a note.

      Here flow chart design, you can use C language program design in the flow chart.

Prototype design and design principles

  • After establishing function and logic
  • Design sketch
  • Low fidelity wireframes

  • High fidelity prototype diagram

    Figure 2-6 is the low-fidelity line draft of the hourglass chronicle APP I designed earlier, with a forced advertisement inserted. For the corresponding high-fidelity prototype diagram, please refer to the corresponding thematic introduction. “Hourglass Chronicles” APP

    Figure 2-6 APP low-fidelity line draft of hourglass Chronicle

conclusion

  • Basic flow of interaction design
    • Requirements gathering and analysis
    • Define priorities
    • Information architecture Design
    • Process design
    • The prototype design
  • Requirements analysis process, to consider comprehensivelybusiness,project,The userThe three elements.

Iii Visual Design

UI design

The definition of the UI

User Interface (UI), the medium for interaction and information exchange between the system and users, which implements the conversion between the internal form of information and the human-acceptable form.

UI Design process

  • Specifically, the UI design process is divided into two stages: preliminary preparation and mood board.

    • 1) Definition: Do a good job of definition/user segmentation.
    • 2) Search: find apps of similar competing products to install and conduct immersion experience.
    • 3) Analysis: Analyze competing products and learn.
    • 4) Keywords: determine the emotional keywords.
    • 5) Collection: Collect pictures and set up mood boards.
    • 6) Analysis: Analyze the color and texture of the mood board.
    • 7) Interview: user verification to determine the design style.

    • 8) Improvement: Improve the visual design of the entire APP.

      Step 1 to 4 is the preliminary preparation stage, and Step 5 to 8 is the mood board stage.

  • Do user definition: How to define a user is not repeated here, see chapter 1 prospect Exploration for details.
  • Find the same kind of competitive APP to use and experience: stand tall, see far. Namely the choice of competitive goods also want to have enough market expression.
  • Determine the emotional keywords: the emotional feelings to be expressed by the APP’s vision.
  • Mood board: Understanding each person’s abstractions of emotions into actual definable elements.
    • Keywords extraction;
    • Build a figurative gallery (concrete objects, scenes) and abstraction;
    • Gallery (color texture and other elements).
  • Color and texture analysis of the mood board, that is, grasp the color and the feeling of elements on the picture, and then abstract it into a color scheme.

Icon quality improvement

Sketch color basis

  • Sketch in three major areas and five major

    • Three big side: bright side, gray side, dark side.

    • Five major keys: bright, grey, chiaroscuro, reflective and projection.

      In composition, we create by assuming light sources.

  • Composition Considerations

    • The composition should not be too small (let a person feel that the picture is not full, looks stingy);
    • Composition should focus on the balance of gravity;
    • Composition should pay attention to the change of perspective and proportion.

  • The charm of color

    • Coloration: Objects give the impression of warmth or coolness through their surface colors.
    • The weight of colour: the compound feeling of simple sense and lubricious feeling.
    • Colorific advance sex and hind leg sex: general character, warm color is richer than cool color advance characteristic.

A pixel is a thing

  • The edge pixelsThere is no edge alignment, so in vector drawing, you need to align edges, align pixels.
  • Rotate the pixelThe perfect solution:
    • Move the center of rotation to any point and rotate again.
    • If you want to rotate and scale, you are advised to rotate and scale first.
  • Perfect paste from Ai to Ps
    • 1) in the AiAlign pixel mesh;
    • 2) Create an icon of the same size in Photoshopdistrict, and then paste in, paste the best choiceShape layer, which is convenient for post editing.

International icon design

  • The form of expression conforms to the design trend of globalization.

    It’s very easy to understand, for example, signs for the subway, high-speed trains, airports, toilets, etc.

  • Dynamic: the blending of dynamic effect and interaction.

  • Texture: imitation, flat and micro texture, here depending on the specific situation and decided, such as company culture, application audience, market trend and other factors, in general, research, analysis work is indispensable links.

Interface detail enhancement

Grid system

Grid system, also known as grid system. Regular grid arrays are used to guide and regulate the layout of pages and information layout. Of course, the grid system is only a layout aid tool, in the actual project should be flexible according to the needs of the overall or reasonable application of the layout, that is, comprehensive iOS or Android standards, the overall control of each element and the sense of coordination interface.

Resource specification

  • Cut the figure

    • IOS: Select one of these resolutions @2x, 750 x 1334 px and print @3x, @4x. Of course, your design is based onVector toolsTo draw.

    • Android: MDPI (160 DPI), HDPI (240 DPI), XHDPI (320 DPI), XXHDPI (480DPI), or more.

      1) Regarding the problem of cut map adaptation, in addition to the above original method, there are many plug-ins and tools available to help you complete this job. 2) A set of cut diagrams is suitable for iOS and Android as far as possible, that is, the size relationship between @ and DPI can be found correctly.

    • In annotation documents, physical pixel units can be used to describe the size of elements, the position of the layout, and the size of the spacing. The advantage of this is that the developer directly sets the parameters and the designer outputs the cut graph (@2x, @3x, @4x) at its multiplier.

    • In particular, the cut diagram is magnified by even numbers to make it easier to scale. Use even numbers to design elements.

      For example, if the reference information is 14.0 DP / @1x, the corresponding parameters are XHDPI / @2x <=> 28px, XXHDPI / @3x <=> 42px, and @4x <=> 56px.

  • .9.PNG

    • The outermost circle of pixels must be limited to1pxSize, must be solid black# 000000No, no, no, no.

    • The file name suffix must be *.9.png.

      Figure 3-1.PNG Application illustration

  • Compressed slice: In Photoshop, the output is stored as a Web format; Export images using the Export function in Sketch. Other tools can search the data themselves, here is not a list.

  • mark

    • Commonly used labeling software:MarkmanPxCook, Assistor PS.
    • If the company or team has a standard design and development manual, please design according to the standard.

    • Have your own set of annotations (accessible, easy to understand).

      For an interface, images, ICONS, frames, text and other elements are essential. For a higher degree of restoration, detailed annotation descriptions, text instructions, and interactive instructions are necessary. In general, a lot of people try to do all of these things at once on the same screen for convenience, and the problem with that is a bad reading experience.

      One approach that is advocated here is paging description. That is: 1) The first page describes the information of the interface layout, such as spacing and background color; 2) The second page describes the text attribute information, such as the text font, size, color and layout; 3) The third page describes component property information, such as buttons and small ICONS; 4) The fourth page describes the interaction information of the interface. According to requirements, you can also subdivide the interaction information of each component. 5) By analogy…

  • Resource name

    • Component type_Module-subfunction_Status or module-component type_subfunction_status;

      For example, btn_setting_logout_n. PNG/setting_btn_logout_N. PNG

    • The underlined characters are named together, for example, ico_appicon_normal.png

  • The PSD source files
    • Module as a unit, classified in different folders;
    • In the PSD source file, there areGrouping layeredThe habit of.

Four development implementation

How to cooperate with product, operation and development

Research and development process of Internet products

  • Requirements: Product manager, responsible for planning and sorting requirements, output Product Requirement Document (PRD). Where does the demand of product manager come from?
    • Versioning: Planning a product from scratch, with features not developed at once but spread across several versions.
    • Dynamically evolving product: Adjust subsequent incremental releases based on market feedback.
    • Detail optimization: focus on user experience optimization.
    • Adapt to rich usage scenarios.
  • Requirements to review: Solutions need to be reviewed with development, design, testing, and operations personnel.
  • Start to design
  • To start developing
  • Test checks

Get along with all the characters

Some collaboration platforms can be used to standardize the development process, such as requirements addition, task assignment, BUG submission, etc. Related personnel work through logs and documents.

Collaboration platform: Worktile, Youdao Cloud Collaboration, ProcessOn (online mapping)

Publish the application

  • Grayscale release: When a new version is released, only a small sample of users are released. Grayscale publishing is a common tool for product testing and quality management. For a product with a lot of users, it’s too risky to release a new version to replace what users are currently using. So Internet companies have found a tool, gray publishing.

Quick prototyping

There are a lot of tools for rapid prototyping, but I recommend a few: Ink knife, Axure PR, proto.io

Wu operation

Overview of operations

Definition of Operation

On the Internet, we promote products for different groups, make content suggestions, and optimize operation methods, product functions and experience through data indicators.

  • Figure 5-1 shows the three elements of operation: product, user, and channel.

  • Objectives of operations: Operations are goal-oriented, data-based work. Everything revolves around the three pillars of business: products, users and channels. Figure 5-2 shows the operation objectives.

  • Relationship between product, operation, and design: In order to achieve the operation objectives, the operation manager needs to cooperate with the product manager and designer. As shown in Figure 5-3, the working relationship between product manager, operation manager, and designer is briefly described.

    Figure 5-3 Working relationship between product, operation, and design

Operation work content and position

Operational work methodology

  • How to make the operation method more popular, trace back to the root is to study human nature, a good product and operation, will be able to meet one of the seven deadly SINS of human nature. The following forUse of human natureExamples of product features.
    • lust: Beauty live broadcast, Momo, stranger social interaction based on LBS (location-based service).
    • vanity: Game equipment.
    • greed: Double 11 discount, lucky draw and red envelope.
    • lazy: One-click order, QR code.
    • spy: No secret, quietly attention.
    • arrogance: Fight marketing, fan wars.
  • Data-driven operations: Data-based operational decisions are more reliable.
    • Product data
      • User registration: including downloads, activation number of registered users, number of APP opened, number of new registrations, etc.
      • Retention: retention, use retention, purchase retention, etc.
      • Active users: active users, registered active conversion rate, number of APP launches, access frequency, browsing duration, etc.
      • Revenue data: paid users, paid conversion rate, paid amount, paid frequency, etc.
      • Functional data: daily comments, interactive feedback times (favorites, shares, likes and other functions).
    • User data: user portrait (gender, occupation, education, age, region, device, operating system, consumption behavior).

Activity operations

What is event operation

  • Short-term promotion activities in traditional industries have brought a certain increase in popularity and sales.
  • Viral spread of social network, such as Spring Festival Gala wechat red envelope, Alipay collection of five blessings, etc.

Activity Usage scenario

  • Regular activities: targeted improvement of a metric, or new feature promotion. Its activity forms are: check-in, invite friends, new user welfare.
  • Holidays: Each holiday has its own attributes, tapping into the emotional resonance of the holiday season. Table 5-1 lists the parameters.
Common holiday For example,
Regular holiday Spring Festival, Valentine’s Day, Christmas, Mother’s Day, Labor Day
Creating artificial Double 11, Double 12, 520 confession day
Celebrate their activities Tmall store celebration, anniversary
Seasonal variation Seasonal clearance, solar term, alternate spring, summer, autumn and winter
Sports events Olympics, Champions League, World Cup, NBA
The awards ceremony Oscars, film Festivals

Each festival has its own attributes, such as Spring Festival, spring Travel, Double 11, sales promotion, Mid-Autumn Festival, reunion and so on.

  • Sudden hot events: very topical, short – term explosive power, can spread quickly. Table 5-2 lists some hotspots.
hot For example,
The people’s livelihood class About me, about life and death
The public class Environmental protection, volunteer education, the elderly, children, pets
entertainment Celebrity gossip, popular participation, jokes
Sensitive topic Power, money, pornography
Technology trends Artificial intelligence, block chain, new products released by technology companies

The amyotrophic lateral sclerosis (ALS) ice bucket challenge, for example, has generated more than 700 million views on Weibo and 1.37 million yuan in donations.

How to plan an online campaign

There are four stages in planning online activities, namely, preparation stage, planning stage, implementation stage and summary stage.

  • Preparation stage: Preparation before the event
    • Activity needs: purpose, crowd, platform, opportunity point (take advantage of the situation, such as the World Cup)
    • Activity purpose: Quantified as data indicators, the core goal is to promote the brand, attract new users, promote consumption, improve user activity.

  • Planning stage: activity plan planning

    • Make clear the time, content, specification, copy and process of the activity;

    • Confirm prizes and coordinate promotional resources;

      [Note] When planning the scheme: 1) The process is simple and the copy is clear; 2) Attraction, such as rewards; 3) Timely feedback, spiritual motivation. For example, dynamic display of the number of participants, highlighting user income, award-winning users round broadcast.

  • Execution phase: Make three points after the activity goes online
    • Customer service follow-up: solve users’ problems and calm users’ emotions.
    • Monitoring data: adjust at any time to ensure activity quality and expectations.
    • Distribution of activity results and aftermath (Don't make the user feel cheated).
  • Conclusion stage
    • User participation and data to determine whether goals are being met.
    • Summarize activity experience, extract highlights and mistakes, and prepare for the next activity.

Case analysis

Take “Sina Weibo April Fool’s Day scraping award” as an example.

  • Type of activity: games
  • Campaign objective: To increase user activity
  • Activity time: April Fool’s Day, seven days of activities
  • Target audience and cut in demand: For old users ->Profit-seeking psychological
  • Platform: Mobile
  • Interactive mode: simulate the real scraping operation
  • Rules to determine
    • Each user can participate in 5 scratch card events per day, the first time is free.
    • More raffles are awarded for completing certain specified tasks.
  • The prize set
    • Control the number of prizes and the probability of winning according to the budget.
    • The jackpot has to be eye-catching, paired with regular prizes,Increase users' confidence in winning awards.
  • Copywriting and visual design
    • Bold headlines, clear rules, simple pages.
    • Combine with the theme of the activity to render the atmosphere.
  • Activity indicators: number of participants, spread (number of shares), task completion, active users during the activity.

H5 with Banner design

H5 representation

H5, or fifth generation HTML, is also a generic term for pages made using THE HTML5 language. Before you start designing, understand the type of H5 project page.

  • By function, as shown in Figure 5-5.

  • By target: As shown in Figure 5-6.

  • After defining the features and goals of the topic page, the next design phase is critical. From the perspective of users, users’ sharing motivation can be considered (a total of six cases).

    • Interest related:Prize formPromote user sharing.
    • Gain: by spreading content, learn knowledge that interests you, orSelf improvement.
    • Identity: Content creates an identity and a sense of belonging for a certain type of person.
    • Achievement attraction: competition between friends to satisfy usersPsychological need to show off.
    • Emotional resonance:Emotional resonanceIn order to produce collective memory sharing impulse.
    • By hot spot: by hot spotThe current hot spotsTo attract users’ attention.

  • H5 page representation

    • Display type: Alipay ten-year bills, wechat stories.
    • Interactive: Do-it-yourself, employment-only workplace magic.
    • Product type: Micro mall in wechat public account, such as JINGdong.

Banner

Advertising graphics of various sizes and shapes placed online (PC, mobile).

  • The design process
    • Understand purpose and define information priorities;
    • Determine copy, determine the design direction;
    • Visual design typesetting, discussion and modification.
  • Matching mode => Output Banner
    • Content and topic: copy + subject or copy + background form.P238
    • E-commerce: copy + subject + background form.P239
    • Activity: form of copy + subject + guide Button + background + guide Button.P240 ~ 241

The resources

[1] Schneider, Jakob. This Is Service Design Thinking [M]. Canada: BIS Publishers 2011 [2] Zhao Jin. Application of Boston Matrix Analysis in Practical Cases [J]. China High-tech Enterprises,2008,(8). [3] Zhang Jingtian. Application of Boston Matrix in Wine Marketing [J]. China Wine Industry, 2006,(1). [4] Shanghai Institute of Quality Science. Measurement, Analysis and Improvement of Customer Satisfaction [M]. Standards Press of China,2009.10.

  • Author: Kofe
  • Links to this article: www.kofes.cn/2018/03/Pro…
  • Copyright Notice: All articles on this blog are licensed under a CC BY-NC-SA 3.0 license unless otherwise stated. Reprint please indicate the source!