Reforest.com.au
Leaderboard UI Design

Client:

Bold & Bald

Role:

UI Designer

Project type:

UI Design

Year

2020

Responsibilities:

UI Design specifications, UX recommendations

Collaboration

Social enterprise

The Reforest platform enables users to grow their own forests. This was a high priority project based on helping our planet and the future generations of people help stop climate change and increase the relevance and simplicity of using the mobile app. Future app updates are intended to increase mainstream user appeal.

Design brief

Project scope

It is a known fact that users apply their own knowledge to a user interface. One of the important things to avoid is clutter, which means optimising content for easy information retrieval because it is less time consuming or less exhausting for users. I collaborated with Bold & Bald towards the design and development of this project. My action tasks included:

  1. Create a dashboard style leaderboard system
  2. Design a mobile responsive website layout system
  3. Establish visual hierarchy for the leaderboard web page
  4. Provide guidance for table sort and retailer category slider functionality
  5. Develop display methods - symbols, figures, and table format

Leaderboard purpose

General goals

  1. Display multiple categories of retailers to the public
  2. Enable users to monitor how their reforestation projects are tracking
  3. Attract new retail partners through a competitive hierarchy table
  4. Draw attention to retailers with the least amount of CO2 reduction
  5. Retailers with the most trees will be promoted as best in class
  6. Categorical data is related to the amount of users who are matched with the partner

User stories

Understanding the users needs

  • "I want to see my impact and how it compares"
  • "I want my retailer to see my action and respond"
  • "I want Reforest to match my trees to help pressure my retailer to join"

Sketches

Creative process

These quick sketches helped me to ideate some layout variations and determine how the interface might function.

Reforest UI sketches

UI Features

Design specifications

  • Formatting – quants such as tonnes measurements can be converted to kilo tonne for large emissions
  • Invite and share buttons switch for each retailer row depending on their status (share if onboard, invite if not)
  • A Retailer that is not on-board yet will not display their logo until they are partnered with Reforest
  • Establishing design norms - I added a button that enables users to see the overall rank order. This, however, might be unfair for retailers as some retailer categories will have a larger CO2 emission output and is still being considered
  • Description labels for retailers switch depending on if they are an associated retailer or not

Integration

High-fidelity mockups

Reforest UI wireframes
  • When users download the app and begin logging their activities (such as driving or flying from one destination to another) the Reforest app will calculate the amount of CO2 a user generates by measuring their activity (or CO2 footprint)
  • All activities can be automated by repeat and setup functions so the users doesn’t need to worry about logging each and every activity
  • Users can choose to balance their footprint by buying trees with the app
  • Users can choose where to purchase trees from with the app
  • Every time a user logs an activity retailers are notified when they’re onboard by inviting the user to reduce their CO2 emissions. The app matches retailers (such as an airline) to the user. For example, 1 tree may = 200 kg of CO2 depending on the location of the plantation project
  • Retailers balance the carbon by offsetting their CO2 emissions with the amount of reforestation plantation projects reforest they are contributing towards. There is accountability for projects for reforesting which must be proven. For instance, if a retailer is in the list they are aligned with UN carbon neutral partnership

Conclusion

Project status

As more conscientious retailers' begin to raise their public image, the Reforest.com.au platform will increase public awareness of sustainability issues that have a greater impact on our planet by reducing CO2 emissions.

This website is currently under construction

At this stage the designs of this website are unable to be disclosed.

Next section

D.E.T Victoria App
Effective design logomark

Shay Grantham
UX Designer

Let's talk today!

Shay Grantham
UX Designer