Interfaces for Sustainability

Creating UI designs for a SAAS product · 3 months · UX lead · Internship

Project Background

I was brought on board to work on Generate Zero's carbon accounting software, Footprint. During my nearly three month tenure I was responsible for designing interfaces for upcoming features, documenting any research I did, and bringing consistency and organisation to their current design system.

Hitting the Ground Running

From day 1, I was inducted into the product teams Agile methodologies. Working in two week long "sprints", I had to immediately dive into learning the ropes. After a walkthrough of the platform, I spoke to the development and data teams to get a better sense of my work and the product. Since I was working on a live product, I had very tight turnaround times for my design, and my first few mini-projects focused on relying solely on my existing design knowledge as we were lacking the time and resources to conduct user tests. This went against everything I had learned so far- user testing has always been an essential part of my design process. It was definitely challenging to set aside that mind-set and just trust my pre-existing knowledge. Thankfully, there was a ton of design documentation for me to refer to, and opportunities for me to conduct desk research (shout out to the Nielsen/Norman Group website for being a lifesaver!).  

Revamping Settings

My first major project was to work on revamping the settings page. The initial iteration of this page had confusing information architecture, with sub-pages hidden behind tabs labelled un-intuitively. The first step was to create separate pages to control organisation level settings and data level settings, and renaming the latter to better reflect its utility. There was also a new File Manager page added. 

Once my new IA was approved, I went ahead with creating the screens for the new pages. I used pre-existing assets from the design system, so I skipped the lo-fi prototyping stage and went straight to a hi-fi version. I also went in and made UX improvements to certain specific features. For instance, some of the input forms were incredibly long, which could have caused users to feel intimidated and overwhelmed. So, I made the decision to hi.de the less used input fields behind  dropdowns, with certain default options pre-selected. I also added a red asterisk to indicate which fields were compulsory and which were optional, and where possible, example text was provided in the input fields.

Since I was approaching the platform from the POV of a totally new user, my rationale was to provide examples and explanations as much as possible through features like tooltips and onboarding screens in the empty states of pages. I consulted with the data team when writing microcopy, to get their perspective on what would be most helpful for users.

Purchased Goods and Services

Besides UI designs for upcoming features, I was also asked to plan for the future. There were a lot of different directions the platform was headed in; expansions and improvements that would empower users to handle their data with even more ease. The purchased goods and services feature would allow users to directly connect to their suppliers using Footprint, and in turn allow the suppliers to upload the relevant data without having a Footprint account.

After performing some competitor analysis, I studied how other platforms' data connection features worked. The priority for Footprint was to first create something simple and lightweight, that could be further built on and expanded according to customer need. After brainstorming sessions with our product manager, sustainability advisor, and the data team, I came up with two user flows, one for the Footprint user and the other for their supplier.

After a round of feedback from the product manager, I was asked to scale back on the scope of this project. Instead of a detailed supplier dashboard, I was asked to focus on the customer end of things for the time being. I then combined both user flows and pared it down, focus on an even higher level overview.

I made sure to thoroughly document my process, research, and design rationale so that in the future there was a base for the next designer or developers to work from. This really impressed the importance of organisation on me; not only was I responsible for keeping track of the work I had done, I also had to make sure that whoever came after understood it as well.

Into the Light(Mode)

My last major project with the company before my time was up was implementing light mode. When it was first being built, the developers made the decision to design the platform in only dark mode as a personal preference. Light mode was a much needed feature, not just from an accessibility standpoint, but also one that several customers had been requesting. We made it our goal to send the update out as a Christmas special. Working in conjunction with one of the developers, I did an audit of the entire platform, using the A11y colour contrast checker to make sure all the components met accessibility standards. Some work for light mode had already been done by the previous UX designer, and I went in and filled in the remaining gaps. I also updated the design system, adding detailed notes for the use cases of each colour, and labelling them using a self-explanatory token system to act as a guide for the developers.

Some work for light mode had already been done by the previous UX designer, and I went in and filled in the remaining gaps. I also updated the design system, adding detailed notes for the use cases of each colour, and labelling them using a self-explanatory token system to act as a guide for the developers.

Final Thoughts

Working at Generate Zero was a fantastic experience. I got a much needed confidence boost in my abilities as a designer after my time here. It was initially challenging to join a team that had already been working together for quite a while, but pretty soon into my stint I got comfortable. Working on a live product alongside a whole team of people, with different perspectives and priorities was really interesting to navigate. It got me to step outside my designer bubble and learn how to strike a compromise between the best possible user experience and real world constraints.

It was also amazing to see my designs come to life via the development team, and consulting them during the design process to see what was and wasn't feasible added a real-life element to my work that was lacking in my university projects. It felt empowering to be relied on by my teammates for UI/UX advice- the rush of helping someone solve a design problem felt great. I am excited to use my new-found confidence to fuel the steps in my design career.

← PreviousGo back homeNext →