5 Nifty Prototyping Tools For Mobile Shopping Apps
Warning: Plenty of GIFs in this post!
As part of a fashion e-commerce design team, we typically handle projects where there are many concepts that require different transitions to facilitate a better shopping experience on mobile. This post is a documentation of the different tools I have used for prototyping my concepts.
I cover the following tools — Pixate, Keynote, Principle, Flinto, and Framer.js . Before reading further, two things need to be kept in mind:
- I focus only on the tools I have used at Myntra, focused on mobile e-commerce design. To know about the various tools available, you can look here , here & here.
- Myntra app is available on Android, iOS and Windows, but our user base is dominantly comprised of Android users. Hence, most of my apps are designed with Android devices in mind.
In this article, I consider the following points for comparison:
- Ease of exporting from Sketch: Sketch is fast becoming the de facto tool for creating designs, so exporting assets is important in this context
- Page-to-page transitions: Simple transitions such as the one below. These are mainly user flows within the app.
2. In-page transitions/ micro-interactions: Micro-interactions are essential to the shopping experience on mobile, especially when certain cues are needed to draw the user’s attention. For this post, I demonstrate the shake effect for size selection, to alert the user to choose the right size before proceeding. (similar to the effect below)
Pixate
Platform: Android, iOS/OS X
Price: Free
One of the earliest tools I used during my time, Pixate is a very handy to prototype both Android and iOS interactions. It is easy to learn and works very well for page-to-page transitions, but I had to struggle a lot when trying to make complex interactions work on a single page.
Exporting from Sketch
- Export individual assets from Sketch as PNGs
- Add them to the Assets folder in Pixate
- Drag assets onto layers to make up the screens
- Add ‘interactions’ to screens, and other screens ‘animate’ onto the canvas based on the assigned interaction
Page-to-page transitions
This did not need much effort on my end, as the concept of layers is very familiar to designers. We use drag and drop for assigning interactions and animations.
In-Page transitions
In-page transitions are do-able on Pixate, but only to some extent. I was able to achieve the Shake effect here, satisfactorily. But for more complicated interactions, the drag-and-drop feature is too tedious to use.
Use Pixate if your design contains not more than two micro-interactions.
Pros
- Directly reviewable and interactive on mobile
- Easy learning curve
- Both iOS and Android apps — pretty much a rarity when it comes to prototyping!
- Shareable links
- Video recording of prototype available
Cons
- Can’t copy and paste components directly from Sketch. You need to export to a folder and add to Assets in Pixate
- Not for highly complex interactions
- Drag-and-drop feature can be an overkill for big projects
- No direct preview on desktop - you need the mobile app to see the effects of the changes you have made
Keynote
Platform: iOS / OS X
Price: 9.99$
Keynote is more than just a presentation tool. It is jam-packed with great features, and its “magic move” animation is a blessing in disguise. The only drawback is that it works only for Mac, and not even MS Powerpoint or Google Slides boast of the same capabilities.
Exporting from Sketch
- Modify the keynote slide dimensions to the artboard dimensions in Sketch
- Copy and paste individual assets from Sketch to Keynote
- Create the next screen on the next slide, and use Magic move to simulate transitions between slides.
- You can also add specific animations within same slide, if needed
Page-to-page transitions
It is pretty much smooth sailing for me to come up with page-to-page transitions, something which helps me quickly try out different options.
In-page transitions
In-page micro-interactions are as easy to simulate on Keynote, since all the necessary animation elements are available here aside from magic move. I make “dirty” prototypes to test different ways of feedback, to help me choose the best option.
Pros
- Quick and dirty prototyping
- Animations (Magic move) to achieve desired transitions
- Great way to test out multiple options for transitions
- You can preview the same prototype/presentation on iPhone/iPad
- Can demo highly complex interactions easily
Cons
- Not interactive — it is a slideshow at the end of the day
- Good for presenting an idea, but may not always be reproducible
- Extra work to simulate tap/scroll user interactions
- Learning curve slightly high
- Not sharable online
Principle
Platform: iOS / OS X
Price: 99$
The most striking thing about Principle is that it’s so easy to use, because it feels like a combination of Sketch artboard with Keynote’s magic move animation between artboards. Apart from the Sketch-like look and feel, Principle also allows you to preview your prototype in mobile format, for different screens, along with provision to record a video of your prototype!
Exporting from Sketch
- Copy components from Sketch artboard to Principle artboard
- Duplicate the artboard and rearrange components on the new artboard (like Keynote)
- Add interaction to one artboard and link another artboard to it as outcome of that interaction
Page-to-page transitions
I created multiple art-boards with layers of components in different positions, and used drivers to control and tune the animation between art-boards.
In-Page transitions
In order to achieve a simple shake effect, I had to use 7 art-boards, when a repeat/spring animation with a timer on one art-board would do the job.
The user has to tap the XL size to start the animation, instead of starting with any other size — a known problem with most prototyping tools where it’s hard to build logic into.
Pros
- Easy learning curve — Sketch-like layout and magic move
- Drivers and animation tools for greater control
- Supports all interactions & animations between screens
- Directly viewable on mac and iPhone
Cons
- Not for complex interactions (in-screen)
- Can be viewed only on iOS devices — not suitable for Android
prototypes at all
Flinto
Platform: iOS / OS X, Android (desktop view only)
Price: Starts from 79$
In Flinto, creating transitions is somewhat inspired by the tweening animations commonly associated with Flash. It took me a while to pull off transitions, with the help of Flinto tutorials; but once you get the hang of it, you realise it’s got a neat bag of tricks to help you experiment with different animations.
There’s a web version of Flinto called Flinto-Lite, which is limited in features but can be previewed on Android devices. The full Flinto magic is currently only for iOS devices.
Exporting from Sketch
- Flinto allows me to create hotspots on the screen to add interactions, which is a huge time-saver for me. With Flinto, I can copy a full screen from Sketch artboard, and use hotspots for page-to-page transitions
- I can also copy components separately onto the Flinto canvas, like with Principle and others
Page-to-page transitions
It is easy to create on Flinto, mainly for the reason that it offers pre-defined transitions as well as creating custom transitions. Creating hotspots is another great feature of Flinto!
In-page transitions
I must admit I was surprised at how Flinto makes it easy to create the shake effect. All I had to do was use the Spring animation and adjust the parameters.
The drawback again here is that users have to start with size XL instead of any other size to trigger the animation.
Pros
- Directly viewable on mac and iPhone
- Supports all interactions & animations between screens
- A new way of creating animations
Cons
- Not for complex interactions (in-screen)
- Can be viewed only on iOS devices. For Android devices, use Flinto-Lite to preview (only tap gestures possible)
Framer.js
Platform: iOS / OS X, Android, Web
Price: 129$
Framer.js is possibly the best prototyping tool I have come across, but it requires quite a bit of coding knowledge and aptitude; I had to read a lot on Framer docs and try out sample projects. Framer is so powerful that I can reproduce the exact animation and be able to hand-off the correct values to the developer while shipping the design.
Framer also allows you to use real-time code from the existing code base and build in logic to create realistic prototypes.
Exporting from Sketch
- Framer has the “Export from Sketch” option, which saved me the trouble of copy-pasting from Sketch to here
- Layers which are grouped in Sketch become nested layers in Framer, each of which has its own interaction and control.
Prototyping transitions on Framer
Unlike other tools, we cannot drag and drop components, but have to assign initial positions for each component and then change the positions upon the user’s interaction. Playing around with this made me comprehend how much we take developers’ efforts for granted while trying to reproduce our prototypes, and it certainly helps to put me in their shoes!
Page-to-page transitions
After exporting directly to Sketch, it took me quite a while to think in terms of x and y coordinates. I need to set the initial positions of the other 2 screens outside of the preview area, and change the position accordingly when the user interacts with a part of the screen.
In-page transitions
The user can now tap any size apart from XL to trigger shake effect. This was done using an array of sizes and defining the state of each size element relative to other size elements.
Pros
- Complete control over prototype
- Coffee-script : Use Object oriented programming to make complex transitions possible
- Simple and intuitive code
- Can use actual data — hand-off exact specs to devs
- Any platform — shareable and viewable on mobile
- Help us empathise with the developers for their efforts to ship our designs!
Cons
- Steep learning curve for designers not used to programming
- Can be time consuming — not for quick testing
Update: Framer now introduces predefined functions to reduce the amount of code from our side. More coding power to us designers!
What’s my (proto)type?
In case you are trying to figure out what tool is best suited for the nature of the mobile-focused project, I have taken the liberty of providing a summary of the 5 tools i have addressed so far. Hopefully, this should give you a clear idea of your options.
I am certain there are many tools which I have not explored yet (Facebook origami, MarvelApp, Silverflow & Proto.io, to name some). But in my honest opinion, Framer is the clear winner (provided you can code), while the rest of the tools have many fantastic features.
It’s always a good idea to keep trying out more tools and finding one which suits the purpose and context of your design. After all, prototyping helps you to articulate your concept to other stakeholders, and communication is key to a successfully shipped design!
You can find and follow me on twitter.
