You wouldn’t be alone if you thought prototypes were just for designers. We used to think this too! But since all a prototype is, is a mockup of a digital experience, it turns out there are some interesting use-cases by the non-designers in our Customer Support Team.
The way we use prototypes in Customer Support at Marvel is very similar to how they’re used by designers, just in a different context. We use them to communicate concepts in a visual, clear and interactive way with users.
Let’s get into how we use prototypes to enhance our user interactions, and how our own Support Team uses prototypes.
User walk-throughs & troubleshooting
One of the most common ways we use prototypes in our day-to-day interactions with users is sending a walk-through prototype to solve a customer issue or to explain a concept. It helps us communicate clearly what we mean to the user and works great for step-by-step tutorials.
We use hotspots as a simple guiding tool to show users where to click and how they can interact with Marvel to solve their issue.
We’ve found that using a prototype to communicate cuts to the chase to remove ambiguity, and solve the issue for the user. Creating a prototype in Marvel only takes a couple of minutes, so it usually means we can solve the issue for the user much more quickly than over several back and forth emails.
Inspiration on what can be built using Marvel
Another way we use prototypes in Support is to showcase what our product can do! We’ll often send example prototypes like these to show users the creative possibilities of prototyping in Marvel.
Example prototypes are especially good for users who are starting out who could do with some project inspo. The example prototypes can be cloned to their own workspace if they want to copy any of the elements to give them a head start on their project.
Showcasing the product can be equally useful for long-time Marvel users too! We might be able to introduce them to a new feature they haven’t seen yet. Or if they’re exploring what a paid feature can do, sending them a prototype means they can try out the feature without committing to it first.
Embedded prototypes in our Help Centre
The Help Centre is a searchable resource answering the most common issues in Marvel. It gives users the ability to access the answers they need right away, rather than having to wait for a reply from a human (lightning fast that we are 😉⚡️).
Prototypes are very useful in the Help Centre. They can act as tutorials, demos, or a showcase for new features. They’re a great way to bring text and static images to life, in a way that feels real to the user.
In our Help Centre, we have embedded example prototypes into help articles wherever we think it adds clarity, to show users what they can make, and how they can solve problems with Marvel.
One of my favourite examples is How to use animated GIFs in your prototypes, which showcases a spiffy prototype with GIFs 🦑
Another good example is the article on Layers, where the embedded prototype shows how you can use layers and sidebars to create a seamless shopping experience.
Many of our Help Centre articles include videos too. But we’ve found prototypes are often even better than videos because they are interactive. Allowing the user to click through a prototype is a level up from passively watching a video. It’s more engaging, and more fun!
Redesigning our Help Centre
Last but not least, we used prototypes as part of the redesign of our Help Centre. Prototypes are a great way to showcase a new design to your users, even if the product is not completely ready. They get to have a first glimpse of your product and input to the final outcome. While you get input from users to improve your design before shipping!
When we decided to redesign our Help Centre, we followed the same process as if it were a page or feature in Marvel being redesigned. Like any good design process, we followed a systematic step-by-step process, involving prototypes:
- Identify user pain points
- Design wireframe prototype in Marvel
- Use Marvel User Testing to collect feedback
- Design low-fidelity prototype in Marvel based on feedback
- User test again
- Design high-fidelity prototype for final approval
- Use Developer Handoff to share the design with others
- Commit to code!
Both Prototyping and User Testing were crucial aspects of this design process, because they enabled the quick and easy collection of user feedback. The Marvel Support Team were also involved as testers! It was fun to get to test the new Help Center and identify any wins and challenges to ensure it would be fit for purpose for our users.
