With the growing popularity of Power Apps, and “Custom Pages (within Model Driven Apps)” we now, more than ever before, have the opportunity to design and build any custom UI we want.
For me, coming from a traditional Dynamics CRM background where we mainly had the “Model Driven App” UI to play with, this is major a mindset shift. Yes, we can still build custom UI using web-resources or PCF controls, but they often take more dev time to build and require a level of maintenance when new releases are pushed by Microsoft.
In this article I am describing my approach for using prototypes when designing custom UI’s for your Dynamics 365 or Power Platform project.
A prototype will help you with the following:
- Gain insights from real users on how they will use a functionality.
- Limit design assumptions. If you can’t decide between a few design options, test a few versions and see which works best.
- Identify design flaws before it’s too late. Prototypes enable you to fail early and cheaply; they’ll expose a weak or unsuitable approach before you’ve invested too much time or money.
No matter how much time you spend analysing and writing specs, many people find it difficult to truly conceptualize something until they have seen it. Prototypes allow you to iterate, refine, rework, and make improvements until it’s ready for your dev team to implement.
The Scenario
In this specific scenario, I needed to display a list of records with 2 levels of categorization and preview the content of a file by clicking on it.
Before using a specific prototyping tool, I followed a similar approach to what Hamish Sheild recommended in the following post:
So using my tablet I created the following sketch of the prototype:
Prototyping tools
After having some further discussions with my stakeholders, we clarified assumptions and decided to take the prototype to a higher level of fidelity.
To create the prototype, I could use a few different tools: PowerPoint, Diagram.net, Visio, etc. But I was also curious to know what other professionals are using to do the job.
Below is a LinkedIn post I created to ask my colleagues in the industry about their favorite tool to prototype custom UIs.
From the above poll, it seems that Figma is the tool of choice with almost 50% of the votes. A few other tools were mentioned in the comment like “Canvas Apps Editor”, “Miro” or “Balsamiq”.
Figma also made press recently when Microsoft released the Express Design for PowerApps.
Express design is a new way to quickly get started with Power Apps by instantly transforming your visual design into an app. With Express design, makers can quickly turn existing design artifacts—including paper forms, whiteboard sketches, or Figma files—directly into a working app.
Learn at Microsoft
Using Figma to help with the layout design.
Figma is one of the most popular UI design tool available on the market. It lets you create frames, shapes, texts, add icons, etc, and will enable you to quickly mock up static designs and wireframes.
You can take a look at the design file I created for our scenario. (Clicking on the image will take you directly to my design file).
Using Figma to show a working prototype.
The Prototype feature in Figma provides you the ability to easily create transitions between frames. You can use a variety of actions like; on-click, on-drag, on-hover, and delay, you can transition to a new frame, switch component variants, open/swap/close overlays, go back, ‘scroll to’, and open links.
Figma’s simple prototyping feature eliminates the need for another tool that does slideshow style prototyping.
See below how I could share the prototype using a link or an embed code to be used in an iFrame.
Please let me know in the comment section below how you create your prototypes. Do you use other tools? And if yes why?
And if you use Figma, what specific use case or scenarios are you using it for?