SRP M-Power mobile app

Through the usability sessions and interviews, we confirmed that users wanted to make electrical power purchases intuitive and efficient. This was the main task users wanted from the app. Other tasks included checking purchase and usage history, as well as being able to request credit advances, managing accounts, and receiving push notifications.

After gathering our research, I empathized with the user’s feedback and focused on these challenges:

Improving the Purchase Power form: For the Purchase Power form, the app version allowed for decreased time on task with the addition of preset purchase amounts. These presets of common purchase amounts made it possible for the user to complete the purchase form in as little as two taps. Alternatively, the website required the user to manually enter their purchase amount for every purchase. Other purchase presets that were not implemented included “last purchase amount” and “amount owed to SRP”.

Clear Communication of Purchase Distribution: In the event that the user had a negative balance and needed to pay SRP back, the UI presented a clear breakdown of how their purchase would be divided between SRP and their meter. The UI also allowed for users to dedicate the entire purchase amount to what was owed to SRP, allowing for greater flexibility to users who were wanting to eliminate their negative balance as quickly as possible.

One Data Point to Rule Them All: To clearly inform the user of how much power they had remaining on their account, I devoted the majority of the Dashboard view to this value as well as visually indicating it with a fluctuating colored background. The Dashboard’s main call to action was to purchase power, as this was by far the most popular action M-Power users took- sometimes multiple times a day. The latest version of the Dashboard allows for a handful of secondary stats to be displayed to help users get a better understanding of their recent usage without needing to navigate deeply into the app.

The mockups and functional prototypes for this project were all designed and maintained in Axure RP. Adobe Photoshop and Illustrator assisted in creating custom icons and imagery for the app’s interface. Development wise, the initial release of the app was in Ionic, a hybrid cross-platform toolkit. Future releases iteratively introduced Jetpack Compose and SwiftUI into specific pages.

During the development and design of the SRP M-Power app, we encountered a few challenges that impacted the project’s outcome:

Stakeholder Influence on Design Decisions: Despite the research team highlighting key features, some stakeholders insisted on their own preferences over user- centered design recommendations. For example, the main Dashboard page was almost predetermined based on a stakeholder asking for it to look a very specific way. This led to minimal creativity on how the Dashboard looked and behaved.

Developing with a Hybrid Toolkit: To save time, management chose to develop the app using Ionic (a hybrid code base toolkit) instead of Swift and Jetpack. This choice led to limitations in platform-specific functionality and UI behaviors, requiring additional time for optimization across different devices and operating systems.

As the UX Designer on this project, my main job was to make sure the SRP M-Power app was easy to use and met both user needs and business goals. I worked closely with developers, the research team, and various stakeholders throughout the design process. My role was crucial in turning user insights into practical design solutions, making improvements based on feedback, and ensuring the final product provided a smooth experience for users.

Designing Mockups & Prototypes: One of my main tasks was designing high-fidelity mockups and interactive prototypes to show what the app would look like and how it would work. These designs helped give stakeholders a clear picture of the user interface and flow, and they were crucial for usability testing. I made sure these mockups stuck to the company’s brand guidelines while focusing on making them usable, accessible, and mobile-friendly. Prototypes were used in usability tests to see how users interacted with the app, which allowed us to iteratively tweak and improve the design based on real-world feedback.

Example of a functional prototype used in user testing

Collaborating with Developers: I worked closely with the development team to translate design concepts into functional UI components, ensuring the visual designs were both technically feasible and aligned with the platform’s capabilities. We collaborated to implement interactive features such as navigation menus, bill payment forms, and energy usage graphs, making sure these elements were not only visually appealing but also intuitive and user-friendly. Throughout the development process, I participated in regular sprint meetings to provide design feedback, troubleshoot potential issues, and maintain design consistency across the app.

Here are some key outcomes we gathered after the launch of the app:

The overall success of the M-Power app led to the removal of all SRP owned PayCenter kiosks across the Phoenix area. M-Power customers now had the ability to make purchases from their phone and no longer needed to physically drive to a payment location. Also, the popularity of acquiring credit advances through the app decreased calls into the call center by 41% from the year prior.

Although SRP made a decision to transition the M-Power App (as well as all My Account related products) to a third-party, there were early plans to further develop the Dashboard. This redesign of the Dashboard would allow users complete flexibility in what data is most relevant to them. The stat of “Power Remaining, in days” would remain the main content, with all other stats controlled by widgets that the user could add, remove, and reorder to best suit their needs.