When I started at CLEVER°FRANKE I joined the Globalance World design team. At this point the concept design was finalized and development had already started. This meant that in my role I mainly focused on working out details and further improving the design. For example: designing hover and selected states for buttons, defining empty and null states for graphs, setting up the structure for the footer, improving the navigation & menu, optimizing for mobile devices & Quality Assurance.
After Globalance World was released the client came back to us with a new feature request. After another team member designed the first wireframes I picked it up further develop the UX design and create the UI design.
Create portfolio is a new feature on Globalance World where a client can create a fake portfolio to see its potential impact.
With this new feature, clients don’t have to invest money to play around with Globalance World in a more personal way than through others' portfolios.
Create a new portfolio
The user can reach the Create portfolio function through the menu. A user can create up to three personal portfolios and can see the overall footprint score of their portfolio on the start screen.
Add assets
As a next step, the user can add several assets to the portfolio. While adding assets, the user can already see if the asset has a positive, balanced or adverse footprint*. It was important that adding and removing assets was an easy process for the user. For this reason I wanted to avoid using a modal screen to add assets and make it possible to add and remove assets in the same screen. This way the user can easily keep changing the assets without having to click back and forth between different screens.
The Globalance Footprint is a framework created by Globalance that uses nine themes to assess and show the impact of assets.
View your portfolio
After adding all the assets, the user can explore the portfolio within Globalance world. This means you can study its climate warming potential, footprint, megatrend-exposure and returns. Or compare it to other portfolios or to market indices.
Mobile and other details
One of the challenges while designing the editing of the portfolio was making it work on mobile. Not only from a design perspective, but also what was technically possible during the available time. I worked closely together with the developer to discuss the options, which guided the design process to create a solution that would work on both mobile and desktop.
Besides designing for mobile, there were also some other small details that had to be taken into account. So was there a limit of 20 assets that a user can add to a portfolio, which meant that the user had to get clear feedback when this limit was reached. To make it easier to continue editing the user can also delete assets within the search results.
After editing the results of the portfolio have to be calculated first. I’ve decided to disable editing and exploring and show a loading state to avoid confusion or technical errors.
