Visual Design – Landing Page for Violins (E-commerce Website)

Project: 

Design challenge to create a landing page design for e-commerce website (8hr challenge).

Program used in this project:
  • Adobe Photoshop
  • Adobe Illustrator
My role:

Visual designer

The brief:

To create a design for an online store that sells musical instruments. The design must address different KPIs.
The design must include these elements:

1. An ad on social media to attract visitors to your site
2. A landing page that is representative of what you advertised
3. A product overview page to show more images and information, and provides a method to proceed in the purchase process.

The target group of the design:

– They are typically 20 – 35 years old.
– They play more than one instrument.
– They are able to understand complex musical instrument interfaces but they appreciate user-friendly and intuitive ways to achieve their goals.
– They place a lot of value on good design but also need to read details to know that their choice of the new instrument will be right for their needs.


The design process:
Proto-Persona

I started the process by creating a proto-persona. Lists of the different frustrations and personal goals make it clearer what expectations and needs the customers have that the landing page and product page would be able to answer. For the profile, I pretended that the company had already done their research and used the target audience listed on the brief as the basic information of this persona.


Competitor analysis

Next, I browsed the web to see what type of design approach other similar e-commerce used. This process would help me to set a style that would set the brand apart from the rest.


Set up Styles

Using the persona and knowledge of competitors’ design approach, I set up a few keywords for the brand that I worked with. These are Modern, Classic, and Dramatic. Based on those keywords, I could now pick the design style that would elevate the feeling of the brand.


Sketches

I created a few basic sketches to help me visualise some of the ideas I had. I focused on the above-the-fold area, both on the landing page and the product page because there’s the main visual impact for the site visitors.


The result

From the sketch, I could then start creating the visual of the landing page and the product page. The main aim of the design is not only to answer the different KPIs, but also to create an impactful visual when the customers visit the website.

How the landing page looks on a desktop mock-up.

KPIs ADDRESSED

Bounce Rate

Creating a design that appeals to the eyes and with enough information to catch the attention of the user that visited the site (big headline title, asset as the vocal point and additional information, such as the free shipping banner), without making them feel overwhelmed and make the site looks too crowded, I try to make the bounce rate as low as possible.

Pageviews per visit

Dividing the information into different more focused pages can create a higher page view per visit. But of course, keeping the clicking process short is also important. That’s why I try to create a few products panel so that the user can easily cut the process.

Time on site

By providing a Blog page and also a link for products recommendation, I try to make the user spend more time on the site. With more information they can get about the product they are looking for, the longer they will stay and browse the site.


AD DESIGN

For the design of the ads, I took the same visual cues as the landing page to make it visually cohesive. I took two different approaches to the ads. One focuses on the product for the more technical type of customers who knows the instrument well. The other approach focuses on the emotion of the viewer. With the hero image being a person holding the musical instrument outdoors and then adding the tagline, it appeals to the experience of using the musical instrument – targeting a broader audience that is less technical.

Visual Design – Landing Page for Violins (E-commerce Website)