GAYLE
BARTON
Sr. User Experience Designer
Sr. User Interface Designer
Digital Design Manager
OPOWER
Opower is a software-as-a-service customer engagement platform for utilities. It brings rich AI tech and behavioral science methodology to each customer and enabling them to learn (and do) much more, enhancing the utility’s program reach (and goals, too), and empowering real change in everyday habits that could also change the world.
THE PROBLEM
-
Opower wanted to motivate everyone, everywhere, to use less energy.
-
Customers wanted a personalized experience as they interact with their utility.
-
Business goal was to show energy savings, while still delight and inform energy consumers.
MY ROLL
I was a senior user experience designer for the Opower team. I was brought in to refine the journey mapping and help the product team architect the user flows. Assisted in preparing wireframes and implementing the new design system (Opattern)
DESIGN TOOLS
Figma
PROJECT MANAGMENT TOOLS
Agile Verison One
UX TECHNIQUES
Competitors research
Test and Learn
Information Architecture
A/B UI Validation testing
DISCOVERY
We assumed that people don't care. Studies show that people only spend 9 minutes per year thinking about their energy use. We knew that we had to respect people's limited time. So we knew we needed to use familiar mental models, clear language, and visual cues to help people quickly process their information.
OBJECTIVES
I asked some key objective questions for the product team. Before we started the Workshops.
-
How are you educating your customers on pricing and value of your service?
-
What new energy products you want to bring to the customer?
-
How are the customers going to see their energy usage?
-
What future infrastructure investments are you making in the community that is environmentally friendly and will cut costs?
-
Are you going to ask how they want to be communicated with?
-
By email?
-
By Text
-
Social media channels?
-
-
What product recommendations are you making for the customer to be more efficient?
-
smart thermostat?
-
energy efficiency appliances?
-
-
What guidance or expertise are you giving to customers who wants solar panels? Or EVs?
USER JOURNEY MAPS AND FLOWS
During the Define phase, I facilitated several virtual workshops that:
-
Identified the experiences that the product team wanted to analyze
-
Clustered the users into distinct groups of their tasks,
-
recommendations on energy efficiency
-
high wattage rate information and notification
-
review last months energy usage
-
review what the neighbors rate is at
-
information on how to reduce cost
-
I reviewed the previous recorded interviews with the users, pulled out insights about how the user is expecting to do these tasks.
Worked in Mural to map out the engagement points, including actions, choices, emotions and behaviors.
Grow Your Vision
Write your title here. Click to edit and add your own text.
This is a paragraph area where you can add your own text. Just click “Edit Text” or double click here to add your own content and make changes to the font. It's a great place to tell a story about your business and let users know more about you.
VISUAL THINKING ON PAPER
DASHBOARD/OVERVIEW PAGE CHALLENGE: The native app lead the user through the experience with visual clues. How to recreate the step by step on Desktop?.
Following the "Design Thinking" methodology, I was sketching in the ideation phase, looking over the Native mobile app designs again, empathising with the user and define, in a continuously in a loop. Asking questions? How can you guide the user through the steps but also give them autonomy to proceed at their own pace and jump around as they wish. If they know there buying power can they skip that and go find a home? In the native app they had a color, disabled and a graphic check mark that clues the user that you have complete that section.
Hi-Fi PROTOTYPE
.
USE CASE: User views the various features within the dashboard prior to starting the application.
Top messaging changes and the illustration changes when user goes to different features within the experience.
ILLUSTRATIONS
I use the images from an existing animation that was used in this JP Morgan Marketing piece. I use Adobe Illustrator to add a few elements into the SVG illustrations. I prepared the images for the development team.
ADA SPECS
Created a ADA specs document that followed WCAG guidelines that appropriate to UX/UI Design:
-
Made sure that content, when presented to the user, conveys essentially the same function or purpose as auditory or visual content.
-
Ensured that text and graphics are understandable when viewed without color.
-
Ensure that tables have necessary markup to be transformed by accessible browsers and other user agents
-
Ensure that the user interface follows principles of accessible design: device-independent access to functionality, keyboard operability, self-voicing, etc.
-
Use features that enable activation of page elements via a variety of input devices.
-
Use interim accessibility solutions so that assistive technologies and older browsers will operate correctly.
-
Use W3C technologies (according to specification) and follow accessibility guidelines. Where it is not possible to use a W3C technology, or doing so results in material that does not transform gracefully, provide an alternative version of the content that is accessible.
-
Provide context and orientation information to help users understand complex pages or elements.
-
Provide clear and consistent navigation mechanisms -- orientation information, navigation bars, a site map, etc. -- to increase the likelihood that a person will find what they are looking for at a site.
-
Ensure that documents are clear and simple so they may be more easily understood
VCU BRANDCENTER