Picture this: you’re led to an unfamiliar room in an unfamiliar building, and sat-down in front of a mobile device. Some person called a ‘researcher’ or ‘product designer’ presses a few buttons, and then wham—you have something called a ‘prototype’ in front of you and a short verbal description as to why.
I have a hypothesis that the more exposure (and feedback) a person has around the core app experience, the better. To test this hypothesis, I’ve built a resource called ContextKit.
Adding context with ContextKit
ContextKit currently includes two Origami components and one Origami template. Each are dynamic and as native-feeling as I could get them. They cover some major entry-points for mobile apps:
- App open from SpringBoard (the home screen)
- App open from a Notification
- App open from another app (Deep Link)
You can download these components and template on GitHub. For more information on each, read on below.
SpringBoard App component
A SpringBoard component for Origami. Adaptive for iPhone 7, iPhone 7 Plus, and iPhone SE. Not too much work to adapt for iPad, if you need to.
There’s quite a lot you can do with this component. If you go under the hood, you’ll see the ability to change the app icons and names to anything you like, as well as the placement of your own app (the App Location variable).
Each SpringBoard item is positioned by the anchor property, rather than the X and Y position properties. I’m also using this calculation for the app icon pivot; each icon will ‘spring out’ differently depending where it’s placed.
It turns out that hard-coding assets and removing functionality doesn’t do too much for reducing file size. Feel free to download the iPhone 7-only version if you want to take a look or see what else can be stripped-out.
A drop-down notification component for Origami. Uses responsive-sizing, so can be used on an iPad, too.
To open an app from the Notification component, simply use an Interaction patch with Notification as the target layer and connect it to the Open App input on the SpringBoard App component.
You don’t need to use it in conjunction with the SpringBoard App component if you just want to test with notifications.
Deep Link template
A simple template for emulating the app-switching behaviour in iOS. Drop your prototype contents into the ‘Your App’ group, and customise the ‘Some Other App’ group to your heart’s content.
There are three ways to get access to these components and template. The most direct way is to download the ready-to-go files and riff from them. For more extensibility, follow either of the following:
Download the components and add to your Patch Library
Download a ready-to-go file and open into Origami. Right-click on the component and then click Add to User Patch Library….
Next time you click on the New Layer button (+), you should see the component appear. This approach is good for quick-yet-global access across documents.
Download the system and open in Origami
This is my recommended approach if you plan to use these extensively. Clone or download the ComponentKit system and open in Origami Studio. If you clone the repository, and choose Install from Current Location, the components will automatically update whenever you pull from the repository.
Next time you click on the New Layer button (+), you should see all the components appear.
Extending to Android and Framer
I’ve done the bare minimum to validate whether ContextKit is actually useful; a handful of iOS-only components, only for Origami. If these prove useful, I plan to extend ContextKit to include Android, more entry-points, and at least Framer.
iOS 10 → 11
The current animation and visual styles are modelled from the latest iOS 11 Beta. There are some inevitable inconsistencies that will be ironed out as iOS 11 matures and releases publicly this September-ish.
Information on each component’s inputs and outputs is available inside its respective tool’s directory. So far that includes:
Chris Slowik over at designers.how has published a 5 minute video tutorial on ContextKit. Specifically SpringBoard App component. It’s a great walk-through of the installation process and a real-world use case.