Tag Archives: Glossy Pixels

Glossy Pixels + Mario badge + Chameleon

Posted on by

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)
user journey mario

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

Elevating User Experience with Power Apps(Canvas): Race Enrollment App  

Posted on by

Introduction 

Developing an interface that is both visually stunning and functionally robust is key in app design. This post explores our journey in creating a user-friendly, shiny, and glossy interface for a Power Apps Canvas application, focused on streamlining race enrollments. 

Design Approach: Sleek and Responsive 

Aiming for a visually appealing and intuitive interface, we emphasized: 

Shiny and Glossy Aesthetics: A design that is immediately engaging and visually appealing. 

Intuitive Navigation: Ensuring ease of use for all functionalities. 

App Highlights 

Streamlined Race Enrollments 

Simplified Process: Making race sign-ups quick and hassle-free. 

Interactive Elements: Engaging users with dynamic character selection features. 

The application:

Conclusion 

Our Power Apps Canvas project demonstrates how an attractive and responsive design can significantly enhance user interaction. By marrying a glossy aesthetic with responsive design principles, we’ve crafted an app that’s not only eye-catching but also highly functional on diverse devices. 

Note: This concise draft outlines the creation of a user-friendly and responsive Power Apps Canvas application, ideal for expanding with specific technical insights or visual examples. 

Use on every device

Posted on by

The Power App is repsonsive and can be used on all kinds off devices and screen resolutions.

We have use controls like the Containers that will adjust the content to the sizes on different parts of the screen.

We do recommend using the phones and pads in landscape mode to avoid white areas on the sides.

Here are some pictures of the app on different devices

Welcome to Mario Brothers Plumbing Service

Posted on by

Brand logo and brant theme

We have created a portal with user-friendly experience and a god and easy interface.

Used AI to generate picture and text to make the site fun.with a green mushroom as a favicon

Easy azure B2C loggin for the new customer.

The backen have the same look and field ad the customer have

We also focus on some oldscool pixels for fun – inn the Canvas app

Glossy Pixels / Chamelon

Posted on by

Glossy Pixels: For our app have we used Mario themed icons and Since we are Waken Koopa troopas have we choosen color-codes that represent Koopa Troopas colors. Green for their shell and yellow for their body.
Synne, being our lead designer, made sketches for our final design:

Our final design ended up quite close to the envisioned design:

We also have a minigame where you get to hunt as many Mario can, where we liberally use Mario inspired design language.

Chameleon
Our app is available both for desktop and mobile users. We also have built a responsive canvas app, however the minigame is only available in portrait mode so no one gets an unfair advantage 🙂

Welcome to SMBPLUMBING

Posted on by

Brand logo for Super Mario Bros. Plumbing

Brand colors to achieve a cohesive look

Power Pages with a Punch!

We have developed a portal that offers a seamless, user-friendly experience, complete with an aesthetically pleasing interface.

Pay attention to the brand colors, logo, and AI-generated images tailored specifically to match the context of the page.

PlumbAdmin Unplugged: Where Pipes Meet Punchlines!

The design of the internal UI is as vital as a perfect tomato sauce – it boosts the user experience, makes work efficient like a well-oiled machine, and cuts down the learning curve, making everything as smooth as a gondola ride! Capisce?

Super Mario

The theme in the model driven app “PlumbAdmin” is set to our brand colors and our logo is added to the header.

The menu items are named with brand lingo and engaging emojis.

The Dashboard “Coin Generator” gives Mario and Luigi the best overlook of key business data
The Contact form gives a good overview of contact information, achieved certifications and the contact’s assets
PlumbQuests forms has a custom business process flow and Quick View Form showing the assigned plumber’s contact information and certifications.

The Devil is in the Details

Custom favicon

Luigi’s profile picture in PlumBot and his italian sassy accent gives an extra touch

You can open your personalized diploma in wide screen:

We claim the badge Glossy Pixels because our designs not only shine with clarity and vibrancy, but also bring every pixel to life with a touch of sophistication and engaging visuals.

We strive to achieve high scores in the excellent user experience category because our platform is meticulously crafted to be intuitive, responsive, and tailored to meet internal AND external user needs, ensuring a seamless and satisfying interaction at every touchpoint.

We aim to showcase our skill in the Killer AI category, highlighting our use of customized AI-generated images tailored specifically for the websites page’s context.

Moreover, our approach goes beyond just having a chatbot. We’ve intricately designed it to embody the spirited personality of Luigi, complete with charming Italian sass. Offering users a dynamic and personalized interaction experience

Power BI Dash it Out and Glossy Pixles

Posted on by

Our game produces data on game configuration, high score and completed games. This is visual data that we love to look at so we better understand the users.

We have had quite the journey in learning on this badge. Consultant had never used Power BI before and created this as their first post.

Eventually after receiving help from community members and judges the graph matured and materialized itself to something more presentable.

Glossy neon warrior Princess Peach

Posted on by

With this blog post we are aiming for the Glossy Pixels badge

We will also argue that to have a consistent visual identity across all the games will create a good user experience, so this blog post should also be considered to count towards the Excellent User Experience category.

Excellent user experience

Logo

We created the logo first, to set the tone, find the colors and use this as a baseline in the visual identity.

We use a website to generate this glowing effect

https://www.textstudio.com/logo/3d-neon-pink-text-27

Background

To get the same look and feel across the apps we also use the same background.

This is created from scratch with a picture of a brick wall and effects created in Photoshop

The buttons on the bottom and other geometrical elements used in the apps are created in Photoshop from scratch with the help of this tutorial:

https://www.youtube.com/watch?v=3JxCbwn-6bQ

Why do we bother creating this from scratch? Because it’s fun! 😀 And a bit retro to not use AI to generate everything?

We found a good picture of Princess Peach where she is in her battle gear. In our “Peaches Mini Games” world she is saving Mario – so we wanted her to look badass..

Implement the visual identity across the apps

The Power BI Scoreboard

The Hangman Game

Peaches Flight App

We will also make sure to implement this visual identity across the other websites and apps that we make as the solution progresses to make sure that the user feels that they are playing games in the same universe.

Princess Support Requests now simpler than ever! And more esthetically pleasing!

Posted on by

Badges to be claimed:

  • Glossy Pixels: We developed a custom Mario-themed UI for our Princess Self Services portal.
  • Chameleon: Our UI maintains it’s structure with the ever-changing screen size.

The backbone of our system is supporting whatever requests our princesses may have. With that in mind, one of the main objectives while planning for the princess-facing side of the system, we opted for simplicity and a fun user experience before all.

Our home page has only one button, so there is no confusion in their time of need. We went with the opposite logiq than the people that post recipes online.

Once the button is clicked, and the princess creates their profile, the next step is a simple form to gather the important information.

Once they are happy with their request details, and submit, they get redirected to a page listing all of their current and historical request.