Screen Shot 2020-06-28 at 6.44.39 PM.png

LANDING PAGE DESIGN

Musical Instrument selection

Marketing & Sells focus

Mac-PNG-Background-Image.png
A Design Task

This is a 8 hours design task

Task Introduction

Task purpose

UI solutions by addressing key performance indicators.

Design Goal

Choose the right instrument and sell it online.

Target group

- Typically 20 - 35 years old.
- Play more than one instrument.
- Able to understand complex musical instrument interfaces but they appreciate user friendly and intuitive ways to achieve their goals.

Design Elements

1. An ad on social media 
2. A landing page 
3. A product overview page

Project Process

Make visual Design

Design Research

Design framework

Research Review

​Design iteration

Define KPI

Select Instrument 

Sales & Marketing KPI define

Instrument Research

Polish design

Summarize & Review

Checking KPI

According to the research design framework

  • The design process follows the two-diamond design methodology aiming to provide innovative solutions within a limited timeframe.

  • Understanding the needs of users is the key in musical instrument selection, an important step in making the appropriate choice.

  • The choice of KPI offers the concrete perspectives of studying what good users' experience can serve business goals

RESEARCH PROCESS

1. KPI research

According to the main goal of this task is to sell the instrument

online. I  choose three KPI criteria that can evaluate the short term

and long term sells situation.

chang-1.png

Site traffic + Time on site

Site traffic shows the total number of visitors who are reaching the website. Time on site shows how much time visitors are spending on the website. The purpose of choosing this KPI is to understand what users want most(Why people search for this instrument, what are they search for, what are key information target group cares etc.). This measurement is important for both visual and UX design.

Traffic source 

Choose to evaluate and study content design, marketing channels and user behaviours. 

Conversion rate

Managing user interface design according to CTA purpose. 

Tracing the effectiveness of UX efforts overtime.

Sales and subscribe

2. Musical instrument research

Understanding the needs of the target group is key to understand the target markets and develop suitable marketing communication strategies and design criteria. 

Four steps for choosing the right instrument for the target group

Double diamond method

DIVERGE      CONVERGE      DIVERGE      CONVERGE

1
2
3
4
Screen Shot 2020-06-29 at 4.23.25 AM.png
1

Brainstorming

Popular Brainstorming started with an electronic Ukelele (State of Art). The online feedback from the instruments can contribute to the understanding of the users' needs, trends and market. Based on the feedback analysis of the electronic Ukelele, the initial brainstorming was set to focus on exploring the possible features of a musical instrument according to the target group and the roles of an instrument in the target group daily life.

FEATURES: Easy to learn, Bring inspirations, Portable, Editable;

ROLES: A friend, A tool, A window.

2

Target group Analyze

From the analysis of the target group's needs and goals,(20 - 35 years old music lovers with rich knowledge of playing more than one musical instruments),  the selected musical instrument are able to bring music lovers and talents inspirations from multiple perspectives: sound, melody, harmony, rhythm, texture(Objective perspectives); and stories, echoes, natural(Subjective perspectives).

Screen Shot 2020-06-11 at 11.32.17 PM.pn
Screen Shot 2020-06-07 at 12.11.05 PM.pn
3

​Keywords research & Theory reading 

Based on the keywords of the main feature of the musical instrument, I have done research about the musical instruments in people's daily life in the 21 century.

  • Inherently allow expressivity.

  • No apparent correlation between input effort and sound output.

4

Make the selection of the musical instrument 

Summarize the insights from brainstorming and research outcomes, I have chosen the tongue drum for this task. 

WEBSITE DESIGN PROCESS

Screen Shot 2020-06-29 at 4.24.01 AM.png

1. Content and structure Design

Header

Buy, product, forum, FAQ

Main page

Selling link, product information, product picture

Product information

Product features

colours/ materials 

Music demos

More technical information

Online community

Details of online service/community (showing through the categorizes in the mood board)

  Look, Feel, Function  

Footer

Buy, product, forum, FAQ

Screen Shot 2020-06-29 at 4.24.12 AM.png

2. Wireframe and Details Design

Identify the usability of the landing page in the early design process.

Goal

Content Priority (Hierarchy of elements on the page)

Functionality

How users interact with the site

Criteria

Space constraints

Font size 

The layout of pictures and font combination

Responsive Design

  Function  

3. Landing page visual and content design 

First page
Landing Page_compressed (1)_page-0001-01

Product key features

Colours/ materials 

Product information

​Product information is designed to understand the target group needs.

 

Through traffic source and time on site KPI measurements to understand what are the key information when the target group search for the musical instruments. 

The "learn more" and "subscribe" button can use for gaining more insights about channel through CLICK KPI measurements. 

Music demos

More technical information

User review

​User reviews are designed to give visitors objectively opinions on products. In this context, the reviews could contribute to both the musical instrument from the professional players' perspective and branding value from digital services perspectives.

​Customer Review

Community

Community is an essential feature of the musical instrument. The keywords"sharing, editing, cooperating'' ​focus on building up loyal users, and on sustaining users relationship with the brand through building up an ecosystem by multiple connections and usabilities within players, musical instrument, and community.

​Customer Review

Product mode board

​The product mode board is designed to provide visitors with direct information through visual expression. For tongue drum, mode board focus on:

  • The use of the content,

  • Products appearance and details,

  • The sounds' feelings.

Product mode board

Header

Three main infos

Four categories 

Footer

The design of the Footer is to design to show the content or the functions that can support the business goals. 

The goal of a landing page of a Tongue Drum is to lending visitors to purchase the product or create connections with potential customers. According to the content of the musical instrument, the footer content design can include:

  • Product information categorizes; 

  • Digital service categories;

  • About us; 

  • The subscribe function;

  • Social media icons.

Sample of Fotter design

4. Product overview page design 

Overview
Design flow
Feature design logic

Product Name

Package Information

Price

Product options

Payment Methods 

Delivery policies

Summarized information about product, delivery policies. 

Highlight the feature of this tongue drum for music lovers by segment the key feature and specifications.

Screen Shot 2020-07-05 at 10.05.51 PM.pn
Screen Shot 2020-07-05 at 10.05.51 PM.pn
Product Page.jpg

Provide directly payment methods can contribute to the purchasing conversion rate​.

Screen Shot 2020-07-05 at 10.21.10 PM.pn

In the community section, the pictures are chosen and categorized by the main features of the community.  

LANDING PAGE 

GRAPHIC & UX DESIGN 

Graphic Design measurements

  •  Grids

  • Typography

  • Language

  • Motion

  • Accessibility 

An accent colour

#FF7246

Measurement Details

COLOUR

Four main colours

#081AB9

#1957EF

#3E7EFA

#000000

#F2F2F2

#FFFFFF

TYPOGRAPHY

  • Helvetica Neue 

      Bold

  • Avenir

      Medium

        Roman

KPI & UX Design measurements

KPI is a tool to connect business goal to user experience.

KPI

  • Site traffic

  • Time on site

  • Traffic source

  • Conversion Rate

User Experience

  • Personas

  • Brainstorming

  • User flow

  • Prototyping

  •  

TYPOGRAPHY 5 CORE SIZE

  • 54

  • 24

  • 20

  • 18

  • 16