LANDING PAGE DESIGN
Musical Instrument selection
Marketing & Sells focus
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.
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
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.
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).
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.
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
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
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
_page-0001-01.jpg)
Product key features
Colours/ materials
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 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 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
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
Three main infos
Four categories
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
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.
Provide directly payment methods can contribute to the purchasing conversion rate.
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