Marvelapp Masterclass Part 1: 6 Reasons Why It's Worth Creating A Good Workflow Experience

As part of this two-article Marvelapp masterclass tailored for Topcoder, my intention is to show you what tricks you can use to enhance the workflow experience through Marvelapp. Welcome to part one.

In life and history, you can face situations that will define a significant change in the way you perceive the world, the nature of your relationships and yourself. Typically, these moments when everything changes are known as a pivot or turning point. Basically, there is a moment when you can clearly state that there was a before and an after in life, such as the discovery of fire, a newborn baby, the internet revolution, the loss of a loved one, or after winning the TCO UI Design Championship.

Loizing conquers TCO19. GIF Credits to cendhika.

A design submission also carries history with it, alongside a pivotal moment. It happens during the review sessions, the time when the client sits down to go through your design. During this moment, the client decides if your submission is useful or not and seals the fate of all your hard work, all those hours you have used to try to become victorious in the ruthless battle. The point is, this moment is transcendental to your work. Do you want to conquer it or do you want to enter a battle using wooden tools when you have powerful machinery at your disposal?

PROTO-WHAT?

A prototype is part of the available powerful machinery at your disposal. In design challenges we use Marvelapp as the companionship side-kick for our project presentation. By definition, Marvelapp allows us to create high-fidelity prototypes. Within the context of Topcoder, I define Marvelapp as a tool to create experiences that showcase how my approach solves a specific problem.

We know when the pivotal moment occurs, what happens in the review session, why it’s important to offer a top-notch experience. After being witness to hundreds of client review sessions, I dare to share with you my little but useful knowledge about client expectations when using Marvelapp and why you should use this as a beneficial tool (to make life easier for the client).

LET’S PLAY A GAME

I assume you are already familiar with Marvelapp, however, there are some definitions worth reviewing for this exercise before getting started. Let’s imagine this scenario where we have a spec asking you to create a website redesign which includes the following:

• A jaw-dropping landing page.

• A set of content pages for all the services they offer.

• The ability to quickly navigate through all the services.

• There is a problem with the current experience, users are not getting the idea of how this company works. In order to try to solve that problem, there are insights that show that creating a “How It Works” page, solely dedicated to break down the business model, would be more convenient to achieve conversions.

• It’s important to easily get to a how it works section.

WHAT’S THE APPROACH?

Blunt advice: create user paths to guide the client to take the course you want her to see. According to my experience, full working prototypes which contain 100% linked hotspots, provide too many options consequently confusing the client.

The purpose of the experience we are creating is - for your benefit - to capture our client’s attention, secondly but no less important, to solve a problem. What would happen if a client got stuck in an endless loop of a myriad of options? Isn’t it more convenient to display a clear path towards the goal?

Guide the user from the landing page to the how it works page.

When a client has a design problem normally you focus your design solution on solving that problem. It’s wise to align the prototype experience with the solution for the design problem. It’s also fair to say that you work to take the user from point X to point Y in a frictionless fashion. Considering the problem statement; would you want the client to wander around your design with multiple hotspots? Making the solution difficult to find will be a very expensive price to pay. Herein lies the philosophy behind the concept of creating an experience for the review process: tailor made for the client to jaw-drop at the convenience of your solution, delightfully explained with a well-defined workflow through Marvelapp.

BENEFITS IN A NUTSHELL

It’s true there are different ways to accomplish things. What I’m introducing is just another way. You might ask yourself, why should I follow this? What is so good about it? Here are four reasons that summarize the good calories in this juice:

1. Provide an offer the client can’t refuse - an experience
It’s important we understand we are not providing just another Marvelapp presentation; it’s unique in the way it’s wired up. Strategically selecting click paths (hotspots) ** to guide the user through the flow that solves her problem **.

2. Stand out and make a great first impression
You can read the psychology of branding articles for more gritty details about the topic of first impressions. It’s a known secret that designers don’t take full advantage of Marvelapp features. Combined with the experience workflow not only will you be standing your ground but you’ll be doing it elegantly and efficiently.

3. Reduce confusion
This approach’s main principle of offering a clean path from X to Y, is clear from distracting hotspots. If you place all your hotspots on screen one, chances are that there will be confusion resulting from providing too many options (that’s what options overuse does, makes you think). You want the client to think about how to get to the point that solves her problem? I guess no. By not implementing all these hotspots you reduce confusion.

4. Increase your chances of receiving a checkpoint prize
By providing a workflow experience you will impress the client, your submission will cause impact and won’t be forgotten easily, and chances are that you will get a $100 checkpoint prize.

5. Receive better feedback
Clients tend to reward good submissions with very detailed feedback. Why? Because they like the submission and want the designer to move forward in the final round with more information to provide a better solution. The client-designer relationship is win-win. If you make a great first impression it will definitely give you more points as a favorite, ergo, more detailed feedback. The client will be focused on the workflow experience, and as you made her life easier, she will pay you back with feedback about the workflow and the design problem, not just about the UI. It’s definitely an advantage.

6. Show mastery through realistic behavior
Thanks to the wonders of Marvelapp features, by working in prototypes you’ll learn how to use functional behaviors that the client expects to see even if they are not required in the spec. Think about it, if you’re used to tapping a burger menu to see menu options sliding in from the left on your phone, then you have in your hands a prototype to review which offers a burger menu, wouldn’t you be tempted to tap it? It’s the natural response to our habits; our minds will make us think: this is tappable. During review sessions I receive this feedback a lot - why isn’t the menu working? I think it helps when the client has fewer questions about why things don’t work but more suggestions about how to improve possible weaknesses of the workflow. It tells the client: this designer worked on the main problem, this designer knows what she is doing (mastery), I feel confident, I trust her work.

Convinced? Jump in to read the second part of this masterclass series: 7 Tricks To Improve Your Workflow Experience.

SNEAK PEEK

For your convenience, I created this example project in Marvelapp where you can see all these tips in practice. In the follow-up article, you’ll learn how to build the exact same behavior.

https://marvelapp.com/82aaafb

If you would like to see the project organization to take a look at the hotspots, navigation tricks and modal implementation, do not hesitate to contact me. I will gladly send a duplicate version to you. Here is my inbox: mahestro.topcoder [at] gmail [dot] com.