ImportExport-SplasH.png
 

Microsoft

PowerApps Packaging

Defining how to package apps and move them to new environments

 
 

Background

Microsoft PowerApps is an enterprise platform that enables users to create apps from their data sources.

Tools

Pen + Paper, Balsamiq, Sketch, Invision

TEAM

  • Myself – Product designer
  • 1 Researcher
  • 1 Writer
  • 3 Product Managers
  • 1 Engineering Manager
  • 1 Front End Engineer
 
 

Challenge

PowerApps users wanted the ability to export an app as a package, and import the package into another environment.

This would enable IT Admins to utilize Sandbox and Product environments, as well as allow third-party developers to sell their apps on a marketplace.

Import Export summary.png
 

Understanding app sharing

I interviewed the previous program manager and designer to understand the conceptual challenge:

 

An initial design from the designer before me. This error view was overwhelming.

  • Apps are complex files that need to connect to data that's custom to each environment
  • Apps require specific data configurations to function successfully
  • The process needed to be scalable, in case we handle multiple imports in the future

I kept these constraints in mind as I began to brainstorm.

 
 

Ideation

 

I began sketching to capture early ideas, user flow, and visual layouts. Here, my goal was to freely explore what a solution might look like. 

 

After getting a feel of the flow, I moved to Balsamiq to create low-fidelity wireframes that were presented to leadership and approved.

Import_Wireframes.png
 

Initial prototype

After working with a content writer and researcher, I created a prototype in Invision to do initial validation testing. 

 

Iteration

Based on feedback from initial research and internal design reviews, I moved into higher fidelity mocks to refine the UI.

 

Research insights

 

Our team's user researcher conducted tests with IT Admins to find:

  • A grey dirty state was confusing; there was no clear indicator of a changed row
  • The confirmation page was underwhelming

Additionally, I received feedback about the UI still feeling a bit... 'clunky.'

 

At this time, I begun talking with the Engineering team to discuss my design decisions behind each 'screen,' and collaborating to find elegant solutions to re-use components for efficiency.

Import/Export powwow
 
 

Final designs

After refining interactions and navigation patterns, I narrowed on a few principles that guided the final results.

  • Help users achieve success. Resources are set up in a way that will make them more likely to work in a new environment, and users can customize import configurations if they'd like. Error messages guide the user to address blocking issues.
  • Create patterns that scale. The export and import process works in the consumer-facing portal, and the more advanced Admin portal.

Admin Portal

The updated design pattern was applied to the Administrative Portal as well.

 

Moving forward

The ability to create packages launched in the fall of 2017! 🚀

Early data showed the feature is being steadily used. The team is continuing to monitor telemetry to understand how Packaging affects the amount of apps and collaboration within and across environments. ✨