top of page

AMP Forward app

A mobile app for AMP member utility system staff to interact in a social messaging forum and read about trending utility topics from AMP-provided content and industry RSS feeds.

Project:

Roles: 

Live Prototype

mobile app

product designer, user research, visual design, prototyping & testing

overview & goal

American Municipal Power, Inc. (AMP) is a nonprofit wholesale power supplier and services provider serving 135 member municipal electric systems across nine states. AMP needed a platform for their members to read information about renewable energy projects and interact with each other.

The goal of this project was to create a free mobile app for AMP to offer its members that presents targeted, industry-specific content organized in an interactive centralized environment that is fun and educational. 

roles

This UX design concept was the result of a mentor-led bootcamp through Interaction Design Foundation. I ideated this app concept to address an existing problem I observed at my place of employment. I also created all designs and built an animated prototype.  

APPA-listserv.png

defining the problem

AMP members had no central place to read curated content and discuss industry-related topics with each other. AMP was limited to offering two separate resources:
 

  • topic-specific web pages on the AMP Member Extranet (password-protected section of AMP's corporate website)

  • subscription to email listservs from the American Public Power Association (APPA) - discussion forums that are open to all of APPA’s 1,400 members nationwide 

APPA's listserv forums

research & insights

My research was based on an existing AMP member survey where members stated they wanted a central repository of industry information and a way to interact in real time with fellow members about topics of common interest. 

AMP attempted to address these needs with pages on the Member Extranet, but it didn't fully solve the problem. I used the survey results and my extensive experience with the company to identify three main pain points. 

pain points

understaffed, tight budgets, time constraints for industry research

  • Public power electric systems are typically understaffed with budgets exclusively controlled by city/village councils, so they can't devote full-time staff to research industry information and future trends from multiple online channels on a daily basis.
     

few vehicles of communication 

  • The only ways for AMP members to communicate with each other were speaking in person at AMP events or through APPA's email listserv forums, which were rarely used.

barrier to information

  • When trying to access information on the Member Extranet, due to necessary security timeout settings, members were forced to log into the website upon each visit. They frequently forgot their passwords which required resetting them and this made it hard to easily access the information.

problem statement

Municipal electric system professionals, frustrated with busy schedules and lack of time necessary to research emerging industry trends, are looking for a user-friendly platform to quickly scan articles already curated for them and participate in discussions with peers.

user personas

Based on my research, I defined two target group profiles David (electric superintendent, 58) and Samantha (sustainability director, 36) to build empathy and prioritize goals according to their needs. 

Patterson-persona.png
Redding-persona.png

sketching & wireframing a solution

Based on the problems identified above, I sketched the first mock ups of the app detailing user flows for registration, sign in, forgot password and reset password to determine the basic functionality and the overall layout and structure of the app screens. I took the sketches and developed the app structure, translating them into low fidelity wireframes in Adobe XD.

 

key considerations

  • Since the research showed the majority of users are of an older male demographic with less experience using apps, the registration flow was purposely kept very simple and user friendly to facilitate quickly setting up the profile preferences.

  • Both the create account and sign in user flows include a "keep me signed in" radio button to alleviate the need to continually log into the app (unlike the AMP website requirement) to make it easy to pick up where they left off.

  • Progress bar visually illustrates where users are in the process of setting up their preferences.

VIEW DETAILS IN SKETCHES PDF

VIEW DETAILS IN WIREFRAME PDF 

reg-flow-1.png
reg-flow-2.png
signin-flow-1.png
signin-flow-2.png
Screenshot-registration-closeup-final2.png
Screenshot-all-screens-final.png

finding a visual style

Since the purpose of the app is to deliver content on renewable energy topics, I was inspired to select a nature-themed color palette of green and yellow as primary colors and grey as secondary. 

 

moodboard 

I developed a moodboard in Photoshop based on imagery of nature and clean lines. I chose typography that sets a tone of a clean, fresh, minimal and modern brand identity.  

styleguide & icons

I also designed a styleguide in Adobe XD consisting of typographical font styles and weights, buttons and icons based on the selected color palette.

 

VIEW MOODBOARD PDF

VIEW STYLEGUIDE PDF

styleguide1.png
moodboard-final-sm.jpg
styleguide2.png
iPhone_edited.jpg

building the designs

I converted my wireframes into high-fidelity prototypes in Adobe XD guided by the design principles of alignment, repetition, hierarchy, balance and contrast. I focused on overall style and aesthetic consistency across every screen. I also added genuine content based on existing articles posted on the AMP Extranet. 

 

VIEW LIVE PROTOTYPE 

testing & interations

I provided the prototype to AMP's director of sustainability to review architecture and test the registration and sign in flows. She provided valuable insight which led to a new section being added and I also went through several design iterations as elements were updated based on feedback. 

Hi-fidelity-prototype-connections.png
Hi-fidelity-prototype-all-screens.png

solving the problem

The AMP Forward app achieves three main goals:

  • Gives users an easy sign in process. After the first download, install and sign in, they will be given the option to remain logged in, unless they choose to log out, eliminating the need to sign in with each launch of the app. 

  • Integrating industry-specific information and discussion forums in one place for viewing and interacting. 

  • Giving members the ability to opt-in to receive email push notifications for new content posts or new replies to their questions in the app’s forums. 

AMP-Forward-Perspective-Stacked.jpg

AMP's director of sustainability was very excited about my app solution and was interested in pursuing having it developed into a functional app. She recognized the potential benefit not only for members but also for the company.  

AMP would achieve an important business goal by offering this app as an innovative member service and an additional benefit of membership. This app would address an identified need for its members in a user-friendly format that promotes learning and sharing with like-minded public power colleagues. This could establish AMP as a leader in the public power industry and lead to becoming a case study for other similar joint action agencies to duplicate this innovative solution. 

bottom of page