Defining how to package apps and move them to new environments
Microsoft PowerApps is an enterprise platform that enables users to create apps from their data sources.
Pen + Paper, Balsamiq, Sketch, Invision
- Myself – Product designer
- 1 Researcher
- 1 Writer
- 3 Product Managers
- 1 Engineering Manager
- 1 Front End Engineer
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.
Understanding app sharing
I interviewed the previous program manager and designer to understand the conceptual challenge:
- 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.
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.
After working with a content writer and researcher, I created a prototype in Invision to do initial validation testing.
Based on feedback from initial research and internal design reviews, I moved into higher fidelity mocks to refine the UI.
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.
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.
The updated design pattern was applied to the Administrative Portal as well.
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. ✨