We are already building a certification app where aspiring plumbers can complete levels to achieve the PLumber Certifications; PL-200, PL-400 and PL-600. As described in the linked blog post, a flow to create a badge in sharepoint is triggered when the level is completed. That flow has been modified by adding an action to create a diploma with ChatGPT.
We created a Custom Connector for OpenAI API i Power Automate to be able to access image generator.
The custom connector is added as an action in the flow. By getting the rank input from the trigger, we set the certification (rank 1 = PL-200). A prompt is added to the Image Generator-action, as well as other inputs (notice the quality input is set to “HD”). When the inputs are added, you can just Go With the Flow…
The URL of the Image Generator-action is added as file content to the new sharepoint file.
Each diploma is different every time it’s generated, making it impossible to replicate. This adds an element of exclusivity and value to the certifications earned through our app. You never know what to expect, much like something you might unearth from Pandora’s Box. The Excellent User Experience and Killer AI is impossible to overlook.
Take a look at two extraordinary certifications examples down below. Are your eyes just as blinded by The Glossy Pixels as ours?? Just look at the HD quality… And isn’t the italian typos a charming effect?
Toad, a character widely recognized as Mario’s loyal companion, assumes a different role in our scenario. Instead of assisting Mario, Toad will be guiding Princess Peach through the perilous landscapes of the Mushroom Kingdom. Known for his extensive knowledge, Toad has documented everything in his personal wiki, which serves as a comprehensive guide to their world. In our application, Toad will utilize this knowledge to answer Princess Peach’s queries via a chat interface. This interactive feature will allow Princess Peach to navigate her journey with greater confidence and understanding.
Toad, an AI bot powered by Copilot Studio, learns from the web and adapts to new data. It uses advanced machine learning algorithms to understand and interpret information. This continuous learning makes Toad a versatile tool for tasks like data analysis, content creation, and problem-solving. It represents the next generation of AI, ready to assist with its ever-growing knowledge. (New text added here)
Live demo of Toad:
Who can resist the thrill of a captivating game? Our app takes you on an exhilarating journey, brimming with elements of gamification. It features a sophisticated scoring system for our beloved Princess Peach, tracking her progress throughout the game.
Live demo of score:
But that’s not all! Princess Peach has access to a dynamic Power BI dashboard, allowing her to review her progress and identify her strengths and areas for improvement. This interactive tool serves as a constant motivator, pushing her to strive for excellence
Last night, we celebrated a significant achievement as we won the award for ‘Excellent User Experience’ for Thursday. This accolade is a testament to the hard work of our experienced UX designer, who has crafted a fabulous Figma prototype to assist our developers. This victory leads us to the final chapter of our journey.
Last but not least, we invite you to step into the world of our application. Here, a vibrant pink palette, reminiscent of Peach’s dress, meets a shiny and glossy user interface, crowned with a touch of yellow, much like Peach’s crown. Our design choices, carefully considered for ease of navigation, make interacting with our app not just user-friendly, but a truly delightful experience. (New text added here)
Color palette from Figma
Live demo of shiny and glossy design (the design is not 100% complete in this video):
This post was edited 03.02 12:40
New text is marked with: (New text added here)
Added live demo of bot and some text
Added live demo of gamification
Added live demo of glossy design, picture and some text
Did someone yarr-cuse us of having a static interface? Well, not anymore. We Power Usered UP to add a little fire and electricity to the user experience of battling other ships at sea using the ultimate Power User tool: PowerPoint. Outcome varies depending on our strength and resources vs. the defenses of the booty ship we’re going after. But in the end we either lose:
Here is a color palette that would work well for a pirate-themed app:
Deep Sea Blue (#0E4A7E) – This shade of blue represents the vast ocean that pirates roamed and the mysterious depths that lay beneath its surface.
Sun-kissed Gold (#FFC72C) – Gold is a symbol of pirate wealth and adventure, and this shade of gold has a warm and inviting feel, like the sun shining down on a pirate’s treasure trove.
Rusty Red (#7B2E16) – This color represents the worn and weathered elements of pirate life, such as old ships and rusted treasure chests.
Weathered Wood (#6F5F3E) – This color is a nod to the wooden deck of pirate ships and the rough-hewn timbers used to build pirate hideouts.
Sandy Tan (#D7C3A3) – This color represents the sandy beaches where pirates buried their treasure and the warm, sun-drenched environment of the Caribbean.
Stormy Gray (#5E5E5E) – This color represents the stormy seas that pirates often had to navigate and the treacherous conditions they faced on their journeys.
These colors work well together to create a cohesive and visually appealing palette that captures the essence of the pirate theme.
Based on the colors we drew a logo free hand using Microsoft Whiteboard and added the colors from the color profile.
The logo should appear everywhere to create cohesive branding.
UPDATE!
We updated the brand guide based in feedback from our pirates and this is what the new logo looks like:
Font
All good brands with some selfrespect has special fonts that is designed to give the user crafted associations. Never underestimate the effect of a good font.
We use two fonts in our designs.
Headers and body text we use Lato Hairline in Canvas Apps and Lato Thin wherever this font is too thin.
Our main solution is an app for the Pirates to use on their phone when they are out on their raids. So, it might not be a shock that we will claim the bagde for an App. But, of course it needs to be shiny and glossy as well. We are here to create the besgt user experience for the Pirate as we ca, and even if pirates come out as rough and hard-core, they still want their tools to be as easy and up-to-date as they can 🙂
Shiny, glossy user interfaces would earn this badge, it won’t break on small screens right?
So, at the request of the judges, we will shed some more light on our app, its UI and super glossy pixels.
The app is made in vue.js and contains three main components:
The ThreeD component, responsible for rendering our 3d parrot
The FormUI component, responsible for rendering text and input
The Camera component, responsible for gathering camera input, object detecting and debug interface
The ThreeD Component
In this component we use troisjs and three to setup a scene containing camera, lights, our parrot model, and positioning this to match the rest of the UI.
As the model we are using contains all the different animations inside on animation sequence, we have to split it up into different actions, like idle, scream, takeoff etc.
The FormUI Component
Adhering to the shadow first(tm) principle
In this component we use vue template logic in combination with CSS and stolen borrowed texture to create the interface for providing instructions and gather inputs. We also managed to sneak in the actual font borrowed from The Secret of Monkey Island, after battling with getting ttfs converted to woff🐶.
The Camera component
The camera component is not seen on the screen and does not directly contribute to the UI. However when for debugging we’ve build a little UI to show the detected objects.
When we need new pirates on our crew we have an app where we can take their picture, and the app send the picture to a server that uses AI to piratefy your face.
The app is a Canvas App with a camera control on the first screen
When user click the camera control they navigate to the next screen where they will see their picture.
They can go back and take a new picture if they are not happy, or move on to “Piratefy me”.
If user click the “Pratefy me” button a power automate flow is triggered. We pass the image base64 value as a value and store the reply value in a variable.
The flow is “Me as a Pirate”
The trigger is a power apps trigger.
First we initiate reusable variables
We grab the image value from the Power Automate
Passing the image over to the CLIP service powered by Stable Diffusion at the Frogner/Oslo datacenter we annotate images to mostly correct the gender or non-gender of the person in the photo. This is our responsible way to ensure the pirate representation of the person is not turning the most beautiful guy and girl into something they definitely don’t identify with.
We parse the response we get
Next we pass in the captured photo, and overlay it with some serious pirate’y prompting to ensure our new crew mates meats the bar (and also the real bar when port-side).
We need to modify the image string to make it the right format for the Ai to handle.
We trigger a child flow (documented further down)
We gather the reponse and send it back to the Power App.
The flow triggered as a Child flow is called “get Crew Member Data – PirateGDP”
The core API in out solution is PirateGPT, a large language model fully capable assigning awesome pirate names and corresponding ships, with the identifiable traits of the pirate. Which we as a responsible HR ship keep fully secure and up to date as needed. When you have seven John’s on one ship, it’s quite important to distinguish them by traits such as red beard or cock farmer.
We PARSE the results we get for get the right format
Respond with the values to the “parent” flow
The Power App
Back in the Canvas App the user will see the newly created name and their picture Piratified:
It also navigate to the next screen where they will see the pirate name they are given and their picture Piratified.
If this isnt glossy and extreme business value, I don’t know what is?
Imagine this being a manager taking pictures of new employees. We all know that Gen Z are used to looking at themselves with prettifying filters. This way the old middle manager can take pictures of their new employees and let Open AI add the familiar filters so that when the Gen Z employee see their own new profile picture they will actually recognize themselves.
Badges
Glossy Pixels – because pirates are beautiful.
Go with the Flow – because it’s all flowing left and right
The Existential Risk – Who knew LLM could be used to generate schematized JSON data structures, and who knew all those crazy internet pics would be the basis for pirate faces of 2023?
ACDC Craftman – All API’s are tested and documented in a shared Postman collection, all is ran over https (not from the beginning) to avoid photo snooping, and API keys are used as the extra layer. No one wants to be the next TMZ victim!
Perhaps you saw our resent post about colors and broken screens? If not the joke was the pixel pusher was given the broken screen. But as true entrepreneurs of the Seven Seas, we put our ripped flag feature front for all to behold. Introducing Plundrr, with pre cracked screen as part of the brand guide.
Detailed screen grab of the faux broken screen in our appFull screen grab of the mobile interface of Plundrr login screen. The logo is hand drawn and the faux cracked screen is created using mosaic patterns from multiple overlapping opace rectangles.
If you like cool looking and also super confusing things, this is the outline of how we create the cracked screen ripples using vectors. The scull and swords icon are also hand crafted using bezier curves: The mathematical way of describing how lines in vector graphic should bend.
Screen grab of how confusing it is to look at vector drawing with multiple overlapping paths as a wireframe
This is every pirate’s best friend and a must have!! Loaded with awesome features this killer app should be installed on the mobile phone of all pirates in your organization.
Targets
Get a quick overview of your targets. Once a ship has been become a target in Dynamics 365, you will be able to see it in your mission overview. This is perfect when you have a long day of plundering i front of you and need to know which ones to do next.
Rumglasses
Have you ever been too deep in the rum bottle and close to do something stupid with what you believed to be a mermaid out on the seven seas? Or maybe you actually did and are now in for a hard time facing your mates with humiliation and regret?
Not anymore! Rumglasses let you take a picture of your believe-to-be mermaid and tells you if you are right or not. By training an AI to recognize and distinguish manatees from mermaids you can now relax.
My Ship
A map showing your location when out on the seven seas. You will se both your ship on the map and all other ships in the area. This is how you know you are close to your target when out on a plunder. The best part is that military or law enforcement ships will occur on the map as well so you can wait until the right moment before attacking the target.
Bottle Mail
Communicate with your mates by using bottle mail – a feature for sending email when you are on the fly. It suggests recipients in you address book or you can write to a pirate outside your organization. This way, you don’t have to switch to another app (email client) to send messages to your crew.
Pollybot
You are not a real pirate unless you have a parrot. Unfortunately (or luckily) there are laws about how to treat your animals today that did not exist in the old glory days. It might not be appropriate to bring it with you on a raid :/ This is where Pollybot comes to the rescue! Your own digital parrot who you can talk to, ask questions and keep you with company. As a real parrot, it sometimes answer your questions, but most of the time you will get an insult or just nonsense in return. But that doesn’t matter! Where a real parrot will fly away to save itself, Pollybot will always stay close.
Mayday, Mayday
When Jack Sparrow was stranded on a desert island, he managed to escape by tying his back hair together and catch a couple of sea turtles who gave him a ride back home. As fun and comfortably that sounds, not all pirates are equipped with back hair that long. However, most of us got their phone in their pockets at all times!
Whether you are stranded at a desert island, your ship is about to sink or you are stuck in a safe full of treasure, this feature will save you.
When using the mayday function your coordinates are then sent to a email address monitored by you crew so they can come and pick you up. If your mates prioritize your request is however another matter.
Because of the fancy design, the use of AI and the huge amount of useful features in this app, we hereby claim the Glossy pixels, Existential Risk and Feature Bombing badges. We also claim the Power user Love because the app is created in Power Platform 😀 #ProCodeNoCodeUnite
Recruitment is an important, and integrated part of Pirates 365, to acquire the best talent for our crew. To help us with this we have developed The pirate recruitment terminal(PRT). This solution provides us with a visually appealing and an engaging experience to gather new recruits.
Illustration of the Pirate recruitment terminal’s place within the Pirate 365 Recruitment module, along with the other modules.
PRT User flow
Since pirate recruits normally aren’t that familiar with modern interfaces, we have chosen a living parrot to help and guide the user and provide a smooth user experience.
When a pirate is detected, our engaging parrot approaches the pirate and presents the sign-up option. We collect personal details and complete the process by taking a picture. The collected data is then sent into the platform for future processing.
Sign-up formPicture capture
The Pirate recruitment terminal technology stack
PRT The app is running on the vue.js progressive javaScript framework with Pinia🍍 for state management. For the 3d animated parrot🦜 we are using three.js and TroisJS with WebGL rendering. For AI vision👁️ and object detection🤠 we are running tensorflow under the hood. If available the model is running on GPU, if not we fall back to CPU.
Images, 3d model, fonts is stolen captured on the internetsea.
