Original Design
Greenr offers a sustainability as a service platform, which includes an employee engagement app. This app is designed to help companies collect emissions data and educate their teams on reducing emissions. it provides a user-friendly way for employees to track their carbon footprint and learn about sustainability practices.
I was tasked with identifying any areas for improvement in the employee engagement app as an introduction to my time working with Greenr.
I tried balancing all the elements on this page so it was less top-heavy
The tree image doesn't add value to this screen so I removed it.
Typography and colour changes to keep in-line with Greenr's branding
I chose a stroke on the Abandon Pledge button rather than using red. This makes the page much less harsh on the eye.
Adjusted the positioning of these buttons for ease of reach
This modal needed to be closer to the bottom of the screen for ease of reach.
Plenty of breathing room for each element
I prefer strokes to using red in this case because the colour red signifies danger and that isn’t necessary in this case
One thing I noticed were the pledge icons were inconsistent in design. Some icons had a thick stroke and were sharp but others were filled in with rounded corners which didn't align with Greenr's branding so I simplified the badge, removed the ribbon and made each icon consistent leaving a design that could be scaled easily and match the brand.
I wanted to create a few more icon states for different situations. Previously, Greenr only used one solid gold badge with different coloured ribbons so I made sure to change the colour of the whole badge state was much more clear.
As part of ongoing UI changes, I was tasked with coming up with various error message designs. Here are a few examples of designs for the offline screen
