For transparency: This article was sponsored by the Wondershare Mockitt team. That said, I’m genuinely happy to share my thoughts after having had a great experience with the tool and getting the opportunity to learn something new.

To quickly introduce the product for those who are unfamiliar, Wondershare Mockitt is a prototyping and collaboration tool, similar to the likes of your Figmas, Sketches, and so on, with a few unique features here and there that made using it an enjoyable and easy ride, with a fairly low learning curve to getting started.

To test out this new tool, I tried my hand at creating a rough prototype of the Instagram mobile app for iOS. Here’s what that process looked like:

Set-Up

Like Figma, Wondershare Mockitt can be both downloaded (on Mac and PC) as well as used online through a web browser. I went ahead and took advantage of the browser version here, as a way to get up and running as quickly as possible.

*Took about a minute to set up an account and I was in.*

I created a new project, setting the project name and which device I was going to build frames for. This was all pretty standard and reminded me of a blend of Figma/Sketch setups with the sort of introductory dialog you get in Creative Suite.

Design

After setting those specs, you’re put into a work area with an initial screen and a few components pre-populated as well.

*Nothing life-changing, but pretty nifty for hitting the ground running on some universal components you’re going to need anyway.*

Just some quick adjustments needed…

*Since I was modeling after my phone that’s in dark mode, I quickly changed the universal components to match with a few clicks.*

I worked my way from the top-down, building out the top navigation by pulling in a PNG version of the logo and then inserting the New Post, Activity, and Messages icons off to the right.

Here’s one of those unique features I was referring to earlier. A built-in icons menu lets you search for and insert icons from some popular libraries such as Material Design. Pretty much just takes the place of separate plugins I would normally use on Figma.

Next, I moved into creating Stories. Again, leveraging the embedded icon pack made this pretty straight forward.

*Combining a few shapes and icons gave us this.*

A bit of copying and pasting…

Some hi-fidelity detailing later…

Next, to build out Posts, I simply reused some of the visual elements and icons I had from the step prior.

Separately, this is showing how I set the fixed bottom navigation on a scrollable screen. Different than what I’m used to, but intuitive nonetheless: just drag the arrow on the left to the height of your bottom nav; anything under gets fixed, anything above it is free to move.

Animations

For one of the posts, I wanted to test side-scrolling behavior, so I made use of a built-in carousel component, which made this super easy to do.

You can see in the menu on the right-hand side just how intuitive this was to make.

And the last interaction I wanted to mess around with was liking and unliking posts. In more fancy lingo, toggling states.

*This was also fairly simple. Just added in a filled state and adjusted events to allow for the toggling interaction to happen.*

With that, I was done with the prototype!

Sharing

Previewing, handing off, and collaborating from there are all convenient with different said modes available.

For simply previewing the design:

For handing off with technical specifications:

And finally, for collaborating and exchanging feedback:

Reflection

I’m really happy with how this prototype came out in terms of visuals and interactions, especially for the time it took to create, which was well under an hour.

The tool excels in having a very low learning curve (along with company-created guides online for some of the more intricate features); unique capabilities (like the built-in icon libraries and carousel component); and powerful sharing/collaboration aspects (with handoff and comment modes).

The only real shortfall for me was some slight clunkiness throughout the interface which surfaced when looking to make more detailed design modifications with vectors, resizing, and the like. That said, for the purposes of quick prototyping (and an otherwise very user-friendly tool), it really didn’t bother me so much in the end.

Overall, again, this was an enjoyable design session, and I could see myself making use of the tool again whenever I need to create more component-heavy prototypes, benefitting from Wondershare Mockitt’s drag-and-drop functionalities.

That’s all, thanks for reading!