EN VISUELL ORGASME

Vi har vært på bloggkurs og har lært at det er viktig med clickbait-titler for å få clicks. Men jokes aside, vi har forsøkt å dra den visuelle identiteten til PowerAppen langt ut over normalen.

Vi har latt oss inspirere av Munch-museets visuelle identitet. Blant annet bruk av store kontraster, fete fonter og høy grad av asymetri.

En viktig del av arbeidet var å finne frem til former og symboler som kunne skape en futuristiskfølelse samtidig som vi tok vare på noe av det tradisjonelle som du finner i Munchs kunstnerskap. Det startet med en wireframing og idemyldring i Figma den første dagen, hvor vi la grunnlaget for designelementene som vi har bruk i appen. Se bildet under:

Vi innså raskt at PowerApps ikke har avrundede hjørner, men vi ville bevare samme felling, så vi lekte litt med vektorer for å skape samme uttrykket, bare motsatt vei:

Vi ønsket en high-end feeling i appen og for å oppnå det ville vi gjerne ha litt flere alternativer å vlege blant enn de standard fontene i PowerApps. Vi stjal derfor komponenten PowerFont fra pcf.gallery som lot oss laste inn alle fontene fra Google Fonts direkte i PowerApps: https://pcf.gallery/powerfont/

Etter å ha diskutert en del frem og tilbake landet vi på Fira Sans Condensed, da denne har et uttrykk som var likt nok, men samtidig hadde ok kontrast til Munch sin custom-brand font.

Etter å ha brukt mye tid på å lage svg.-filen til topp-logoen i appen bestemte vi oss for å stjele resten av ikonene. Disse lånte vi fra: https://www.svgrepo.com/

Sammen med ulike figurer og former tilsynelatende plassert «tilfeldig» på lerretet, oppnådde vi det abstrakte og figurative uttrykket i appen som vi var ute etter (merk: knappene får den sterke Munch-rødfargen når man fører pilen over). Vi har også gjenbrukt mange av de samme elementene i vårt Power BI-dashbord.

Vi ville også ha chatboten vår som en del av appen. For å embedde den stjal vi på nytt fra pcf-gallery. Denne gangen stjal vi komponenten PCF ChatBot for å få åpnet chatten direkte i appen: https://pcf.gallery/pcf-chatbot/.

Cant fight crime without darkmode and custom elements

Ever used light mode? If so, we do not envy you! We did a complete overhaul of the Power App implementing a new color base and custom components. The color scheme is based on dark mode, as to protect our crime fighting turtles and rat’s fragile eyes. As custom components go, we have a beautiful logo on our page and a majestic landing page cover photo!

color scheme, with turtle green as accent
color scheme
custom cover photo
logo

Designing minimalist apps

Sometimes you want to go all out with fancy effects and complex UI, other times you have to pull back and remove everything non-essential. We had to do the latter.

Our app is supposed to be used in emergencies and mostly older people. So designed our app to have large fonts and huge buttons so that the user always know what they have to press and what information is important.

It may seem simple, but creating custom layouts with .NET MAUI is hard. It’s still in preview and since it is cross platform it has to work on multiple devices. Pixels should be glossy, but also functional.

Here are some screens from our app running natively on Windows. It also runs on iOS, Android and macOS.

Power User Love – Love User Power

With great tools comes great responsibility to be productive. With the myriad of application surfaces today each individual has the option to use any app on any device to get the job done.

By providing functionality via native and PowerApps it’s super simple to provide entry points to needed functionality from most productivity tools in M365.

If you’re in a MetaOS Hub like SharePoint or Teams (more to come), Viva Connections with its Home Site functionality is fully integrated with a global entry point to the most useful apps. Develop ones, configure once, use all the time! Viva baby!

Throw in some Viva Learning, easily extendible with custom learning sources and you have learning at your fingertips as well.

Viva Learning – with custom content

For those who fancy typing and chatting – which might be harder for turtle flippers, we provide pizza ordering via a virtual agent chat bot (ok, this is mostly used my TMNT IT to order overtime pizza).

Chat up a pizza pie!

Ordering at your finger tips

Pizza Time app in Teams
Pizza Time app in Teams via Viva Connections
Pizza Time app via search navigation in office.com
Pizza Time app via public web search – linked from work
Pizza Time public web site ordering – inclusive for the old peeps

In the native pizza ordering app we have developed a custom component to calculate estimated delivery time of the pizza.

MaMNT dashing it out for operators

SOS Operator life is hard, and even harder when you have to handle everything on a SOS-by-SOS basis. In order to aid operators in dispatching the correct resources and communicating preventative measures, MaMNT have now set up a Power BI dashboard that gives operators an overview of the current and past situation in the Oslo area.

Being new to Power BI, we explored a number of different metrics that could be useful to operators in report form. Not all of them were feasible, but the heatmap we set up is the crown jewel of the report. It will act as a basis for preventative measures and staffing (turtle) needs around the city.

The first page of the report contains a heatmap of SOS calls throughout the Oslo area, which is updated every 15 minutes with new, incoming SOS calls. It also shows the spread of SOS types, and the map can be filtered to specific types by clicking the columns.

The second page shows a pie chart of the SOS types, combined with a list that shows detailed data on each SOS call.

The third page shows the 30 “neediest” citizens by number of SOS calls. The list on the right shows the types of calls made by each of the needy citizens.

Kjøleskapet… Fridgitoid 9000.. Kjøkkenapparat eller din venn i hverdagen?

Ideen om verdens beste kjøleskap ble unnfanget få dager før ACDC gikk av stabelen, men vi hadde et kjempeproblem… Vi manglet jo et faktisk kjøleskap å «smartifisere». Heldigvis sitter teammedlemmene på enorme kunnskaper innen papp- og gaffateipkonstruksjon. Med en 3D-printer, semi-god kjennskap til 3D modellering en livlig fantasi klarte vi å lappe sammen en pappeske som absolutt minner om ekte vare.

Her er en video som viser vår fantastiske kjøleskapslogo som spinner rundt og indikerer at det er liv. Når døren åpnes trigges vår knappesensor som gjør at kamera tar bilde.
Dette oppsettet hadde ikke vært mulig uten den trofaste Arduinoen, som bygger på det eldgamle programmeringsspråket C som først brukt i 1972. Some things never change, og hvorfor bytte ut noe som fungerer?

Bildet sendes til Azure Cognitive services. Responsen kan du se på skjermen i videoen. Helt klart og tydelig en appelsin der altså. Deretter sendes dette til Power Automate for å oppdatere innholdet i ingredients-tabellen som beskriver hva som finnes i kjøleskapet. Orange = True!

Her har vi et flott B2C-produkt som forenkler hverdagen til alle mennesker og skillpadder med middagskvaler! Det beste av alt, latterlig lave produksjonskostnader! Hvis ikke det er Business Value så vet ikke jeg 😉