Everything contained on this page is personal work I have taken on independently with no involvement by Hooper Software.
Overview
What is it?
Principle Mirror is the companion app to Principle for Mac, a tool for designing interactive interfaces, allowing users to preview their designs on a mobile device.
Objective
Create an experience that better supports the workflow of a designer by solving issues focused around collaboration/sharing and file management.
Research
Why Focus on Collaboration?
User Feedback
Many designers have expressed their frustration and confusion around the tool's lack of support for design sharing within the Principle community Facebook page where some are calling it Principle's biggest issue.
How Does Principle Compare to the Competition?
Collaboration
Sharing your work with others for comments and feedback
1. Sharing Designs
Sharing an interactive Principle design requires users to either send the file as an email attachment (can lead to file size issues) or save it to a storage app like Dropbox that allows for shareable links.
2. Commenting on Designs
Commenting on a shared Principle file would currently require additional steps by the user involving outside help from collaborative features of other apps like Dropbox
Why File Management Improvements?
In order to effectively collaborate, designers need their files organized and easy to distinguish, something that's currently difficult with Principle Mirror's single scroll view
Redesign Mock-Ups & Prototypes
Solution: Redesigned layout and navigation supporting iOS 11 Files app 3rd party integration
Tab Bar Controller - File Management Solution Pt. 1
Familiar iOS style navigation segmented into 3 tabs: Designs, Preview, and Projects
Added tap event for entering and exiting preview mode to accommodate users less familiar with gesture-based navigation
The Challenge: Supporting improvements in file management and collaboration without adding too much complexity to the navigation while also maintaining existing gesture-based navigation
Tab Bar Controller Navigation Solution
Center "Preview Mode" Tab displays an image of your "Currently Mirroring" or "Last Mirrored" design
Home & My Designs Tabs - File Management Solution Pt. 2
Toggle between views of recently previewed designs and your organized design files saved across multiple locations
The Challenge: Clearly distinguishing designs saved within Principle Mirror from those copied over using 3rd party storage apps to avoid items appearing as duplicates
'Home' Tab
'Home' Solution
1. Access to the design you last mirrored when your device was plugged into your Mac
2. A history log of designs previewed on your device either saved to Principle Mirror or opened from another location
3. Icons clarifying where the design file is saved to distinguish items that currently look like duplicates
Updating & Saving 'Off Device' Designs
'My Designs' Tab
The Challenge: Segmenting saved designs and content supported by iOS 11 Files App integration while minimizing conceptual overlap, and avoiding too much complexity in the navigation hierarchy
Earlier Concepts
'On Device' Tab Solution
1. Tap “Update” icon to add the newest versions of your designs saved from Principle for Mac to an “Off Device” location
2. Tap “Select” icon to take action on multiple saved designs such as Update, Share, Add to (Project) or Delete
3. Designs with multiple versions indicated with icon and version quantity
'Off Device' Tab Solution
1. Quick access to the newest versions of designs saved using other storage services that you’ve recently previewed
2. Flag a folder you frequently save your Off Device designs to when using Principle for Mac for more convenient access
3. Browse by iOS 11’s supported 3rd party storage apps
Tab Tapping & Toggling Interactions
File Details Modal - File Management Solution Pt. 3
Save and compile versions of your files for a more concise and organized list of your designs
Saving from File Details Modal
1. Save/copy over new designs and manage previously saved versions of your designs from the File Details Modal
2. Tap "Add To" button to add the design to a project or have it join an existing saved design item as a new or old version
3. Tap "Manage" to switch the current version or delete existing versions
Jump to a Specific Artboard
Tap a frame to jump to a specific artboard or drill into any component while previewing a design to quickly identify differences between new and old files
Projects - Collaboration Solution
Collaborate on shared designs and components for projects with the help of iOS 11 and 3rd party storage app features
Project Board Swiping & Refresh Interactions
Activity Page
Central location for updates across all projects
1. Select your storage app of choice for activity updates
2. Links to updated Project Details Page
Challenges
1. Designing the Activity page to have its own vertical swiping behavior to allow for the familiar "pull to refresh" interaction without conflicting with the existing vertical swiping used to enter "Preview Mode"
2. Deciding an access point and entry interaction for the Activity page that feels intuitive given the scope of its content (updates across all projects)
3. Positioning badges for notifications where they will be visible enough to grab attention from the initial Projects page
Project Details Page
Team Activity Notifications
Receive notifications for activity updates such as team member comments on designs (iOS 11)
