Designing Kaleidoscope for iOS
How we transformed the world’s most advanced desktop diffing app for the iPad.
After gaining notoriety over the years as a premier file comparison tool for Mac, we recently created and launched Kaleidoscope for iPad. Unlike other major product endeavors, when we set out to bring Kaleidoscope to iOS, we had a lot of questions already answered. These answers came from the existing Mac version of the app, but also through some early discovery Olivier Charavel did in 2014.
Understanding the Landscape
As Olivier and I started working together on designing Kaleidoscope for iPad, we established a few basic guidelines on what the app needed to do:
- Maintain feature parity with the Mac app
- Leverage iOS specific functionality
These guidelines helped focus our attention on certain features and solve the problems that came along with them. Despite having so much to start with, bringing existing functionality to iOS posed unique challenges that we started trying to solve almost immediately. We used a series of tools to get the job done from Figma for wires, storyboarding, and even some early design explorations; to Sketch and Principle for fine-tuning the design and interactions. These tools have become integral to each design project we undertake at Black Pixel.
Getting It Right
For those who haven’t used Kaleidoscope in the past, its core functionality is broken up into three main buckets or scopes (see what we did there).
Image Scope
I tackled Image Scope first. What appeared to be a simple, straightforward need turned out to be a complex web of challenges, including how to translate the features Kaleidoscope fans love along with the desktop app’s design patterns for a touch interface and mobile views.
Thinking about how we can not only mirror functionality from the Mac, which was one of our basic guidelines, but also create a completely new design experience on iPad was a head-scratcher. We spent the first week brainstorming unique card-based layouts, draw-to-reveal functionality, and heavy gesture-based interactions. This phase of a project is always great, because it allows us to dream a little and approach problems in unique ways.
We struggled to find a good, balanced approach to the UI and handling multiple simultaneous comparisons. After collaborating on various approaches, our CEO Daniel Pasco suggested we try a master detail view, with options to be shown or hidden, as the main structure. This direction ultimately afforded us the most flexibility with a reasonable amount of development lift, knowing we would eventually support other features and functionality.
We pushed ahead, fleshing out several views with this approach, while the developers prototyped the designs on the device so that the team could get a feel for the experience. The prototype helped us see how well the designs worked, how much focus they provided on key use cases, and how simple the complex feature of the app felt. With preliminary validation, we started refining the work even further.
Text Scope and Folder Scope
Much like Image Scope, Text and Folder Scope were full of complex challenges. One of the biggest challenges for each of these was to design the app for Split View, which allows users to interact with two apps side by side. With the new Files.app and drag-and-drop functionality in iOS 11, having the ability to multitask with Kaleidoscope was important.
To enable this feature, iOS depends heavily on size classes, Compact and Regular, to decide which layout should be used across the various iOS devices that Apple makes. iPad apps are expected to support Split View. This means we have to design iPad (Regular) and iPhone (Compact) layouts.
For Text Scope, users can switch between Blocks and Unified views. Blocks shows changes from the two documents side by side, while Unified shows a vertical stack of changes in the same view. This works great on an iPad’s layout, but it would be impossible to view two documents side by side with an iPhone layout. Because of that, we decided to only show the Unified view for the Compact size class.
Everything Else
After completing the majority of the design lift for each of the scopes, then came the production tasks. We spent a few weeks cleaning up little details throughout the app, cutting the required assets, and working on several smaller illustrations for various states. We also worked with our content strategists to fine-tune the language used throughout the app for consistency and clarity.
Moving Forward
This was a huge team effort and wouldn’t have been possible without our incredible counterparts on the developer side, along with the rest of the design team’s feedback and help with pushing us through even our own expectations.
Download Kaleidoscope for iPad today for free on the App Store. We are offering a 14-day trial, so you can use the app before purchasing it. Try it out!
Black Pixel is a creative digital products agency. Subscribe to BPXL Craft and follow us on Twitter.
