Principle Mirror Redesign

THE OPPORTUNITY

Principle Mirror is the companion app to Principle for Mac, a tool for designing interactive interfaces, allowing users to preview their work on a mobile device.

The Challenge

Create an experience that better supports the workflow of a designer by solving issues focused around collaboration/sharing and file management.

My ROLE

Designer (Independent)

Scope & Ownership

End-to-end ownership of UI, User Flows, Prototype, Competitive Analysis

THE Team

Personal Project

Platforms

iOS

VIdeos

Prototypes

Demos

Primary navigation

Updating and saving off-device designs

"My Designs" tab

Saving versions of designs

Jump to specific artboards

"Projects" Tab

Project Details Page

Team activity notifications

OVERVIEW

My impact

Mobile phase 1 (iOS)

CTV phase 1 (tvOS & Roku)

CTV phase 2 (Roku)

CTV Phase 3 (in development)

Phase Breakdown

Mobile Phase 1 (iOS) - dev done, tested and validated, rollout temporarily paused
CTV Phase 1 (tvOS & Roku) - tested and in market
CTV Phase 2 (Roku) - dev done, test launching soon
CTV Phase 3 (future A/B test) - in development

OVERVIEW

My impact

CTV

iOS

Web

No items found.

Research

‍

Why Focus on Collaboration?

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?

‍

1. Sharing designs

Sharing an interactive Principle design requires users to either send the file as an email attachments (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 currently requires additional steps by the user involving outside help from collaborative features of other apps like Dropbox

‍

Why Improved File Management?

‍

In order to effectively collaborate, designers need their files organized and easy to access, something that's currently difficult with Principle Mirror's single scroll view

‍

Redesign mock-ups & prototypes

‍

Solution: Redesigned navigation and layout supporting 3rd party integration with iOS 11 Files app

‍

Tab bar controller - File management solution Pt. 1

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 hierarchy while also maintaining existing gesture-based navigation

‍

Home & My Designs tabs - File management solution pt. 2

Access recent files from 'Home' or view your organized files saved across multiple locations from 'My Designs'

‍

'Home' Tab Before & After

‍

'Home' Tab 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 copied from another location 3.) Icons clarifying where the design file is located/saved to better distinguish items that currently look like duplicates

‍

Earlier Concepts

‍

‍

'On Device' Tab

1.) Quick access to the newest version of your recently previewed/opened designs, 2.) Flag a folder you frequently save your "Off Device" designs to when using Principle for Mac for convenient access, 3.)Browse by iOS 11’s supported 3rd party storage apps

‍

File Details Modal - File Management Solution Pt. 3

Manage previous versions of your saved designs and more clearly distinguish between similar files

‍

Projects - Collaboration & Sharing Solution

Collaborate on shared designs with the help of iOS 11 and 3rd party storage app features

‍

Activity page - Central location for all project updates

1.) Select your storage app of choice for activity updates, 2.) Tap project name to view the updated Project Details Page content

‍

Activity Page Challenges

Designing the Activity page to have its own vertical swiping behavior to allow users to "pull to refresh" without conflicting with the existing vertical swiping used to enter "Preview Mode"
Deciding an access point and entry interaction for the Activity page that feels intuitive given the scope of its content (updates across all projects)
Positioning badges for notifications where they will be visible enough to grab attention from the initial Projects page

No items found.

Prototypes

Demos

Primary navigation

Updating and saving off-device designs

"My Designs" tab

Saving versions of designs

Jump to specific artboards

"Projects" Tab

Project Details Page

Team activity notifications

My impact

Mobile phase 1 (iOS)

CTV phase 1 (tvOS & Roku)

CTV phase 2 (Roku)

CTV Phase 3 (in development)

Phase Breakdown

My impact

CTV

iOS

Web

Research

Why Focus on Collaboration?

How does Principle compare to the competition?

1. Sharing designs

2. Commenting on designs

Why Improved File Management?

Redesign mock-ups & prototypes

Tab bar controller - File management solution Pt. 1

Home & My Designs tabs - File management solution pt. 2

'Home' Tab Before & After

'Home' Tab Solution

Earlier Concepts

'On Device' Tab

File Details Modal - File Management Solution Pt. 3

Projects - Collaboration & Sharing Solution

Activity page - Central location for all project updates

Activity Page Challenges

Want to see more?

More projects

Short-Form Video

Personalized Hero