Cohesive branding across platforms and applications is important for the end user and create trust in the application. That’s why it’s important to have the same primary colour profile, images, fonts and logos across the platform. Also, applications need to be joyful and delightful to use. Good design is invisible in a sense. When it done right the user doesn’t think that it’s good design; it’s just “the way it’s meant to be”.

Seller Canvas Apps

Sellers on the go need to easily and swiftly approve or deny incoming contracts form new customers. We have open registration on our portal, and that means that anyone can sign up for å power agreement. Before we can start swapping electricity contracts for new customers, we need to manually check each one to know that it’s valid.

When creating interaction designs it’s good to look for established design patterns that exist and that users are already used to. For example Tinder’s Swipe Gesture. We waned to use the swiping as a was of approving or denying new contracts.

We used this tutorial:

Adoption is a key

If you want to increase your app adoption (for whatever reasons: revenue, targets or just ambitions) you have to care about UX (User Experience). Swipe behaviors can help you with that. How?

• Positive effect of the Swipe gesture is connected to our brain neurology. The move, if used in a write context, contribute to a feeling of empowerment in the user. The more positive effect your app has – the higher is its adoption.
• The tendency to abandon a shopping session is often attributed to choice paralysis — the inability to make a decision in the face of too many options and too much information. Swipe supports a binary output: yes or no, right or wrong, accept or reject, left or right.
• Swiping behavior are more attractive to mobile users
• Swipe will be natural in eCommerce, gastronomy and all company processes that requires binary decisions preferably with an image information

(Source: https://medium.com/app-partner-academy/the-psychology-of-swiping-in-apps-464895b2b485 )

Another point is that gallery control in Power Apps may cause delay in items display when user quickly scroll so using swiping behaviour with one item display at a time can positively influence overall app UX.

This is what the finished app works:

You can see the loading screen that engages the user right away while data loads into the application. At the start screen you can open the “Approve or deny” screen, or a form for creating new customers.

The “Approve or deny” first show the list of new agreements to give you a sense of the work load. Then when you open an agreement you can swipe right to approve – get to a success screen – or swipe left to deny – and get to a “successfully denied” page.

You can also create new contacts from the list page. When a seller is on the go it’s important that they easily can sign new contracts.

User Experience is very important to PowerSwapCorp. To create great user experience we make sure that our visual identity is clear and consistent across all apps; for the customer as well as for the backoffice.

Visual identity

To start with a strong and clear visual identity is important. This is a guideline that all developers follow and will be embedded into all applications and communication we do as a company.

Logo

The logo comes first; it needs to depict the spirit of the company and tell you something about the company’s tone of voice. Our logo has a cartoony fell to it, has bright colours and high levels of contrast between the colours. This makes for an unserious appearance, a light and playful personality and personal tone of voice.

We created three versions of our logo – for different purposes.

The full logo looks like this:

The icon-version is the circle without the text. This version works well as icon, favicon in the browser and app icon.

The version with only the text is suitable for business apps and other applications where there is limited vertical space:

Colours

We get the primary colours from the logo, and use them to get attention, provide usability clues and add playfulness. The colours are:

Fonts

We wanted to use a special font that has the same associations as the logo and the colours; unseriousness, youth and innovation – but add a flare of techiness and geekiness. That’s why we chose the Google font “Source Code Pro” as our primary font.

You find the font here: https://fonts.google.com/specimen/Source+Code+Pro

Portal

The customer portal is branded with the logo, our font and the colours. It’s the most important window out to our customers, and therefore the most important way we can infuse our brand.

Visit the portal here: https://powerswap.powerappsportals.com/

First, we made sure the favicon (browser icon) is our icon-version of the logo.

Then we implemented a theming system using SCSS based on bootstrap. Portals are built on Bootstrap 3.3.5. The font is added as well as images that enforce our visual brand as playful and fun.

Canvas App – Seller App

Customers can sign up in the portal by themselves, but sellers are also on the road selling to customers. We created a canvas app that enables the sellers to sign new contracts on the road from their phone. It’s also branded to to enforce the brand. This is important for employee apps as well as customer apps, as it will enforce the brand presence.

PowerBI

We also have PowerBI reports for the end under; embedded on the portal. This report also have branding with colours and logo according to the visual profile.

This report is also a tool for management when they need to follow up on customers savings and how the business is going.

Model Driven

Of course the business apps the backoffice is using to handle all the customers, the contacts, their contracts and other related tables is branded.

This concludes the branding and glossy pixels for our solution.