A Quick LCFS Calculator Tool
Designed a native app for SRECTrade. In 3 simple steps, the app models the electric/CNG fleet’s annual projected value from clean fuel credit sales in the Low Carbon Fuel Standard (LCFS) Market. Users can share results via automated email, and easily connect with SRECTrade’s client support team directly from the app.
.png)
Team: 1 PM, 1 Engineer, 1 UX designer
Role: Sole UX/UI designer. Supervised the development
Outcome: Generated significant sales leads & got excellent user feedback
Step1: Select Vehicle Type
Step 2: Select Fuel Type
Step 3: Enter Energy Usage
Your base & SRECTrade Value!
To comply with my non-disclosure agreement, I have omitted confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of SRECTarde Inc.
Coming soon!
To support the growing LCFS sales efforts, we wanted to create an iOS/Android application that could help estimate the expected LCFS value and additional value created by using SRECTrade. At the time, the business was using Excel spreadsheets for this modeling, which was time-consuming, and not accessible by external users. SRECTrade also needed a lead generation tool as a part of its client development program, a simple method to engage with current and prospective clients and partners to calculate their return on investment and increase brand awareness in the clean transportation market.
The User - Initial idea & New direction
Initially, the business team wanted to build the app for internal use. The primary target users were the SRECTrade client development team, consultants, or anyone who wanted to communicate the value with prospective clients. However, the project's scope changed to make the app available to EV charging infrastructure owners, fleet operators, utility companies, or anyone who would like to calculate the dollar value of their LCFS credits. That was a huge change and we ended up with two primary personas and two sets of needs.
The Need - A method to communicate the ROI in the Clean Transportation market
The proposed design makes it possible to add another vehicle or fuel type without changing the whole design. Adding the fourth option will only change the vertical layout of the options into a grid.
Added more UI improvements to make the flow simpler, clearer, and more minimal.
Inspired by nature, the footer illustration gives a base to the screen and brings the content together.
Initial idea (all steps)
(Started with the PM's idea)
Vehicle types and fuel types were too close as if they were one section, and people could perceive them as one group.
The icons lacked labels and could confuse users. (leaf was a symbol of CNG, which might not be obvious).
The interface was crowded, and the task was not straightforward.
The result section should have been removed from the home screen until the user provided their email address (business decision).
The result summary CTAs were vague and the numbers could be presented better.
Iteration 1 - (all steps)
(Improved content grouping)
Moved vehicle selection to the top cause it was easier for users to answer that first.
Labeled the icons and grouped them so that users could easily understand that they needed to select one option in each section.
Removed the result section from the home screen.
The usability test result revealed that the vehicle type icons were not in the thumb zone and couldn't be easily reached.
Anticipated that we may add more vehicle and fuel types in the future as we grow our markets, and this design was not scalable. (In the middle of the project, we added Forklifts).
Broke down the form into 3 sections that slide in on user taps.
Included a progress bar to give users status feedback.
The progress bar was not visible enough.
The interface was crowded and had unnecessary elements such as borders and a section title.
Iterative Improvement Based On Usability Tests
1st release
(Improved the aesthetic)
Iteration 2 - (Screen/step1)
(Separated the steps)
The Challenge - How did we handle scope changes?
The project was time-sensitive and came with a specific planned release date. In spite of that, the project scope changed in two ways: 1) we decided to target both internal and external users, and 2) additional vehicle types were added to user inputs.
Due to constraints, we focused on our internal stakeholders and reached out to our internal users, and conducted multiple interview and usability tests. Then based on gathered insights, the product manager and I made some assumptions about our external user's needs and motivations. These assumptions were informed by and based on our client development team's interactions with potential clients. We assumed that our target users:
were busy & use the app on the go; i.e. efficiency was a priority.
needed to clearly communicable value proposition; i.e. simplicity and clarity was another objective.
were tech-savvy.
The LCFS program and market was a new growth opportunity, so the design's durability and scalability were also primary objectives. It was an important design consideration to make sure adding other asset or fuel types would not break the original design. As a result, adding the new vehicle type (forklift) was not a big deal any more. The new vehicle option could be easily added to the other options in the proposed design:
Initial vehicle types the business started with.
Near the end stakeholders added forklifts to the model.
Adding more vehicle options will only changes the vertical layout into a grid.
Release 1:
Release 2:
Initially, the business only operated in California’s LCFS market.
Then we added Oregon’s CFP market with a different credit value calculation.
Users with assets in OR have the option to choose their utility company for more accurate calculation.
.png)
The Process - Used Lean UX to adapt to scope changes & test new opportunities quickly
In the project kick-off, the product manager, the engineer, and I discussed the project scope (which was a little unclear at first), requirements, opportunities, and constraints. We talked about the business goals which were to create a method to clearly communicate the monetary value of participating in the LCFS markets as well as promoting SRECTrade’s services to the market. I continuously reminded myself of these goals throughout the design process.
The starting point of the design was based on the product manager’s vision (a rough sketch). Since we had limited time and resources, conducting comprehensive user research was not possible. So, we made some educated assumptions about our external user's needs and motivations. These assumptions were informed by and based on our client development team's interactions with potential clients. I iterated 3 times on the low-fidelity design before the first release, each time refined it based on the feedback I got from the internal users and our usability test participants. The final stage was turning these refined user tested wireframes into high-fidelity mockups.
Main User Flow - Re-shaped the product vision
Final Mockups - All Screens
.png)
“Easy to use. Instant calculation of annual LCFS revenue. Great way to see potential revenue from new fleet.”
User on APP Store
“Your app is fantastic. I really like what your team has launched! Nice and to the point.”
Client feedback
UI design
For the UI, the goal was to have a simple, clean, and modern interface. I simplified the company's color palette, used its typeface - Helvetica Neue- and designed the icons. I also designed an animated icon to be displayed on the splash screen.
Inspired by nature, I decided to create a very simple footer illustration as a base for the screen and to bring the content together.
Finally, since for this app, we used new components, I created a detailed document for the design hand-off in addition to the Figma and Zeplin files that I shared with our engineer.
Next Steps
The app evolves as we increase the variety of our services and add new clean transportation markets globally. In the next iterations, we will add the capability to select multiple vehicle types. We may ask for user's email right from the first visit instead of asking users for their name and email address before showing the credit value.
We’d also like to focus on improving the lead generation piece.
To visually show the difference between the base value and the SRECTrade value, we can add a dynamic bar chart to the “Value summary” screen to compare base vs SRECTrade values. It was a nice-to-have feature, which we punted until later iterations.
The accessibility of the app can also be improved to increase its reach to more users. This includes but is not limited to increasing the contrasts of some of the texts and CTAs based on WCAG requirements and providing alternative on-screen keyboards.