Energy IQ | Transaction History
Case study
Overview
Energy IQ is a mobile app designed to provide users with insights into their energy usage. However, discrepancies between the web and mobile versions had created usability challenges, particularly due to the lack of a Transaction History feature on the mobile app.
My challenge was to introduce Transaction History functionality to the native mobile app, ensuring it aligned with the web experience. The focus was on addressing usability issues and resolving friction points to deliver a more seamless and consistent user experience.
Length of Project: 2 weeks
To comply with my non-disclosure agreement, any confidential information is omitted in this case study.Discovery
Key Questions
How might we design for the majority?
According to Google Firebase data, 70% of Energy IQ users access the platform via the mobile app. The absence of Transaction History on mobile left the majority unable to access essential information.
How might we reduce operational costs?
Ambiguity in Transaction History on the web version often led to increased customer support calls. Clearer design on mobile could alleviate this issue.
How might we provide a consistent experience?
To ensure feature parity across platforms (web, iOS, Android), Transaction History needed to be introduced on mobile while maintaining consistency with existing design patterns.
Findings:
Users found it difficult to distinguish between debit and credit payments.
Users wanted a filter feature to easily sort transaction types.
Design solutions
Improved Visual Clarity: Icons and color coding were added to help users quickly differentiate between debit and credit payments.
Filter Functionality: A simple filter was introduced, triggered by a bottom sheet, allowing users to sort transactions based on type, while maintaining consistency with existing design patterns.
Optimized for Mobile Screens: Transaction History was carefully designed to fit various screen sizes, ensuring accessibility without compromising usability.
Thoughtful Empty States: Empty states were designed to provide a complete and supportive user experience, reducing confusion when no data is available.
Deliverables
Bite-Sized User Stories: Collaborated with the Product Owner and Business Analyst to break down feature sets into manageable user stories with clear acceptance criteria, ensuring alignment with business requirements.
UX product specifications: UX specification is created to provide practical guidance not just for the design team, but for everyone else involved in the development of the product, it can effectively support decision-making, prevent misinformation or scope change to creep in and cause bad decisions during the development process.
A better Transaction History
The introduction of Transaction History on the Energy IQ mobile app enhanced usability and reduced friction. The addition of iconography, color coding, and filters improved clarity and usability, while the careful optimization of designs for mobile ensured accessibility across all screen sizes.
By leveraging design QA processes, the final product translated the design vision into production with accuracy and consistency, providing users with a seamless and satisfying experience.
