Portal Illustrations

Illustrations to support messages throughout the Redback Portal.

Redback are a solar energy company focussed on software and hardware development. Their portal is an interface that allows users to check on the status of inverters. It has three audiences: home owners, installers and customer service team. I was tasked with creating illustrations that supported the messages through the portal. The illustrations required ranged from Login screens right through to the 500 error pages. I needed to keep consistency through the design whilst aligning to the existing brand colours. 

Series of iterations created when designed the illustrations, exploring different colour schemes and iconography for each message.

Final illustrations


Improving the UI and UX of the website responsive screens.

When I was designing the illustrations, it became clear that the mobile responsiveness could be improved for a better user experience. Took it upon myself to present some solutions to enhance the experience. I’ve tried to think of every possible solution to help the user ‘think’ less, thus making it a super easy experience, eliminating any possible hesitation or friction points.

Addressing the problems with the design and coming to a solution.

PROBLEMS

  • The ‘Redback’ logo is too large and is unbalanced on the mobile site.
  • The title text is too aggressive for this type of message being red coupled with uppercase, this title comes across as ‘Shouty’ and would make the user feel as they are incompetent forgetting their password and may not proceed with reseting their password.
  • The microcopy paragraph is too long, delaying the users request to reset their password.
  • The email input field is far too wide, the placeholder text doesn’t have enough contrast and the entry field isn’t obvious to the user.
  • The text on the CTA button is too small, making the user squint to read.
  • The T&C’s copy is too large, in the heirachy of information it should be read last.
  • The information is running too close to the edge of the device, making the content of the page look squashed.

SOLUTIONS

  • Replace the ‘Redback’ logo with icon, balancing out the space on the screen. The icon is familiar enough for the user to understand what company site they are on.
  • Soften the title text. Replace with sentence case and change the colour to blue so that users don’t feel incompetent for forgetting their password.
  • Replace with concise microcopy so the user can continue onto their next step quickly to complete their task.
  • Reduce the email input field length as the input field size communicates the length of the content needed. Emails addresses are rarely this long. Remove the placeholder text and replace with label. Add in a border so it’s obvious where the input field is.
  • Ideally I would change the colour of the CTA button as red is associated with negatives ie.’stop’, ‘cancel’ but keeping in mind the brand colours I kept it red and added a slight gradient. Increased the size of the CTA for ease of readability and added a drop shadow as a button affordance.
  • Reduced the size of the T&C’s so that they are the last bit of copy that is read. Make the PP and T&C bold so the user is aware that they are links.
  • Create a consistent white space border around the design to help the user focus on the message.
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google