Landing page analysis of „Toonstop’s design process“ by John T. Valles II


If you’d like your own landing page to be analyzed, follow my 1-step process.


From John T. Valles II I received an email with a request to analyze toonstop.com/process. According to John, the analysis is intended to be made in the mindset of a reader that is at stage 3 of the buyer’s journey. So, I am that reader.

Quick reminder of what this stage means:

Stage 3: That person and John are an acquaintance to each other. They’ve met. He or she became a reader of John’s content through a blog post, newsletter, tweet or a video. There’s a real connection because parts of John’s content were relevant to him/her.

I know John personally through an online community that we’re both part of although he recently left the community. I’ve seen some of his art drawings on his Instagram TV channel and know that he’s into the visual arts. From the interactions in the community that he was formerly part of I can tell that he’s a driven person and 23 years old. Apart from that I have no further idea about him or what he’s about.

Though I’m writing as stage 3 reader, I’m personally also at stage 3 when it comes to John’s Toonstop. So, I’m not only imagining how a stage 3 person would think and feel but I can use my personal thoughts and feelings. That makes the analysis easier.

The goal of the analysis

As a reader at stage 3 that I’ll be representing throughout the analysis, John wants me to move to stage 4. Although it would be a step forward in the buyer’s journey at stage 4 I would still not yet be ready for a purchase. Therefore, the landing page needs to provide value (or point me to value) that I can apply myself and see results. Then I’d move up to the next stage.

Consequently, it means that this landing page analysis is not about the conversion or a purchase. As stage 3 reader, I want to get value from John so I can move up to stage 4. That’s why the analysis is about whether he can make me move up or not.

Read below my thought process during the analysis. I recommend to open the screenshot of the original page in parallel to reading the analysis. To see the final result including my amendments open this screenshot. Please take into consideration that my revised copy in the analysis can be different from the text shown in the screenshot of the final result. This can happen when I’m making final adjustments to the copy after I made the screenshot of the amended landing page.

Analysis

I’m opening http://toonstop.com/process/. It’s my first visit of the page. I’m seeing a big „ART PROCESS“ header in literal capital letters. It’s clear to me what this page is about. I’m also seeing a lot more text in this first part of the page, and I’m feeling slightly overwhelmed by all that big text that seems to lack balance and line height. As clear as the header („ART PROCESS“) is, as chaotic I find the other text I’m seeing right now (until „enhance or publicize a commercial“). I’ll talk about the chaos a bit more in a second.

There’s a logo on top saying „Toonstop“ and John’s full name below. Of course, I’ve heard about Toonstop before, and always when I heard it I thought of „Toonstruck“, the point-and-click adventure from 1996 featuring Christopher Lloyd. So, the cartoon topic was immediately in my head. That’s a rather positive association since I find cartoons to be fun. I loved watching them as a child and a teenager (as an adult as well, to be honest).

Below the logo I’m seeing an Instagram logo. That makes sense because John is pretty active on Instagram. Good! I’m also seeing the three-striped hamburger menu icon. When I click it a little menu appears: home, about, works, the process, contact, and hire me. Oddly, the „hire me!“ link is aligned in the center and not to the left as the rest of the menu. Fix that, John, by using the CSS code…

text-align: center;

…for the list (li) item. I’m close the menu again.

The Instagram icon’s placement keeps bothering me. It needs to get out of the way. I’m moving it up, above the „Toonstop“ logo, into the left-hand corner horizontally aligned with the menu icon.

I’m also extracting the Instagram logo (the anchor tag including the image) from its following parent div to stand on its own.

<div class="footer_social">

This way, I’m only having the following anchor tag:

<a href="http://instagram.com/toonstop" target="_blank"><img src="http://toonstop.com/wp-content/themes/OnePageThemeRes/images/picasa-icon@2x.png" alt="picasa" scale="0" width="25" height="25"></a>

Now I’m making that anchor tag part of the menu div…

<div class="slicknav_menu">

This makes sure that Instagram logo is now aligned to the very left. Now I can delete the

in its entirety.

The logo now is liberated from distractions around it and can breathe. I’m now giving the logo more vertical space by changing the padding of the header:

#header { /*…*/ padding: 20px 0; /*…*/ }

Looks much cleaner now.

The part after the big headline

There’s a conflict between the headline „ART PROCESS“ and the logo: both are written in capital letters. Also, I find capital letters to be the least attractive stylistic element I could think of. So, capital letters should be used sparingly, particularly not in the beginning of a page. To me, CAPITAL LETTERS ARE SCREAMING, and I don’t like to be yelled at. Let’s capitalize only the first letter of each word. For that purpose I removed the uppercase text transformation:

h1.single_title { /* text-transform: uppercase; */

Now the headline reads „Art Process“.

Looks much better now, more organic and natural. Feeling more relaxed now. There’s still something wrong.

Got it. It’s the „jumpy“ coloring. „Art Process“ has a dark-gray background color and what follows is dark-blue background and then a light-blue in the box „Commercial Character Design“. Ok, I’m moving too quickly. Content first, design after.

So, I’m seeing a zero („0“) and and graphic that looks like an evolution process from an early drawing of a character to a more or less final revision of the character - it’s clearly showing John’s process. In my browser view, this is very tiny and hard for me to see. Also, I’m not sure about the choice of the lighter blue background. Why not integrate the five stages of the process as an image with no extra background color (or gradient)? At least, I’d suggest to add a descriptive text above each stage, as you can see here.

Also, I’m still puzzled by the „0“, and I’m removing it. I think it’s a source code issue, a bracket not closed, something like that.

With regard to the image showing the process, I’m removing its width:

@media only screen and (max-width: 767px), screen mobile.css:235.single_inside_content img { /* width: 300px; */

And I’m commenting out the margin-top:

/* margin-top: -20px; */

Now I can see the process better and there’s more vertical space in between the process image and the „Art Process“ headline. The stages of the process still could be extracted as separate images so they merge better with the page but I’m not changing that since I’m usually only changing what I can change on-the-fly in the HTML and CSS code. With the exception of the process image (mentioned above) I’m not touching graphics in my analysis because working on them would require more of my time since I don’t have access to the editable files - it would just be fiddly.

I’m also making the executive decision to change the background color for the actual content to dark blue:

body { background-color: #021733; }

The h1 header receives the same background color and a white text color, and more top margin:

h1.single_title { background-color: #021733; color: #fff; margin-top: 15px; }

In fact for the whole „single_inside_content“ div I’m changing the text color to white for better readability.

.single_inside_content { color: #fff; }

The blue „touch“ that John is aiming for still stays by using the dark-blue background for the text and the lighter blue background in the images.

In order to be consequent, I’m also changing the background color of the hamburger menu icon to dark-blue:

.slicknav_btn { background-color: #021733; }

And I would change the Instagram icon to dark-blue as well. This will require image-editing which is why I’m not going to do it at this point.

Still the first part but now regarding the content structure

The page claims to be about the art process and shows an image with five stages but then I’m faced with a new headline saying „What Is It That Toonstop Does?“

I’m super confused. I wanted to learn how John works and makes his art and now I’m reading a Wikipedia definition of commercial character design.

My recommendation: Rewrite the section about what Toonstop does and make it one or two paragraphs to gently lead into your actual process.

Here’s how I’d rewrite it starting with the headline - at this occasion I also changed the headline from „Art Process to „Design process“ since that’s what it is. I also abandoned John’s way of capitalizing every first letter of the word in a header and made only the first word in a header capitalized. If fid this makes it more readable. Ok, here’s my revision of John’s copy:

Design process

At Toonstop, I’m designing characters for commercial purposes. Characters represent existing or fictitious people and other forms of living beings. Bringing these characters to life through design in the context of narrative or dramatic works of art is at the center of my work.

IMAGE OF THE PROCESS with this CSS code: /* margin-top: –20px; */

Image caption: 5 stages: Sketching, refinement, polishing, value construction, monochrome render and final render

I’ve established a process that allows me to create characters that meet your business goals. This involves the steps that I’m taking as a professional and the responsibilities you and I have before and during the project. You’ll now also be learning what to expect at what stage of the process. This gives you peace of mind, confidence in my abilities and certainty during our entire time working together.

I’m deleting all paragraphs that deal with definitions. They don’t add value.

But I added a caption to the image. This small detail adds value since the reader spots the image and therefore reads the image caption as well. It also gives the reader the impression that you carefully selected the imagery for the page. Here’s how I added the caption including the inline CSS code:

<p><a href="http://toonstop.com/wp-content/uploads/2018/01/processdemo.png"><img class="aligncenter size-large wp-image-484" style="/* margin-top: -20px; */" src="http://toonstop.com/wp-content/uploads/2018/01/processdemo-1024x576.png" alt="" width="1024" height="576" data-id="484" srcset="http://toonstop.com/wp-content/uploads/2018/01/processdemo-1024x576.png 1024w, http://toonstop.com/wp-content/uploads/2018/01/processdemo-300x169.png 300w, http://toonstop.com/wp-content/uploads/2018/01/processdemo-768x432.png 768w" sizes="(max-width: 1024px) 100vw, 1024px"></a><br><span style=" text-align: center;font-size: .75em; display: block;">5 stages: Sketching, refinement, polishing, value construction, monochrome render and final render</span></p>

Throughout the rest of the landing page I used the same code for adding an image caption (a line break, a span element with an inline CSS style and the image caption text itself):

<br><span style=" text-align: center;font-size: .75em; display: block;">HERE COMES THE FOR IMAGE CAPTION</span>

I also added more padding and bottom margin to the paragraphs:

.single_center p { margin-bottom: 15px; padding: 10px; }

And the for the h2 heading I added more margin to the top:

h2 { margin: 30px 0 10px 0; }

Section: Questionnaire

On the rest of the page (starting at „When You Send a Request…“) John is talking about the steps of his process and more details, followed by a call to action.

I’m taking a screen break for now and will return to the page later today to edit and refine the copy.

Three hours later I’m back. Here’s how I would edit the copy of this section:

First, you send me a filled-out questionnaire

When we choose to work together, your success is my focus, for both the project and your company. Through my process, I’m creating value for your business that leads to a stronger bonding with your existing customers and prospects.

To see whether we are a good fit, I need to know who you are, what you need, what business goals you have, what success looks like for your project, and who your project is for. The questionnaire helps me do that, it’s therefore in your best interest to fill out the form properly. The successful Q & A process sets us on the right foot in talking about the work we’ll be doing together.

Then, I review your submission

I take a look at your answers. I’m checking for clarity of your goals, your passion about the project, and why you chose me as the right designer for the job.

If, after my review, I see a good fit, we’ll start talking to really get into what your project is all about. Knowing all details related to your business objectives helps me achieve a better result.

I removed all words and phrases that didn’t add value.

Section: Trust, roles, responsibility

Here’s my revision for this next section:

Planning for success

Success requires mutual trust. If you have no confidence in my abilities as a designer, that’s the end of our interaction. If I don’t believe the words and numbers you’re saying are the truth, there’s no ground to continue. So, let’s make our roles clear.

You’re the expert in your field, I’m the professional in mine. I’m solving your problems and help you achieve your goals. You, on the other hand, know your target audience and marketplace better than anyone. As a result, I’m trusting you to provide those goals cleanly and clearly, and send me the content related to your character design.

As design professional, I’ll take on the responsibility of delivering a solution that matches your communicated goals.

Communication is key. We’ll be talking thoroughly through your goals, and we’re going to dig up every piece of information I need so that I can deliver the best solution.

I want to solve your problems. This only happens when you and I communicate upfront, openly, and frankly about the project and your company. If either of us fails to ask questions or get clarification, a void is left that’s going to be filled with assumptions, miscommunication, or poorly defined goals. We don’t want that.

Goals set the direction, money doesn’t

You may notice that I don’t talk about money on my questionnaire. There’s a reason for that.

My responsibility as a designer is to understand your needs and the value of the solution to those needs before discussing price. I want to understand what the best route to success is for you before quoting a price.

I don’t charge by the hours I work because it creates worry and uncertainty for you about the final price and distracts me from making well-informed design decisions in service of your success. Also, as a designer, I’m always thinking about my work, at my desk and away from it. Quantifying that time is extremely difficult and unfair to you. An hourly price is a distraction and serves neither of us.

Signing the contract

Once we’ve had all of the talks we need to have a clear understanding of the project, you will receive a letter containing the agreed project goals and the terms of our agreement. Then the magic will happen from this point forward…

There’s nothing more to add. I only briefly want to mention that I added a horizontal line between this section and the next one to create a caesura. I also gave the line a CSS margin:

margin: 45px;

Ideally, John would add more images to create more visual excitement while reading. I think he’s aware of that. For now I’m leaving horizontal line as a placeholder reminding him of that lack.

Also, keep in mind that I turned all h1 headings to h2 headings to keep the semantic HTML hierarchy in order: in one section there can only be one h1 which is „Design process“ in John’s case.

In addition to that, at any occasion where John didn’t talk with confidence and used passive language or a „we“ instead of active language and „I“ (because he’s designing it, not the client) I rephrased so it sounds confident and like he knows what he’s talking about. Who wants to hire a non-confident professional?

Section: The three stages

As before, I’m directly creating a revision of the text the way I would rewrite it. In my revision, I’m concentrating on making clear that John is talking about the process when working with a client who pays him. Any deviations I delete.

Note that I took another break of two days after before I revised this section. So, here’s my revision beginning at John’s original „It starts with a concept“:

I work in 3 stages

I start with a concept based on our prior meetings in which you defined your needs as well as the guidelines and vision of your brand. It can be single words (adventurous, courageous, fun) or a set of ideas (A starry-eyed explorer. A penitent, lonely hero. Caretaker and Protector.)

With the concept at hand the work starts, in order.

From big to medium and small

I make big decisions first to have a foundation. The foundational work is based on the information you provided. Then I define individual parts of the foundation (medium stage) and finally, I polish the figure with appropriate and goal-oriented details (small stage). The small stage builds on the medium and big stage.

Stage 1: Big

In the big stage, I’m taking care of the initial development of the character design. I’m using 5 sub-stages (or steps):

  1. Silhouette
  2. Sketching
  3. Face
  4. Refined Sketching
  5. Iteration

Step 1/5: Silhouette

My design process starts with loose silhouettes and sketches. I’m using the business goals and the concept that we established in our meetings as a point of departure and expand from there using design elements that are suitable for the visual development of the character.

IMAGE: Silhouette

Image caption: The silhouette delivers the first impression following the well-known „Three-Second Rule”

At this stage I’m establishing what will be passed along in the visual storytelling and eventually will be communicated to the end customer. The essential shapes of the character are the first eye-catchers: Size, proportion, curves, angles and the individual elements of just the silhouette begin telling things to the customer in the blink of an eye. It’s called the „Three-Second Rule”, which means in commercial design, you have 3 seconds to make an impression on the recipient.

Any iconic character you can think of follows the three-second rule, and the customer determines how well that rule was executed on.

Once I developed a strong silhouette, I move into designing some of the details.

Step 2/5: Sketching

With the silhouette figured out, it’s time to work through the shapes of individual elements into the greater whole. At this time, I’m not only outlining shapes but designing the whole area into blocks of value so I can break apart the overall flat shape once I’ll move away from simple line art.

IMAGE: Sketching

Image caption: The sketching shows a still very loose and not yet highly defined character but it’s critical to the end success of your design.

At the sketching stage, I’m making the first important design decisions, for example:

These are all decisions I begin to make at this point informed by both the goals and needs your brief sets forth, and by my design expertise.

If necessary, I’m also making iterative changes based on the silhouette to advance the shape design from good to great.

Step 3/5: Face

The face is what connects the character with your customer. When I design your character, I ensure the figure and the face of your character address your defined needs.

IMAGE: Face

Image caption: The face is the connecting human element

Your character is going to connect with a whole world around him or her, and the face needs to say the right things. All parts communicate. That’s why I’m giving as much care to the structure of the face, as well as to any adornments or unique features being part of the rest of the whole body across this process.

Step 4/5: Refined sketching

Through internal iterations, I refine the sketches through the aesthetic lens and the lens of a problem-solver and an achiever of your project’s goals.

IMAGE: Refined sketching

Image caption: As I make major shape design choices, I’m also carefully sculpting across the design so that your character’s elements communicate the right things to your audience.

At this stage, I’m addressing the fine details of the figure, clothing, and any work on the face that I haven’t worked on in detail before. Accordingly, I’m dealing largely with accessories, mechanical detail, hair detail and many minute things that finish out the design. Great sketches are crucial to great rendering, and generally make the rendering work much easier. That’s why I’m giving the sketch refinement multiple passes before moving forward.

This refinement concludes the major initial development stage of my process, but I want you to know another step that takes place across the whole process.

The permanent (5th) step: Iteration

In professional design, great iteration happens completely behind the scenes, and it can happen at any stage of the process. A design can reach what would normally be the end of the development stage and elements may not all be completely harmonized, either to each other or to your needs.

IMAGE: Iteration

Image caption: As a design professional, I explore different paths and possibilities - which you won’t notice - and then make a professional decision on what serves your goals best.

To illustrate my point, I want you to focus on the armor of the shown knight, and some of the armor and holsters on the warrior girl. That’s where you’ll notice the most drastic changes for now.

Using the artwork you’ve seen so far as a point of departure, I’m now exploring the overall idea of your character again by trying different things that may represent your vision even more precisely than in my earlier revisions. Minor, intentional changes can be critical in providing the right answer to achieve your goals, like amendments to gesture, figure shape, face structure, ornamentation, or cut of the clothing.

In the case of my illustrated artwork, you probably noticed that the armor was changed on our knight, from a pointed kind of dome into a flat, bevelled plate. And I made a few adjustments to the armor and holsters on the warrior girl, in order to more clearly communicate the fact that she is left-handed. These changes happened in service of certain narrative properties of the characters, and to present a more visually appealing design.

I’m making a quick cut here because John lost me. I don’t see anything of what he mentioned when said:

you’ll notice that the armor was changed on our knight, from a pointed kind of dome into a flat, bevelled plate…

Where can I see that? Make the difference super obvious to me. Guide me more. I don’t like to be lost. You had my attention for a good amount of time, don’t lose it on the last mile.

Because John lost me, I left the last paragraph before „Stage 2: Polishing“ as good as untouched.

Next section: Stage 2

Moving on with my revision of the stage 2 copy:

Stage 2: Polishing

At the medium stage, I’m using five sub-stages as well:

  1. Ink line art
  2. Value construction
  3. Monochrome render
  4. Color design
  5. Final render incl. finishing touches

Step 1/5: Ink line art

Ink line art is a finishing stage where I’m making hard decisions about the art prior to the following value, color, and rendering decisions. Line art may not be required by certain projects, but its inherent principles provide a framework for great, polished design.

IMAGE: Ink line art

Image caption: Ink line art is an optional step according to the stylistic needs of the contract.

Step 2/5: Value construction

„Value“ hereby means the level of light an object has at specific points along its surface. Value depends on the applied category of light and the design properties such as material, form, and how much an object reflects, absorbs or produces light.

Value can be used in the context of reference material or developmental art, and it’s crucial to the proper development of both universal material properties (skin, hair, eyes) as well as material properties unique to your character (clothing, accessories, machinery, if applicable).

IMAGE: Value construction (native value)

Image caption: Through „value construction“ I’m making clear how much light a surface receives without, initially, using special effects.

My process first handles „native value“, that is, the base level of light a material displays without any special effect of shadow or reflection. I’m using this to break apart the overall tone of the figure and demarcate its internal forms. This is similar to designing good writing in that some visual texture is being added to the design to lead the eye and give it resting points throughout the design.

IMAGE: Value construction (basic value)

Image caption: After the native value, I’m adding basic value that enhances the 3-dimensional form of the character.

Once I selected and designed the native value, I continue the value design and enhance the three-dimensional form by blocking in some light and shadow across the figures. To accomplish this, I establish the direction of light first: I examine the artwork and determine where light is emitted from. This can be a large primary source of light, most commonly, or it can be smaller points of light emitted from the elements of a character design. Both cases can be used at once, but whether one point or multiple points of light are used, I must determine and establish the sources and direction of light to know how to render out the forms.

Step 3/5: Monochrome render

Once the light and shadow are blocked in, I’m making a nearly full render strictly dealing with monochromatic light and shadow. As complicated as this particular step can appear to you, it’s no more than repeating the previous step (native value design) in that I’m taking the individual elements of the form and breaking them apart further by designing additional points of value into them. This creates more visual texture and really sells the solid form of our characters. This deeper value design is applied across the whole of the illustrated figures until I have accomplished a complete treatment of them.

IMAGE: Monochrome render

Image caption: Though complicated in appearance, monochrome rendering is basically the repetition of native value design applied to more details.

I’m still allowing myself to make iterative changes even at this point, as long as those changes effectively serve your goals. These can be hard choices sometimes.

Some iterative choices can actually be easier at later stages due to what a design stage requires. Because rendering is a painting mode rather than a drawing mode, a new perspective of design is enabled here that, in this case, allowed the changes to our cyborg and to some smaller elements of other characters.

I’m stopping here as well because John lost me again. I don’t know what a „painting mode“ is or what „drawing mode“ means. Explain it to me. Also, show me the changes to the cyborg. I don’t see them as easily as you do.

I’ll continue with the color design section.

Step 4/5: Color design

I’m doing the color selection once the value design and rendering has been completed. It’s an objective process based on your brief and goals. If you require a certain color (due to branding, narrative requirements, or corporate guidelines), I’ll use it. If I need to exclude a color, I won’t use it.

IMAGE: Color design 1

Image caption: Color design is a delicate process that takes your color requirements and the personality of the figure into consideration.

Great colors always build on the construction of great value. Color is a property of light, but the behavior of color will always be a sub category of the behavior of value. There’s a lot of heavy lifting when it comes to the effective use of color theory.

If I met all your color requirements, I’ll colorize with respect to the essence of the character so that I can bring out the right relational response from your audience.

IMAGE: Color design 2

Image caption: By exploring and testing, I’m identifying errors and color mismatches, and fix them.

I’ll then run though a careful exploration of hue and saturation with respect to the value that I’ve constructed so far. At this stage, I’ll be able to see any faults that occur between the design of the value and the design of the color. Accordingly, I’m making minor corrections to value in order to preserve the dimension of the form as seen in the illustration. Though I’m aiming to get as close as possible, I don’t worry about color perfection at this part of the color design process.

Once I completed the first pass of the color design, I’ll refine color adjustment to produce the most effective final rendering as shown in the artwork. I achieve those colors through tests of color balancing. If something I tried to use does not effectively serve the design, I change it.

Step 5/5: Final render incl. finishing touches

The final render is the finishing stage of my illustrative work. At this point I examine every piece of foundational work and then refine it into its final version that fully reflects the stylistic needs of your job and meets your goals.

If some rendering work hasn’t been done already during the sketching, line art, value construction or color design stage, it’s now tied up at this final point. Any piece that you’ve contracted with me to do, I’ll finish at this stage.

IMAGE: Final render

Image caption: In the final stage, I’m refining all pieces to their final version so I can present it to you after.

I’m making sure all details we agreed on are present and that the design reflects the concept. I’m addressing corrections and refinements as necessary to give the design its polished final touch - like changing the knight’s sabatons (covering the feet) into sensible and stylish boots with armor plating.

Almost done: Stage 3 and call to action

It’s the last section. Here’s my revision of his copy:

Stage 3: Presentation

Once my work is complete, I’ll invite you to the presentation page showing the result. On the page, you’ll see a case study of the work and an explanation of certain design decisions I made along the way to produce the best solution.

I’ll make deliverables available for preview on the presentation page as well. The preview items on this page will be flattened image files containing a branded watermark.

At the end of the presentation page, you’ll see a link to pay the final invoice for the work and receive your deliverables, most commonly as a set of layered work files at full working size containing everything you need to export new image files for web or print usage. According to the established needs of the project, I’ll also provide exported files.

Let’s get to work!

I love my work and working with you. Each project I finished successfully (yours as well) serves as a case study on my website. This is beneficial for you and me: A case study grants potential clients to see the problems I’ve solved and how I’ve solved them, and the case study serves as a point of free advertising for your brand or product. In addition, a case study is a free resource of education for creative professionals on how to effectively design, work as a professional and run a presentation.

You’ve seen my process, learned how I worked and got to know me a little bit. Now, I want to get to you. What’s your company about? Why does your product matter?

Give a face to your brand and start telling your story with a character that is relatable and instantly connects to your customers.

Tell me about you!

That’s it!

I’m taking another break because it has been intense hours. The last thing I’m doing now is removing all these links in the footer so only the copyright message can be seen.

I also wanted to change the size of the text placed on the call-to-action button („Tell me about you!“) but somehow changing the CSS was not that easy. John should fix that himself and make the text much larger. It’s the call to action, after all.

In the footer with the copyright I also changed the CSS a bit to give it more padding and a different color:

.footer_copyright_cont { background-color: #011126; color: #aaa; padding: 10px; }

And that was it.

Conclusion

I wonder whether I receive good enough value from John. Certainly, he walked me through his process but did I get something that I could apply myself?

I’m also a bit puzzled whether to see the analysis as a client wanting to hire him or a stage 3 reader wanting to learn what he’s doing.

As a client, I got a good insight into his mind, work attitude and approach.

As a reader, I got curious but the „Hire me“ button was not the right call to action for me. I’d like to see more free value from him. For now, I didn’t move up to stage 4 but became comfortable at where I was before (stage 3).

My wish list as a reader: Give me a guide, even a how-to video on how I can exactly make a character according to your process. Give me that value for free and I’m sure that this will make a big impact my stage in the buyer’s journey.

Thanks for reading, I appreciate your attention.

Alex :)


If you’d like your own landing page to be analyzed, follow my 1-step process.


served by naii.io