Mobile App Design
GOODLEAP
GOODLEAP
GoodLeap, a leading solar financing provider, connects to equipment manufacturers’ APIs to deliver real-time insights into customers’ energy systems. Partnering with my team at Slalom, they aimed to enhance customer engagement, simplify loan management, and promote sustainable energy solutions. I led the design system's creation and maintenance, ensuring consistency across high-fidelity designs and prototypes. My work focused on key pages like the home and energy dashboard, integrating dynamic data visualizations for real-time system performance. We also streamlined loan payments with self-service features such as one-time payments, autopay setup, and payment history tracking while providing educational content to inspire continued investment in renewable energy.
Role
UX / UI Design
Company
Slalom
Duration
4 Months
I led the design system, defined the app’s creative direction, worked with developers on implementation, and coordinated user testing.
Our challenge was to combine the acquired products into an intuitive interface while, at the same time, seeking to add new capabilities
Our challenge was to combine the acquired products into an intuitive interface while, at the same time, seeking to add new capabilities
Leading the Design System
Led the creation and maintenance of the design system, ensuring consistency and efficiency. Defined components, documented guidelines and worked with developers to refine implementation.
Over the course of the project we conducted 20+ interviews with subject matter experts and existing users to better understand the challenge as well as potential opportunity areas
Over the course of the project we conducted 20+ interviews with subject matter experts and existing users to better understand the challenge as well as potential opportunity areas
Dev Collaboration
Worked closely with developers developers to streamline handoff and implementation. Conducted design reviews, addressed feasibility concerns, and ensured alignment with the design system.
Incorporating the insights learned in the previous two phases, our team designed a high-fidelity, clickable prototype to share with the client and refine via user testing
Incorporating the insights learned in the previous two phases, our team designed a high-fidelity, clickable prototype to share with the client and refine via user testing
Develop High Fidelity Prototypes
Blueprinting
Conducted a creative exploration workshop, analyzing competitors and developing multiple design directions. Created high-fidelity mockups to establish a cohesive visual identity for the app.
Next, we synthesized our findings from our research into a service blueprint and application map that would serve as a north star for prototype development and user testing
Next, we synthesized our findings from our research into a service blueprint and application map that would serve as a north star for prototype development and user testing
User Testing
Delivery
Coordinated and executed user testing sessions, analyzing feedback to refine designs. Identified key usability improvements to enhance engagement and ease of use.
Prior to handoff, we compiled a style guide consisting of over 60 reusable components that would serve as the building blocks for a cohesive design system
Prior to handoff, we compiled a style guide consisting of over 60 reusable components that would serve as the building blocks for a cohesive design system
We designed creative territories to explore and test different stylistic directions for the app, helping define its visual identity and user experience.
Creative Territory Explorations
Utilizing insights from the creative territories exercise, I began building core components that would form the foundation of the design system. This approach ensured a cohesive visual language while enabling other designers to quickly create and scale new features with consistency.
Each screen was thoughtfully designed to enhance usability, provide real-time insights, and create a seamless experience. Below are key highlights that showcase how we improved engagement, efficiency, and functionality.
After completing research and drafting the guiding documents, a clickable prototype was designed for testing
The Home Screen
Real Time Feedback Via Dynamic Visuals
The home screen was designed to feel live and responsive, giving users an immediate sense of their energy usage. Blinking dots indicate active power flow between the battery, grid, and solar, reinforcing real-time updates. Additionally, the background shifts to reflect the time of day, creating a more immersive and intuitive experience.
Users needed a way of understanding deal progress in order to quickly communicate status to their clients when necessary. To enable this, we designed a tracker summarizing the four major steps of a deal so that legal professionals could easily view and communicate progress. An activity feed and task list provided additional visibility into potentially relevant items without the need for multiple clicks.
The Home Screen
Prioritized Data For A More Informed Experience
Scrolling below the system graphic reveals key metrics and account details, carefully prioritized based on user preferences. Users can quickly see their self-power percentage, cost savings, and environmental impact, with added historical trends for deeper insights. Loan details, shop recommendations, and educational resources provide a well-rounded view, making it easy to manage their loans and explore new opportunities.
Users needed a way of understanding deal progress in order to quickly communicate status to their clients when necessary. To enable this, we designed a tracker summarizing the four major steps of a deal so that legal professionals could easily view and communicate progress. An activity feed and task list provided additional visibility into potentially relevant items without the need for multiple clicks.
The Analytics Section
Comprehensive Energy Analytics
The analytics section serves as a one-stop hub for historical energy data, giving users a clear breakdown of power usage from solar, battery, and the grid. Flexible timeframes—day, week, month, or year—allow for easy trend analysis, while the ability to view past performance ensures a complete picture. Users can also view stats by power source for a more detailed understanding of their system’s efficiency.
Users needed a way of understanding deal progress in order to quickly communicate status to their clients when necessary. To enable this, we designed a tracker summarizing the four major steps of a deal so that legal professionals could easily view and communicate progress. An activity feed and task list provided additional visibility into potentially relevant items without the need for multiple clicks.
The Accounts Screen
Streamlined Account Management
The accounts screen simplifies loan management by prioritizing frequent actions and enabling seamless navigation between accounts with a quick swipe. Secondary actions are tucked behind a tap, keeping the interface clean while ensuring key information on solar and battery loans remains easily accessible.
Users needed a way of understanding deal progress in order to quickly communicate status to their clients when necessary. To enable this, we designed a tracker summarizing the four major steps of a deal so that legal professionals could easily view and communicate progress. An activity feed and task list provided additional visibility into potentially relevant items without the need for multiple clicks.
Lessons Learned
Lessons Learned
The Power of Divergent Stylistic Directions
Minimize learning curve
One of the key lessons learned was the importance of establishing divergent stylistic directions early on in the design process. By exploring different creative territories and presenting various visual styles, we were able to identify the most compelling direction and finalize the design system early. This approach enabled us to create a cohesive and flexible design system, which allowed the team to move quickly and efficiently during development. Establishing a clear design vision upfront not only improved alignment across teams but also ensured that the final product was visually consistent and met user expectations.
Integrating Design into Development Processes
Minimize learning curve
Another valuable takeaway was the importance of incorporating design into the developer review process from the outset. By establishing a robust collaboration between designers and developers—where designs were consistently reviewed and refined based on technical feasibility—we ensured that implementation adhered closely to the design vision. This integration helped avoid miscommunication and delays, ensuring the final product was both functional and true to the design system. Fostering strong developer collaboration not only improved the overall efficiency but also enhanced the quality of the final product.