At thoughtbot, a small group of us are building Poppins, an iPhone app for
keeping your GIFs and memes in good order (obviously an important task). It’s a
simple app. It consists of: a collection view, a detail view, and the ability to
share and manage items using iOS’ UIActivityViewController. With
it being so straightforward, we were free to explore, get creative, and allow
the interactions to shine.
We started the design of Poppins by promptly getting lost in interaction and animation fantasy land. The design team used pen and paper to sketch out some unique solutions and came up with detailed animation concepts. It was a great start, but when it came time to actually build the product, describing each animation to the development team proved to be a foggy and confusing process. The problem was that pen and paper only went so far. Our sketches didn’t help answer the utmost question: are these ideas feasible to implement within a fixed timeline?
How Pixate helped us
What is Pixate? Well, Pixate helps designers build native prototypes without code. It’s a great product that allowed us to focus on Poppins’ interactions very quickly. We validated our ideas using working prototypes within minutes (more complex interactions took around half an hour). When presenting the concepts to the development team, we were able to share usable samples. These lead to a smoother back-and-forth and easier implementation.
A quick case study
In many photo gallery apps, there is a clear distinction between the collection view and the detail view. If you want to look through your photos, you scroll through a grid of thumbnails and tap to expand one. Then you swipe left or right to progress through your images one by one. With Poppins, we wanted to design a faster, more intuitive, way for users to navigate their files.
Our solution was something that allowed users to view their image at full size and in context, and to quickly flick-and-scroll through everything as a whole. We came up with this: We combined the collection view with the detail view and organized the collection view into two columns, one for GIFs and one for memes. To get to the larger “detail” view, a user would swipe left or right to expand a column to the full screen width. This way, they can focus on one image at a time like they’re used to in their Camera Roll, but never be separated from the rest of their files.
Straight to rapid prototyping
To test our thinking, we jumped into Pixate. By using shape layers rather than prepared assets, we produced a prototype in no time. To start, we created two tall rectangles (a blue “All Gifs” layer and an orange “All Memes” layer) and grouped each with a bunch of smaller gray rectangles acting as image placeholders.
Because Pixate doesn’t have a pre-made “Swipe Right” option, we used a draggable invisible layer (named “Draggable”) to fake the swiping interaction. The layer had a transparent appearance and a max offset of 100px from the left edge to ensure that it didn’t end up off the canvas. The “All Gifs” and “All Memes” layers were then given animations (Move and Scale) that reacted depending on the “Draggable” layer’s position. For example, if “Draggable” was moved 100px from the left edge, “All Gifs” would scale 2x and reposition accordingly, and “All Memes” would move off the screen. The result was snappy and, with some tweaks to the transition delay and duration, felt natural to use in hand.
(The “Draggable” layer has been made light blue to show its position)
Thanks to Pixate, we moved from initial sketching to playing with something on an iPhone in half an hour’s time. When we did have assets ready to try out, all it took were a few more clicks to replace our rectangles with images, and the result was fantastic. It looked and reacted like a real app.
Our outcome
The process was quite efficient. In a short amount of time, we were able to test various ideas and rapidly decide which ones to keep. It’s reassuring to jump into the visual design process with the knowledge that our interactions, transitions, and animations were (or were not) validated and feasible. We found that although not all of our proposed concepts may not make it into version 1.0 of Poppins, we have the start of something interesting. Pixate also enabled developers to give feedback and work on implementation in tandem with designers, as they had a prototype next to them that they could play with while building out the app. No messy storyboards stitched together with arrows mimicking the idea — the desired interactions were right on the device.
Hiccups along the way
Linking multiple actions together in a Pixate project is difficult. If one layer was renamed, all dependent conditions needed to be updated manually. If there were multiple ways to trigger an animation, that one animation would need to be created multiple times. We settled on creating multiple small prototypes, with each focusing on one specific interaction in the app.
In Pixate, it’s a bit tricky to scale and position layers. While you can position a layer with pixel measurements at its base size, it does not translate well when scaled up. For example, a 150×150 rectangle that’s initially positioned with its top left corner at (0, 0) needs to be placed at (75, 75) if scaled up 2x to keep the same anchor point. In our prototype, there was a good amount of guess work when it came to this.
Depending on what device you’re viewing Pixate projects with, you may have to use a transparent appearance rather than 0% opacity; specifically for layers that can be interacted with but should be invisible. On Android devices, our “Draggable” layer worked fine when set to 0% opacity, but would not work in iOS.
Wrapping up
All in all, Pixate allowed us to mock up multiple concepts within minutes. We covered user flow, design interactions, development feasibility, and UX flaws within 3 days of starting the project. We were able to hammer out an array of possibilities quickly, poke holes in them, and refine. If you design for iOS or Android and haven’t tried Pixate, you should. Their video tutorials are a great way to get started. Its easy-to-learn mechanics with flexible animations make it a great addition to the design toolbox.
