14:41: Updated to include additional information around embedding the map in a mobile app and searching in multiple ways.
You want to see if other professors are around in the school? We found a magical map in the School form of our OwlExpress app. The Marauder’s Map is using Websockets magic to track everyone on the school premises Right Now.
It also is using device embedded voice recognition to understand your spells, you need to say: “I solemnly swear that I’m up to no good.” if you want to see the map.
When you are done and want to hide the map you must say: “Mischief Managed!”.
Do you like the glossy pixels of this map?
Mobile Map
We have also managed to embed this into a canvas app for a mobile delivery for sneaky students upto no good.
Searching in many ways
We have also introduced a glossy new feature for searching our student database in multiple magical ways, searching via standard text boxes, searching by scanning a business card, drawing a students name and utlising Copilot.
Greetings, fellow wizards and witches of the digital realm!
This afternoon, we are thrilled to announce that our magical journey through the enchanted forest of user interfaces has led us to claim two prestigious badges: Glossy Pixels and Chameleon. 🪄✨
Glossy Pixels: Just like the shimmering surface of the Mirror of Erised, our Power App user interfaces are crafted with a spellbinding glossiness that captivates the eye. These interfaces are not only visually stunning but also resilient, ensuring they won’t shatter like fragile glass on smaller screens. Whether you’re viewing them on a Muggle’s smartphone or a wizard’s enchanted tablet, the glossy charm remains unbroken.
Chameleon: Much like the Animagus who can transform at will, our solutions are incredibly responsive. They adapt seamlessly to all devices and screen sizes, from the smallest of handheld devices to the grandest of desktop monitors. This badge signifies our commitment to creating interfaces that are as versatile as a Polyjuice Potion, ensuring a smooth and consistent experience for all users, regardless of their device.
With these badges, we continue to push the boundaries of digital enchantment, creating user experiences that are as magical as a Patronus charm. Stay tuned for more spellbinding updates as we continue our quest to bring a touch of magic to the world of technology.
Plug N’ Play: In the spirit of the Weasleys’ Wizard Wheezes, we have conjured an app that seamlessly integrates with both Microsoft Teams and SharePoint, bringing a touch of magic to our daily business operations. This app is not just a mere spell; it is a powerful tool designed to solve a crucial business need, ensuring our workflows are as smooth as a well-brewed potion.
Our app, much like the Room of Requirement, adapts to the needs of its users. It enhances collaboration and communication within Teams, allowing us to pull information from various systems, have meaningful conversations about it, and take action—all within the enchanted walls of Teams. Additionally, we have woven our magic into SharePoint, creating a unified experience that ensures seamless access to documents, data, and collaboration tools.
Having consistent branding is important to give the users a good experience when navigating between different user interfaces. It makes a cohesive look and feel across apps, websites, reports, etc.
Define brand identity
The focus point for our solution is Hermione’s Beaded Bag, so we wanted to use soft purple
Font
One of the most identifying things about a brand is the font. We have found a free font that we want to use with most user-facing interfaces.
We used Microsoft 365 Copilot Visual creator to help get our creativity going. It helped us find a color scheme that was exactly what we were looking for to get a soft magical feeling.
From this we created a color scheme fit for apps and websites.
🗺️ Interactive Map: Mapping the Shadows in Style ✨
Our Interactive Map WebApp has masterfully combined modern technology, responsive design, and captivating aesthetics. Developed with React, TypeScript, SCSS, and enhanced with fancy CSS animations, this map is the perfect companion for tracking the mystical operations of the Dark Ledger. With seamless integrations into Microsoft Teams and SharePoint, paired with automated deployments via GitHub Actions, this tool bridges functionality and style, solving critical business needs like a pro.
🔮 Magical Features
1. Interactive Tracking with Google Maps API 🌍
Dynamic Positioning: Real-time tracking shows the locations of both targets and hitmen.
Reward Insights: Visualize mission rewards directly on the map for clarity and motivation.
Custom Styling: The map is tailored to reflect the Dark Ledger’s mystical theme.
2. Cross-Platform Accessibility 🔗
Teams App: Add it directly to Microsoft Teams for quick and easy collaboration.
SharePoint Integration: Embed seamlessly into SharePoint sites to streamline workflows.
Responsive Design: Optimized for desktops, tablets, and smartphones—effortlessly adapting to any screen size.
State Management: Redux or Context API ensures dynamic updates without skipping a beat.
Streams: Real-time syncing keeps the map fresh and up-to-date.
SCSS: Powers cohesive, flexible, and maintainable styling.
4. Dazzling CSS Animations ✨
Fluid Transitions: Map markers and interface elements move gracefully, like spells in motion.
Hover Effects: Intuitive highlighting guides users effortlessly through the map.
Polished Touches: Every button, icon, and menu interaction feels alive and engaging.
5. Automated Deployments with GitHub Actions 🤖✨
The app is built for agility and reliability:
CI/CD Pipeline: Changes pushed to GitHub are automatically deployed to our Azure-hosted web app using GitHub Actions.
Efficiency: Ensures the latest features and fixes are available to users without manual intervention.
Azure Hosting: Provides a robust, scalable platform to support the app’s responsiveness and performance.
💼 Solving Real Business Needs
This isn’t just an enchanting app; it’s a powerful business tool:
Operational Insights: Tracks locations and rewards in real time, empowering decision-making.
Collaboration Simplified: Embeds directly into Teams and SharePoint, making it easily accessible for all users.
Efficiency Boost: Automates key processes and eliminates the manual hassle of location tracking.
🌟 Built for Versatility and Performance
Why It Stands Out:
Responsive Design: Ensures usability across all devices and screen sizes.
Modern Tech Stack: Leverages React, SCSS, and state management for a seamless experience.
Automated Deployments: GitHub Actions streamline updates and ensure consistent quality.
Azure Hosting: Provides a stable and scalable backend for flawless performance.
🖤 Enchanting Efficiency
With React, SCSS, Google Maps API, and Azure-hosted automation, our Interactive Map WebApp stands as a spellbinding example of innovation. Whether you’re plotting missions or tracking rewards, this tool ensures you’re always ahead, wrapped in elegance and functionality.
“When modern magic meets technical wizardry, the results are simply spellbinding.” 🧙✨
Greetings, wizards, witches, and tech sorcerers! ✨
At Team PowerPotters, we’ve crafted a solution that combines ambition, design, and versatility to streamline potion approval processes in Hogwarts’ potions lab. Our Canvas app not only ensures Professor Snape retains his tight grip on potion-making but also demonstrates innovation worthy of the Chameleon, Glossy Pixels, and Plug N’Play badges.
Here’s how our magical app comes to life!
🪄 The Process: From Student to Snape
Our app powers the potion production workflow, starting from the moment a student initiates the brewing process to Snape’s final approval. Here’s the step-by-step magic:
Potion Initiation:
When a student triggers the cauldron with a voice command like “Start potion,” a Power Automate flow kicks into action, creating a production order in Dynamics 365 Finance and Operations (FO).
Flow Logic:
The production ID and related data are returned to the flow and enhanced with compose actions to ensure clarity.
The production BOM (Bill of Materials) is retrieved from FO and transformed into an easy-to-read format, beautifully rendered in the app.
Snape’s Oversight:
An SMS alert is sent to Snape, notifying him of the brewing attempt with details of the potion and ingredients.
The app dynamically updates with the potion’s name, required ingredients, and a scroll-like design for approval or rejection.
Elf-Friendly Data Publishing:
Post-approval or rejection, the elf’s are messaged on Teams and their SharePoint list is updated. Since house-elves have limited access to advanced systems, this ensures they have clear and simple instructions for ingredient management on a low-cost client.
1. Chameleon Badge: Responsive Design Across Screens
Our Canvas app adapts seamlessly to screens of all sizes, from mobile phones to desktop displays, ensuring Snape can approve potions whether he’s in the dungeons or pacing the Great Hall.
Screenshots:
Small-screen mobile view for Snape on the go.
Larger desktop display for potion reviews during classroom lectures.
The app’s responsive design ensures usability and consistency, providing an intuitive experience no matter the device.
2. Glossy Pixels Badge: A Visual Feast
The app’s aesthetic brings the wizarding world to life, making potion approvals as enchanting as the potions themselves:
Dynamic Imagery: A scroll-like interface hosts the potion’s details, while a vivid, animated potion bottle in the center represents the brewing request.
Harry Potter Themed Design: The lab background and parchment scrolls immerse users in the magic of Hogwarts, creating a cohesive visual theme.
Interactive Buttons: “Approve” and “Reject” buttons are styled like enchanted seals, completing the magical look and feel.
The app’s glossy finish transforms a standard approval system into an immersive, Harry Potter-themed experience that stands out among competitors.
3. Plug N’Play Badge: Seamless Workflows
Our app is built to integrate effortlessly into existing systems, demonstrating the true power of automation and low-code platforms:
Data Flow: The Power Automate flow connects FO, SMS notifications, Teams, SharePoint, and the app itself to ensure a smooth, automated workflow.
Elf Accessibility: The Teams messageing and SharePoint list ensures house-elves can view instructions without requiring access to complex systems.
Scalability: The app’s modular design allows new potions or additional workflows to be added with minimal effort, ensuring future readiness.
🐍 Why We Deserve These Badges
Chameleon Badge: The app’s responsiveness ensures a consistent, intuitive experience across devices, making it accessible for any user, anywhere.
Glossy Pixels Badge: The polished design, immersive visuals, and Harry Potter-themed aesthetics elevate the app beyond functional utility into an enchanting experience.
Plug N’Play Badge: With seamless integrations and a modular design, the app showcases the potential of low-code platforms for powering end-to-end workflows.
🔮 Potion-Perfect Innovation
From dynamic visuals to responsive functionality, our Canvas app brings a touch of magic to the hackathon. We humbly submit our case for the Chameleon, Glossy Pixels, and Plug N’Play badges and invite you to explore our journey as we continue to innovate at ACDC 2025: acdc.blog/category/cepheo25.
All great things start with an idea, then a sketch. More often than not a terrible one. And so did our design. A quick, simple and dirty sketch made in 30 seconds.
Now the purpose of the design was clear from second 1. It had to contain 4 main functions:
Let the user pick a recipient (or victim)
Set the desired mood
Write the message
And of course send
How much things change and yet stay the same
The interface is clean simple. The user knows what they want to do and they do it easily and fun. The colors are calm, subdued and beige. Inspired by parchment and well worn paper. With gold for the interactive elements (button and slider) drawing parallels to the gold seal from the movie howler.
The design is made in figma. Every element, color and illustration ready for easy development
And of course we had to include a little animation. For the extra panache
The design draws inspiration from the Weasley twins and their magical shop, embracing a playful and chaotic style with vibrant colors and patterns that break away from traditional design norms. Students highly value an app that combines bold, dynamic visuals with a user-friendly interface, as it greatly enhances their overall experience. A well-designed app with exceptional UX ensures they can navigate effortlessly and enjoyably, making it easy to access the information they need.
Our talented designer uses Figma to craft stunning designs that developers can seamlessly follow. Here are some examples of the designer’s work from today, which greatly simplifies the development process. Here is the color palette and the inspiration behind it:
Starting with the homepage, we want to give users a dynamic and engaging experience that reflects the app’s content and features. The idea is for the buttons to move and change positions, much like the shifting staircases at Hogwarts. While this might challenge usability, the goal is to highlight the app’s diverse possibilities and encourage exploration, ensuring no features are overlooked.
Houses Score, Quidditch and owlpost (Fabric)(Dash It Out)
House scores play a crucial role in students’ daily experiences throughout the year. To streamline this process, we aim to digitize the scores, making it easier for students to track which house has the highest score and understand the reasons behind it. Teachers continuously award and deduct points, so it’s essential for students to stay updated on the latest scores.
We plan to utilize Fabric’s OneLake to store our data, which is then visualized in our Power BI dashboards. These dashboards represent all the houses, their scores, and the teachers’ reasons for awarding or deducting points. Additionally, we include data about owl post and Quidditch, providing a comprehensive view of all aspects of student life at Hogwarts.
The App (Low-Code)
Students need a single place to find all the information they need to navigate life at Hogwarts. They need easy access to the school system to know which lessons to attend. Some may even need a Time-Turner to attend all their lessons.
Our mobile-friendly canvas app leverages the fantastic native drag-and-drop features Power Apps offers. With beautiful galleries, powerful data integration, and intuitive user interfaces, our app provides a seamless experience for students.
PCF (Pro-Code) (Power User Love)
It’s crucial for students to know who is in their house, but currently, there’s no system in place to facilitate this. Implementing a digital, visual, and accessible solution would be a smart move.
Low-code and pro-code can coexist peacefully. We have found a PCF component online, created by this cool dude called Scott Durow. We hope his code meets the judges’ expectations. Power Apps development and integrations is quite new to the pro-coder so this is still a work in progress, but we plan to use the component Network View (Network View | PCF Gallery).
From no system to complete digital solution (Digital transformation)
Hogwarts currently has no digital system (they send mail by owls). We want to digitize everything a student may need to navigate life at Hogwarts.
We plan to use multiple technologies from the platform, including Power BI, Fabric, Power Apps, and Copilot Studio. These technologies work (more or less) seamlessly with each other and will help us create a complete digital solution.
DEV-TEST-PROD (ALM)
Fred and George have never created an app before, so they need our assistance. We’ve explained the importance of ALM (Application Lifecycle Management) to them and set up three Power Platform environments.
Given that we’re participating in a hackathon for just a few days and the solution is currently quite small, we’ve decided to use the environment-centric approach (Environment vs. Source code centric ALM approach » Benedikt’s Power Platform Blog). While this is the most commonly used method, it has several drawbacks, such as vulnerability to environment issues, aging configurations, and reliance on manual deployments.
The magical students love the app (Magic Matrix)
All the students at Hogwarts love the app because it makes their daily lives easier. Transitioning from “pen and paper” to a fully digital solution is usually challenging, but for the students at Hogwarts, it was seamless. They appreciate having everything in one place, making it easy to navigate and find what they need.
I wish I had a similar app when I was a student. Back then, everything was scattered across different systems: one for school, one for living arrangements, one for information, one for stores, one for events, and another for books. Each had its own system, making it difficult to find anything. That’s why we believe it’s smart to consolidate everything into one place, making it easier to find.
The app isn’t just for school-related tasks; it also includes information about events, stores in Hogsmeade, where to find the cheapest butterbeer, sending pranks, and many other fun features the twins came up with.
Before the hackathon we used some hours doing research, which included doing use research. Sofie on our team had experienced that renovating a bathroom includes a lot of back and forth between plumber, carpenter, project manager and several other people. It took more time then it needed to, to finish the bathroom due to bad communication, jo flere kokker, jo mere søl/Too many cooks spoil the broth.
We talked to two amazing plumbers, first asking a random question:
They, and their colleagues wanted: – A pipe planner for when they renovate a bathroom – Supply list with which pipes and other equipment – Pipe (hehe)line for all the workers including in building a bathroom
Sofie wanted: – Certificate of completion automatically …
We hade several calls with them before and during the hackathon, they gave us invaluable information and insight, and they have evaluated our solution each day.
This is our user journey
And of course, here is the user journey translated to Super Mario (please zoome in)
Late last night, after a couple of beers we finally found the perfect name for our plumber solution! Say hello to Tubi! We made a logo we are happy with, short and sweet!
Using Microsoft UI components, with a dash of Super Mario sprinkles on top, the UI is done.
Since this blog isn’t the best medium to showcase the design, please check it out at Behance
