Help us to redesign our website that makes people happy with music

my-lovesong.de

Note:
Hi there. We invite you to switch to the briefing in the attachment (PDF document). There you will find the same information as here...but in a better format ;-)

Thanks
Kiu from my-lovesong.de
_________________________________________________

my-lovesong.de is a B2C gift platform for customizable songs.

The idea / the previous marketing (to let you know, what our website is about):
Have you been looking for a unique gift for that special someone? Look no more!
On my-lovesong.de, you can give the unique gift of music in the form of a personal song.
Amazing, isn’t it?
After selecting your song online, it will be individually tailored to your needs, and recorded. This one-of-a-kind gift has attracted many customers, but also major television stations such as VOX, RTL or NDR. Where else can you find a similarly personal gift except on my-lovesong.de?

Target group:
my-lovesong.de targets people(*) who want to express their appreciation or feelings towards someone special (e.g. significant other, best friend, parent(s), close relative(s), etc) in a unique way: the gift of a personalized song (at a very reasonable price).
The music and recording quality of these songs are top notch, and they are produced by professionals who have written several Top10-Radio-Hits.

(*) Details of our target group can be found below

Typical occasions:
Love, friendship, birthday, christmas, wedding, mother's day, engagement…

https://www.my-lovesong.de

• Personal and trustworthy (the customer should have the secure feeling that there are great and positive people working here, who give everything to make the songs not less than perfect) - a portal “from people” “for people”
• Emotional (the customer should immediately get the "wow, is this a great and original idea - that's what I want" feeling).
• Minimalist, clear design concept, which is enhanced with targeted optical “gimmicks“
 the design should appear smart and light
• If "icons" are part of the design concept, please use the look of hand-drawn, not "perfect" icons
 A personal touch should be conveyed
• It should be conveyed, that there are no boring "standard products" here, but lovingly produced musical works.
 Idea: It's about creative, handmade songs
The user is the focus of attention
Clear design that is easy to navigate and understand. The User Journey should be designed as simple, smart and uncomplicated as possible.
Colour-coded call-to-actions that can be found intuitively.

!!! Mobile, mobile and... mobile !!!
87% (!!!) of all users visit our website with their smartphone. The design to be created should therefore be based on the smartphone viewport. The viewport for desktop (11%) is to be adapted later.

Microinteractions
Use of micro-interactions that make navigation through the pages clearer and friendlier.
As micro-interactions, we understand small animations that show the user that something is happening or should happen. A playful form of "feedback" so to speak.
The user should feel more integrated and identify more easily with the website/product.
These interactions should provide positive surprise moments and serve as a guideline to define the user journey more clearly.
The user flow should be made easier, the user should easily find what he is looking for on the website.

Note:
We are aware that creating animations is not part of the job. However, we would like to ask you to indicate areas in which you would recommend animations with appropriate comments or references.

The following pages are to be created (We describe the pages in detail below):
• Homepage
• Product page (two versions)
• Upselling page
• Landing page

On all sites/pages

• my-lovesong.de logo in the header
• Trusted Shop-Widget as the top element (design is predetermined by the widget and is therefore unchangeable)

• Footer with icons: "Known from RTL, 1LIVE, Die Höhle der Löwen, Cosmopolitan, Sat1, NDR, Men'sHealth (as endless loop)
• Footer: Imprint, AGB, Payment methods, Privacy, Revocation

 
Homepage

A list of the desired contents. Depending on your design strategy, you can add to the structure of the start page as you wish.

- Testimonials from TrustedShops as sliders

- Our team at work:
o Photo collage or sliders of people, team pictures in "work situations
 Songwriter
 Singer
 Musicians
 Recording studio

- Photos: Occasions showing a wedding, birthday, anniversary, best friend, Mother's Day or together, happy, enraptured, raptured, joyful, totally surprised perople listening to music (e.g., in front of speakers, or a couple with Earpods in the ears)

- Schematic representation of how easy and uncomplicated it is to configure the songs.
- It should convey the feeling of "you get your unique song with just a few clicks".
- The simpler this area is visualized, the better.

- Facebook button (does not necessarily have to be integrated)

Note:
If you have ideas for additional, exciting/tempting areas, please feel free to add them in your design.

 
Product page

Note:
We want to be able to perform a split test (A/B-Test) for the product page after the launch.
Therefore two versions of the product page are required.

• Version 1 of the product page: "Step-by-Step" system
o In the first part, the existing step system / selection navigation is to be functionally adopted (In the upper area, a rigid area is defined in which the customers can see which step (1, 2, 3, ...) they are currently in

• Version 2 of the product page: One-Page-Layout
o Product selection by scrolling on the product page (anchor navigation)

General information about the process steps to configure the product packages:

In Step 1, the customer chooses between the product package "Song with your name" or "Song with your story".
 The highlights of the two packages as from the respective base price are described with a few key points

Note:
Unfortunately, no step of the product configuration is "self-explanatory" and must therefore be described with a few sentences. This must be taken into account in the design. This is where smart ideas are needed, so that the abundance of text content does not tempt customers to abandon a purchase.

 
Further procedure for package "Song with your name":

1 Three songs are offered for selection (ballad, pop song, country song). These can be listened to via a connected audio player. The selection of whether it should be a female or male singer also takes place in this step.
 Selection of the song via CTA-Button
Please consider in the design that we might want to offer more than three different songs in the future.
2 Four different texts are offered for the occasion (love, birthday, friendship, Christmas). If desired, the customer can have the complete lyrics displayed here. This can be done via a pop-up, for example. Please also take into account that we want to offer more (or less) occasion-options in the future.
 Selection via CTA-Button
Our wish: A visually appealing, smart idea, to realize the “display the lyrics”. The customer must understand intuitively that they can interact here.
3 In this step, the customer can use two text fields to enter which desired first-names should appear in the song. The respective name is searched "in realtime" via a connected database. If the name exists, the name will be played automatically via an audio player. If the desired name does not exist, the customer will be informed accordingly. This can also be solved by a pop-up, for example.
 Selection via CTA-Button
Our wish: A smart idea that is as visually appealing as possible to realize the "warning".

4 At the end of the product page, the customer should decide whether to order the song as a download-only or alternatively to choose an upselling product.
A clear, visual separation from the upselling-page is desired.

 
Further procedure for package "Song with your story":

1 (Identical to "Song with your name") Three songs are offered for selection (ballad, pop song, country song). These can be listened to via a connected audio player. The selection of whether it should be a female or male singer also takes place in this step.
 Selection of the song via CTA-Button
Please consider in the design that we might want to offer more than three different songs in the future.
2 Text field in which the customer can define the personal story. The customer can do this, for example, by using keywords or a continuous text
 Confirmation via CTA-Button
3 Forwarding to the upselling page

Scheme for the sequence of the individual configuration steps:

Note:
On our current website we use "static play" buttons for the audio functions.
In the redesign, the audio buttons should be animated.
Upselling page

Background information: Currently we only sell the CD in the metal gift box. In the future, further upselling products are to be added, such as a Bluetooth loudspeaker. The site should be designed in such a way that an extension is possible for the future.

- No further input fields/options are required for the Bluetooth idea
- For the CD + metal gift box option, the customer must be able to choose between the different CD cover designs. The selection is to be made by CTA and the customer must clearly see which design he has chosen. A text field is also required in which the customer can define the dedication text for the printed CD-Cover and select it via CTA

Landing page

We would like to have a visually reduced landing page (model: Google homepage). Here, a song (from the package "Song with your name") should already be pre-configured as far as possible.

e.g. should be preconfigured:
• Ballad
• Female voice
• Occasion: Love

Now the customer should only select the two desired names and buy it.

Underneath this, there should be a (with a smaller font?!) area where the customer can choose, that he does not want to go the "express" way after all, but can configure his song completely.

• no dominant use of pink and pastel shades
• not too ornate
• The user should not get the feeling that the song-configuration is an endless amount of configuration steps without an end (e.g. through an inelegant continuation to the upselling area)

Of course, you can get an overview of our existing website. But please use all creative freedom when re-designing in order to create not only a very good, but really sensational environment for our customers. We are burning for our idea and are already looking forward to a close and creative cooperation with great design concepts.

Note:
We want to make sure that the programming team perfectly implements the concept of the design competition winner in detail. Therefore, two correction loops by the designer (max. 1 hour each) should be included in the competition budget.

Web page design needs to be responsive
o Important: As 87% (!!!) of our customers visit our page with Smartphone, your Design-Ideas have to be visualized on Smartphone-View. The viewports for Tablet- and Desktop-View will follow afterwards.

Technical specifications:
- Include all image states for buttons and text links states within *.psd files (or separate tile style)
- Please provide *.jpgs for visual reference, any animations/transition states
- Please provide the previews of page breakpoints (mobile, small web, large web) to comply with the responsiveness of the design
- We are also open to tools like Adobe XD. Our goal is that - after the
design competition - the programmers have a great basis to create a living
website from your design concept

Images
- We have attached some of our existing pictures. Please feel free to use them if needed