Case study
Repurposing Cogo’s mobile app for R&D
Context
I joined Cogo as the first full time product designer while the company was shifting its main model from B2C to B2B2C, in an effort to create impact at scale and a viable business. Cogo was founded in 2010 and had explored many ways to change consumer spending for good, but was now focused on helping individuals and businesses measure, understand, and reduce their impact on the climate.
Cogo’s original product was a B2C mobile app, into which a spend-based carbon footprint tracker feature had been built as a proof of concept. Cogo was now selling an API for banks to integrate carbon management features like this into their digital experiences. This way, Cogo could meet individuals in a space they are already engaged with, reaching a broader audience, removing blockers to building carbon literacy, and enabling climate action.
The proof of concept in the mobile app had been built very quickly, and other older unrelated features were making the app’s purpose unclear, creating a poor user experience. We simplified the mobile app to focus on carbon management and used it as a tool for R&D. This work helped Cogo validate solutions for carbon management in a banking context, understand the technical needs of the API, and provide UX guidance to banks building carbon management features.
Getting started
I paired with the product manager in my team to map out existing flows to gain a good understanding of what each feature was trying to achieve, and whether it was effective. We added insights from user feedback, included relevant analytics data, flagged any bugs, and noted UX issues. Together we summarised and prioritised the main problems to solve, with an engineering review to understand technical effort.
Key findings
Most important features (e.g. viewing carbon footprint) are hidden amongst poor navigation and irrelevant features that make the purpose of the app confusing
Wrong auto categorisation of synced banking transactions is a key pain point as it impacts footprint estimates and users are unable to act on it
Bugs in the offsetting journey are critical to fix as users expect their experience to reflect their purchase
Content and explanations need simplification
Climate actions (ways to reduce emissions) feel disconnected from the users footprint, and the flow to “commit” to an action is unclear
Initial app changes
Early development involved removing the features that were no longer relevant or maintained by Cogo since the focus on carbon management, such as a living wage spending tracker and business directory. Navigation was improved by removing an unnecessary landing menu and taking the user straight to view their footprint. Given its importance, we split climate actions out into a new core screen. We kept business suggestions in the details of climate actions if they were relevant to help users make the change.
The app was now focused on the features we offered to help users measure, understand, and reduce their impact on the climate. Since carbon management was such a new and rapidly developing space, we knew there was lots of space for improvement and iteration.
Enabling rapid development
During the engineering review of the app, the team had found a lot of technical debt existed in the front-end which made changes or additions difficult. The UI also wasn’t visually consistent, due to features being added over time without consistent guidelines. The team decided it would be easier to rebuild the front-end with an iterative approach, replacing the parts of the experience we needed to validate or improve one by one.
Design system power up
Around the same time, I had worked with the other Cogo designers and the marketing team on a brand refresh, with help from an external agency. I led an initiative to create a design system following the refresh, to define how it would apply to our products. I planned a structure that would ensure brand consistency across multiple platforms, and make maintenance and updates easier.
Collaborating with an intermediate designer I was mentoring, I created the design system in Figma, with accompanying documentation on Notion. I also set up a GitHub repository to store and control versions of platform agnostic assets (including design tokens, fonts, and icons) that engineers could pull into their development environments.
With the mocks and specifications in the Figma design system, Notion, and the GitHub repo, the engineers were able to create a component library in React Native with the basic UI elements (type styles, buttons, forms etc) needed for the app. This made gradually rebuilding the app and adding new features much more efficient, and any future changes to the design system could be easily rolled out across any part of the app that used the components.
Using the app for R&D
Over the following year we redesigned the rest of the app, refining and validating our approach to a personal carbon management experience and developing new concepts. The design process typically involved close collaboration with UXR and BSci teammates, and I used both async and real-time methods to gather feedback from the team on designs regularly.
We were able to use Figma prototypes and participants sourced from Askable to user test new features or major changes as needed, in addition to our UX researcher running a regular cadence of interviews with real users to understand how the released changes were (or weren’t) working for them.
Once a design was ready for testing in production I put together specifications for development, referencing the design system and pairing with developers for design QA and quick solutions to any missed edge cases.
Some of the highlights included:
Refining and validating how spend-based carbon footprint estimates can be used to improve carbon literacy (view case study)
Improving the footprint display to help users identify opportunities to reduce emissions, and see the positive impact of their efforts
Redesigning Cogo’s climate action journeys to encourage behaviour change and help users reduce their carbon footprint
Developing a gamified ‘carbon budget’ feature to engage and motivate users with an achievable reduction goal
Outcomes
Summary of the business impact of this work coming soon!