Wondershare Mockitt: An Easy-to-Use Prototyping Tool Designers Should Consider

I gave myself 3 hours to learn and mastered it in no time.

Vidia Anindhita
Dec 18, 2020 · 8 min read
A Jukebox music player prototype made with Wondershare Mockitt
A Jukebox music player prototype made with Wondershare Mockitt

Prototyping tools are like my best friends at work. I need to know which one is right for me, depending on the team and project I’m currently working on. I don’t have only one go-to tool since I work with different teams, and I need to adjust to their cultures. I use Sketch, Figma, Adobe XD, and Principle daily — it depends on what tool my collaborators are using.

Each tool has its own benefits and downsides. But, I think it’s part of a designer's job to keep updated with the trends and be fluid using different design tools. We need to know what tools are right for us. After all, what matters is how do we communicate our ideas at a specific time frame. Although switching between software can be frustrating.

I once said I didn’t need any more prototyping tools unless it brought new value to my work. I like to explore new tools, but I promised myself I wouldn’t use it unless I could learn it very fast, and it helped my work.

I recently discovered Wondershare Mockitt, a relatively new cloud-based prototyping tool with comprehensive functions for real-time collaboration. I gave it a shot since I read the reviews, and surprisingly a lot of people liked it. Although I don’t think Mockitt is well-known in the West. That’s why I gave myself 3 hours to learn the tool and see whether I’d recommend it or not. As a result, it took me less than what I expected to master it!

Here’s the interactive prototype I made with Mockitt in less than 3 hours. Without any prior knowledge of the product.

A Jukebox interactive prototype made with Wondershare Mockitt
A Jukebox interactive prototype made with Wondershare Mockitt.

Why designers should use it

1. Intuitive

A well-designed tool is a tool that doesn’t make the users wonder how to use it. Designers know this. What struck me the first time looking at the interface was it felt very familiar. Even though the inspector's placement, artboard, and widget tool are not the same as other prototyping tools, it didn’t take me long to navigate things. It was designed with the designer's mental model in mind.

Wondershare Mockitt interface
Wondershare Mockitt interface

2. Quick to learn

One of my favorite features is the onboarding feature and direct feedback when the user makes an update.

The onboarding makes the learning curve goes up exponentially. It told me step-by-step processes with helpful animations. This cuts a lot of time figuring out what to do. That way, I could create the prototype in a short time frame without any prior knowledge.

The direct feedback gives me confidence in what I’m doing. It tells me in a user-friendly tone if I make a mistake without feeling guilty. It helps me want to explore more since I feel confident enough I won’t break the product. It will tell me if I do so.

Onboarding feature that helps users to learn quickly.
Onboarding feature that helps users to learn quickly.

3. Up-to-date with design trends

I was surprised that it had an iPhone 12 screen setting since it only came out 3 weeks ago. It makes me think that I can rely on this tool because it’s very up-to-date and follow the design trends.

The latest iPhone 12 screen setting when creating new project.
The latest iPhone 12 screen setting when creating a new project.

4. Ready to use built-in libraries

I like Mockitt because the widget library is embedded in the tool without installing another plugin or import widgets. The library has tons of options to choose from basic, iOS, Material Design, Windows 10, and icons. It also has extended template resources that can be used easily.

Having built-in libraries does help to speed up the process. Plus, we can customize the style to match the design look and feel.

Ready to use extended widget library.
Ready to use extended widget library.

5. Rich widgets interactions

As a designer, I do think the small details matter. This is where a micro-interaction comes to play the role of elevating the experience. For example, adding animations to the prototype enhances the user experience.

The pre-defined animations in Mockitt can make the difference from just a prototype to a high-quality prototype. Even though users can only customize the delay, duration, and amount of repetition, it brings the design more to life.

Pre-defined pulse animation on Mockitt.
Pre-defined pulse animation in Mockitt.
Animation setting for the prototype.
Animation setting for the prototype.

6. Keep it simple

Other feature that makes Mockitt stands out from Adobe XD or Figma is the Screen States. This feature keeps things in one place and simplifies the interface. Rather than multiplying the duplicated artboard, it only changes the screen state on the same artboard. Each artboard then can be customized individually.

By having this feature, it reduces the cognitive loads of remembering all the screens and their interactions.

7. Easy collaborations

It provides easy collaborations that connect the product, design, and development teams as written on the website. Although I created the prototype, I didn’t actually hand it off to the development team, but I found the collaboration feature is pretty seamless.

The handoff feature speeds up the design-to-development workflow. Users can see the details of the codes and slices on each component not only in CSS but also in Swift, Android, Less, Sass, and Stylus.

Handoff feature to easily collaborate with developers.
Handoff feature to easily collaborate with developers.

8. Cloud-based platform

Similar to Figma and Adobe XD, Wondershare Mockitt is a cloud-based prototyping platform, although it has a desktop version. It improves the remote collaboration between the team members and will not hurt the laptop’s memory.

Who wants to keep things locally if we can store everything in the clouds nowadays.

What I’d love to see in the future

1. Plugin for other design tools

I’m used to Sketch to design the UI, and I was expecting Wondershare Mockitt had a plugin for Sketch to import all the components and assets to create the prototype. Apparently, they’re still working on this as the website said it’s coming soon.

As new technology always improves and designers use a single tool, it’s important to have a feature that can help designers switch tools seamlessly. In that way, having plugins to connect one tool to another would be a selling point. It boosts designers’ creativity to be more explorative without hitting the platform limitation.

2. Data plugin

Sometimes populating the data from the external database such as CSV files or Google Sheets will speed up the process. I know Figma and Adobe XD have this feature to import data through their plugins. Meanwhile, since Mockitt currently doesn’t have this option available, I had to manually input each component to the prototype that took me quite a while.

3. Color functionalities

Another downside that Wondershare Mockitt should improve is the color functionalities. It doesn’t seem like there’s a color gradient fill option. Having this option is necessary for designers to make the design more engaging and playful.

The eye-dropper tool is also not available on the web version. Users currently have to use the desktop version to use this functionality. It was pretty frustrating if I had to copy and paste the hex code for each color.

Color setting in Wondershare Mockitt.
Color setting in Wondershare Mockitt.

4. Option to see the project as a whole

It’s nice that the interface is designed to focus on one artboard at a time to make it less distracted. However, currently, we can only see which components link to other components or screens when we click on the components.

For me, when creating a prototype, I like to see the project as a whole. Taking a look at the whole user flow of the prototype helps me see how the navigation works within the project.

Event feature to create the interaction in Wondershare Mockitt.
Event feature to create the interaction in Wondershare Mockitt.

5. More freedom to customize the interactions

Wondershare Mockitt is a great tool to create both low and high-fidelity prototypes in a short amount of time. However, sometimes we need to enrich the micro-interactions based on our goals to create a prototype that’s similar to the end-product.

I like to use Principle to create a prototype with rich interaction even though it takes time to pay attention to details. It would be great if Mockitt provides more freedom to customize the pre-defined animations to make the prototypes more come to life.

6. Recording function

Getting feedback from stakeholders is essential in the design process. However, the stakeholders sometimes don’t have time to play around with the prototype. They rather see the video of how the prototype works and provide feedback based on that.

Currently, I can only share the prototype and let the stakeholders interact with it, or I have to use Quicktime to record the screen to show how it works. Having a recording function to record the prototype interaction does help the documentation.

7. Stronger community

Having a strong community helps designers learn. Take a look at Unity. The community is strong, so it’s easy for a new user to learn about the product. There are numerous online tutorials and forums to ask questions about the product.

Since Mockitt is considered a new player in the market, it’s still pretty hard to look for tutorials or ask for help. I’d love to see it grows not only from the product standpoint but also from the community.

After trying out this new prototype tool, I think Wondershare Mockitt can be the next big thing the designers should consider. I’d recommend it to create low and high-fidelity prototypes in a fast-paced design process.

Although it’s not yet perfect, I’m pretty confident that Mockitt is always catching up with new trends. I can’t wait to see how it’s becoming a more mature product to help designers creating better apps.

Give it a try!

The Startup

Get smarter at building your thing. Join The Startup’s +725K followers.

Vidia Anindhita

Written by

Product Designer/Creative Technologist who likes pumpkin pie. https://vidia.site

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +725K followers.

Vidia Anindhita

Written by

Product Designer/Creative Technologist who likes pumpkin pie. https://vidia.site

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +725K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store