Why we chose to take up this project

Quambio tries to solve the issue of sustainability with a more proactive approach, a lot of apps out there is focus on calculating the overall CO2 produced by their users and then as a means of offsetting that CO2 they are forced to either buy products to donate to organisations. Quambio takes a different approach here by nudging users to ditch their car or bike and use a more sustainable means of transportation either walking using a bicycle or bus. the app then calculates the overall CO2 saved and this is stored on the platform as cube points which can be further used to motivate users to continue to use the app.

01 uai

Designing the framework for growth

Ideation uai

We started by identifying some of the core features that would be implemented in the first version at the same time working on a build that would be fully functional to the end-user. We worked on a system where we would expand the product on a timely basis getting user feedback and improving the product incrementally. Our core goal was to capture as many users in the first build so we had to take into account and develop both for Android and iOs.

The importance of iteration

Before starting the design phase the team heavily ideates on the different possibilities and options ranging from futuristic to modern to what will really work and tries to find a balance, ideation on some of the final screens also gives us and the client on how each of the functions will look like without having to invest a-lot of time designing entire flows to come to the conclusion that the design or feature won’t work.

Logo ideation uai

Designing the brand identity

The carbon cube was the core inspiration for the brand elements on the quambio app, the logo is a minimal wordmark representation of the letter Q represented as the carbon cube and the coloured blue dot representing the carbon offset and the small step towards a cleaner future.

We used this representing of clean air as the various colours visible in the sky. This gradient then became the secondary colours used by the quambio brand and was incorporated as a reward feature by changing the app theme as and when the user completes a certain milestone.

Quambio Logo

Designing for rewards

Rewards built into the app are designed at 3 levels, Visible and active rewards, Redeeming points and level up with special themes, each of these provides motivation and increases the overall engagement among users additionally quambio has challenges where users can compete with their friends and colleagues thereby building the community and moving towards a shared goal.

Levels uai

Visual feedback while performing an activity

A key feature that is so elemental and subconsciously rooted is the visual feedback. It’s readily available in all physical products. The HMI for a water cooler for example is placed right above the water dispenser or even for that matter a coffee dispenser. Keeping such insights in mind, we designed for instant visual feedback when performing an action. These were amplified and we thought of adding color from a light white background that is constantly evolving as you save more and more CO2 to vibrant colors that represent progress. Creating subtle cues of visual feedback was key to keeping a minimal yet impactful UI.

10 – 1 2

Development

A key part of working with our development team was the learning that we should have a very strong technical architecture built in before we design or work on frontend or backend features. These were evident in the first two weeks and we worked closely with the dev teams to create this. Another key component of the experience working with a dev team was the constant need to think about how a certain feature would work and also be represented to a user. This was a key component in making the app more minimal and simpler for the user. The transitions worked great in our animations but through the multiple versions in the Test Flight app, we were able to figure out a lot of tweaks that increased the value of these micro animations and interactions from pure eye candy to user experience breadcrumbs.

charles deluvio pjAH2Ax4uWk unsplash scaled uai

Image credits: Photo by Charles Deluvio on Unsplash

Testing testing testing

We had a great back and forth with the dev team throughout the project and this was a highlight for our efforts in bringing the iOS and Android versions to life. In addition to the dev team testing the app out, our entire team spent time testing out the accuracy of the algorithm as well as testing distances, time and also elevation to map out the right calculations multiple times. There were instances of the UI front end that had to be tested multiple times to make sure the transitions and timing of transitions were right. The menu items and also the preferences were another feature to be tested.

Deploying to the app store's and getting it Live

Finally deploying to the app store and play store and seeing the users reaction to using the product was worth all the effort. Quambio now has download across Europe and American countries with every individual taking the first step towards a cleaner future with the help of Quambio.

Testing uai