Using Miro & Webflow to go from Customer Journey to prototype in ONE day

What's next after creating a Customer Journey?

Today I'm going to walk you through my thinking process when solving a complex problem, using Miro and Webflow to go from customer journey map to prototype in one day.

For me, that's one of my favorite ways to learn by looking at the thinking process and other people's actions solving complex problems.

I will be using Miro as a digital whiteboard to outline the challenge, generate some ideas, and then make use of Webflow to prototype a page on my website without writing any code at all.

I will be using Miro as a digital whiteboard to outline the challenge and to generate some ideas and then make use of Webflow to prototype a page on my website without writing any code at all.

Okay so let's talk about the challenge shortly.

As you may know, I have created an online training program called Future Proof to help teams define their new flexible and hybrid way of working.

The first team just completed the program and I'm super happy that a majority of the responses were positive.

But of course there's always room for improvement.

So in this case, I want to focus on creating a smooth experience for people before they actually started training.

So that's the stage where they know they're going to do the training, but are not sure yet what to expect in the coming weeks.

To do that, I will be using a number of best practices and for most of them I've created videos in the past already.

The first step is to rephrase the challenge into a how might we question that I can solve.

Then let's create a simple customer journey map to get a better understanding of the problem.

After that let's do lightning demos around to take inspirations from other companies solving similar problems.

Then in step four we're going to prototype the solution which I will be doing by sketching some things out first and then creating them in Webflow.

And then finally, we're going to talk about some next steps that I want to take.

Let's start with the how might we question first.

In this case I have decided to rephrase the challenge into this question how might we create the best possible online onboarding experience for our Future Proof trainees.

By the way this is an experiment for a new type of video.

So if you want to see more of them, then let me know by smashing the like button below this video.

But we have created how might we question, so we want to create the best possible online onboarding experience, and we can move forward to the customer journey, the next step.

And in this case, the customer journey looks like this.

On the left side we have trainees and we have decision makers.

In this case trainee is usually a group of people around six, seven maybe eight people working together on a daily basis.

And there's a decision maker involved.

And this is actually the person who decides if the team is going to do the training or not.

Sometimes the decision maker is part of the team and sometimes he or she is not.

But as you can see, there are a lot of steps happening before I actually get in touch with the trainees for the first time.

So that means that the decision maker probably sees the benefits of doing the Future Proof training with their team.

But as you can see for a majority of the steps, the trainees are not involved.

So they don't see the benefits yet maybe.

They don't know what to expect.

And I put a lot of weight on the shoulders of a decision-maker to explain that to a trainee.

So what I wanna do is to focus on this part of the journey and to be more specific only on the beginning part.

And if we look at the full program, then you can see it over here.

So it's a five-week program and there's a preparation week.

And that's actually the part I want to focus on.

This preparation week, how can we improve that.

Because what I learned is that there are still a lot of questions, a lot of confusion, a lot of expectations about what the weeks will look like.

So that's the part we're going to focus on for this video.

And let's zoom in even more on the preparation week.

So as you can see over here, the black boxes I ask people to do four steps on their own in the preparation week, and that's basically it.

So that's getting an idea of what their goals will be for the training.

Then in week one, I asked them to do a couple of steps by themselves again.

And then on Thursday we have a live workshop with the whole team.

And then the Friday after we have a one-on-one like a personal conversation with the people.

And what I noticed and will be a quick fix is to move these one-on-ones to the preparation week, because this will make it easier for people to get started and to find their way and to see what they can get out of this training.

So that's a pretty quick and easy fix already, but there's also room for improvement with the tooling 'cause right now there are a lot of tools involved and people have to figure out a couple of tools before they can actually start with the first assignments.

And that's the part we're going to focus on in the next steps.

So time for lightning demos and lightning demos are a quick and inspirational rounds to look at examples of how other companies are solving a similar problem.

And in this case, I think I've six or seven lighting demos.

And the first one is a lighting demo of the current flow that people have to go through to be able to get into the learning environment.

So what you can see over here this is the learning environment where for every week, so this is the preparation week, this is week one, you can see the assignments and the videos and the things people need to do before the live workshop of that week.

And the first time they want to get in here, it's a pretty a hassle, 'cause right now they receive an email with the title redeem your copy of Future Proof.

Then they get to a page where they have to set their password and then they get a message that their email is confirmed.

Then they get a different screen where they have to agree to the terms and conditions and privacy policy.

Then they get to a different step where there's an overview of training programs, but they only have access to one.

And that's why they only see this one.

And then once they click that, they get into the actual learning environment.

And of course there are way too many steps in there right now.

The problem is that I am working with Teachable an online platform to host your courses.

And there are some really nice things in Teachable, but this is a part of Teachable that I really don't like.

So what I'm going to do is to figure out a way where I can create this part of the journey on my own website workshopwenesday.co, and then link them to Teachable to get to the actual lessons.

I do like this overview though that you are able to click to collapse and open the several weeks.

So this is something I want to keep.

And also the progress bar is something I want to be able to show in this outline.

Another example that I want to make use of in this case is a part of the learning page of the Future Proof training program and more specifically this part.

So here you're also able to click and to expand and to collapse weeks of the training program.

So I already have this, this is build in Webflow.

So that makes it easy for me to use this part in a prototype today.

And then a smaller thing that I really like is the progress bar in Spotify right now.

If you're listening to podcasts and you're only halfway through then it will show there pretty quickly so that you can see how far along you are.

And also I like this dark mode to design.

Actually, I used a lot of their design as inspiration for the things I'm doing.

And then another example that I like is Duolingo.

And what I like about this is the gamification elements and more specifically an achievement.

So you're able to achieve certain levels by earning experience points.

And I think the gamification can really help in enabling people to take action and to see the progress and to feel rewarded for the progress that they're making.

So that's something that I would like to put in.

Also, what's nice in here is the progress that you can see over here.

In this case I don't have any friends on Duolingo, but if you have friends then you can see a number of friends here.

If you're doing this program with a team and you can see each other's experience points or progress in this case then that could also be helpful to make even more progress.

So that's a part that I like.

And also here, the progress bar in general, they have two different progress bars.

That's overkill for what I want to achieve, but this progress this is something I definitely want to have in.

And another website I want to take inspiration from is Ubersuggest.

You can take a quiz over there and then they generate an action plan for you, seven week action plan where there's a lot of actions you can take to improve your search engine optimization.

And what I really like about this and what I'm definitely going to implement in my solution is the grouping of the weeks.

So in this case, the week one, you can find an overview.

This is what you will learn in this week.

And here you can click through to every video or every activity or every worksheet for that specific week.

So now people have one place where they can find everything they need.

So I really liked that.

So that's going to be part of my solution.

And then two more examples you Uxcel.

I don't know how to pronounce it.

But what I really like about their learning platform is the way overall design is really really nice.

It's really clear, you can see how far along you are.

You can see what's in the program.

And if you click through, for example, in this case on inputs best practices, then you can see there for that specific module, what you're going to do and you get all the materials that you need for that specific lesson or that specific module over here.

And the last example is School of Motion.

Again, progress bars, there's a team over here.

And what I really like it here is also the learning goals.

These are check boxes, which you can click yourself.

So this is something you have to click yourself to make the progress bar move further along.

And then this way you are really forced to think about if you really achieve that learning goal.

So I really liked this approach.

And also in here, there are transcripts.

I didn't screenshot it, but this transcripts, they are clickable.

So every line that is being set in the video you can click it and you can immediately go to that part of the video.

This is too much for me right now because I know that's a pretty expensive technology, but I do like that part so maybe in the future.

And now that we have that let's focus on building the prototype.

I'm going to build the prototype in Webflow.

And Webflow is my choice because the whole website is already in there.

So that makes it for me pretty quick and easy to create a new page and to test out new things.

So like I showed in the lightning demos, if you go over here, you can see the weeks already.

So this is a design that I can copy and paste pretty quickly.

And I'm going to adjust this to my needs.

But before I dive into Webflow I like to make a sketch of the page that I'm going to design in Webflow of the prototype.

So what I'm going to do now is to work on my iPad.

I'm going to sketch some things out, I'll record my screen so that you can follow along and then I'll see you back in a bit.

So I finished the sketch and I was able to reduce the amount of steps that the training needs to take before arriving to the learning program page to only two steps.

And the first step is actually this one.

So step one is where they receive an email.

They get a video preview, a thumbnail of a video that I recorded for them.

And there's also a magic link in there.

And a magic link is a link where you click on and then you arrive at your personal page without logging in.

And that removes the need of creating an account and remembering a password.

And then once you click that magic link you enter their personal page.

So an overview of the weeks of the Future Proof training program and then per week.

So this is the preparation week.

In the week you see the amount of time it takes.

You see, of course the title of the week.

You see the progress bar, of course, it's in sketch.

And then you see an explanation of what you can expect in this week.

You can see video of that week.

And here you can see the learning goals that people are able to achieve in that week.

And then below that there is an overview of the materials and that's videos, and a quiz you have to do or a PDF that you can download.

And after finishing the sketch, I went into Webflow to make the prototype digital.

And what I did was to combine the things that were already there and then add some flavor to it.

So what you can see over here, this is the prototype page.

This is the page that I want to test with users.

I would tell a bit more about that in the next steps but for every week we can see how far along you are.

So in this case 30%, or you did not start the week yet.

And then if you click it, it expands.

And then for the week you can see an overview of the description.

You can see the video that introduces that week.

You can see the learning goals and you can even check off the learning goals so that the progress is start.

And then below that you can see the videos and the assignments of that week, where you can press the start button to actually start the lesson.

Now you might be thinking that's different from the sketch and that's true.

I experimented with two different formats.

So this is more like the sketch that I made.

And I was not super happy with this format because it was a bit unclear if you already finished something or if a specific action still needed to be done.

So that's why I tried this one.

I'm not sure yet which route I'm going to take.

I'm going to test them both and see which one works well.

Now, the only reason that I jumped into Webflow right away was because there were a lot of elements in the sketch which I knew there were already there in Webflow.

So which I could just copy paste, for example, this element I already created it in the past and it was easy to copy and paste.

And then I just did in this case for the overview of the week, and also for the copy that you see over here the text that you see over here that's something that I already had in Teachable in this case.

And I just copy and paste it over to Webflow.

So this made the process pretty quick and easy.

The only thing that I really had to design was this progress bar and also this different views for the videos and the materials.

So on now, I would say that transforming the sketch into a clickable prototype in Webflow took me around an hour or two.

So that's it for the prototype in Webflow.

And now for next steps, I want to talk with real users.

I want to learn if this overview is actually helping them.

I'm going to plan some one-on-ones in the coming week, and then get feedback as people to go to the page so that I can learn what they're doing.

And if that's done, then I'm going to iterate and improve the prototype so that it gets better up until a certain point that I'm actually going to use it for the Future Proof program.

And once that is done, I also see opportunities to connect it with the quiz that I made about remote work on the results page.

I think there can be elements re-used of this training overview program.

I will look at that and even further down the road I really liked this overview.

And build on this setup and I'm going to use it for my other training programs as well, from a Scrum Training, the User Story Mapping Training and Buildup Camp.

‍