End to End Mobile App Design + Development


This energy group provides electricity and gas to 4.4 million customers across four states in the Midwest through 10 energy companies. They saw an opportunity to create a digital, account management platform for customers that would reduce customer service costs and could be re-skinned for their many companies and brands. We saw an opportunity to create something more meaningful than another utility app – one that is delightful while useful, and intuitive even (or especially) to our less tech-advanced users.




11 months


How might we provide a simple to use self-service experience for Midwest energy customers?


How might we redefine collaboration and lead with a design-centered approach from project ideation to implementation?


My role on this team was the Interaction Design Lead. I was also the only team member to be on this account from the very beginning of the project, when I planned and facilitated user story generation sessions twice a week with the client stakeholders. By the end of Phase 0, I had compiled a backlog of user stories and was the voice of UX in prioritization and grooming of the backlog. I had also established a trusting relationship with the client as well as a deep understanding for each user story in the backlog.

Moving into Phase 1, I developed the information architecture and interaction patterns for the app, and then created the wireframes and prototypes that I presented to the client in our check-ins. I collaborated closely with the design team, driving collaboration with visual designers, and critiquing + QA-ing visual and content design. I also met daily with the Product Owner and Design Director to align on upcoming tasks, planning, and client management, as I took on most of the program management responsibilities. We also collaborated closely with our development and Accenture teams (change management, Integrations, etc.), where I was frequently the voice of UX.


This project's biggest challenge was in educating and building trust with the client on how design and development should operate. None of our key stakeholders understood how this process worked, and we needed to walk them through each step at their pace, in their language. Working together to generate user stories helped to begin establishing trust; they could see more tangibly how user stories mean more than features, but should translate into the experience. They also started to see the importance of being user centric and value design rationale for appropriateness of features and ideas.

During user story generation, we used sketches to quickly illustrate and align on the experience. This helped ensure that our user stories were guided by the intended experience and draw the connection between user stories and the eventual build.

Our approach for design and development was agile, running on three week sprints with development running two sprints behind design. We designed with a pragmatic approach across iOS and Android so that the app would be as easy to use for as many users as possible. The epics had been determined during user story generation, and we started building an interaction pattern library and a product development kit with styles and components. These made both designing and prototyping easier, as well as the hand-off to developers smoother.

We organized every screen type into buckets to inform our interaction patterns and layout across screens. This led us to a consistent and intuitive interface and was the foundation for our product development kit, which included patterns, components and styles to make development easier.

We kicked off our sprints by getting approval from the client of the user stories that would be covered in the sprint. I would then design the iOS interactions and wireframes, which when approved, were handed off to our visual designers while I then tackled the Android wireframes. I would then build the prototype based on the visually designed screens, with the content provided from our content designer, and work with our QA to iron out the details. This prototype would then be approved and be passed on to our development team, who we reviewed with frequently to make sure the builds were as close to our designs as possible. Our team all sat together, so we were constantly communicating and working side by side, which allowed us to be even more agile and always aligned.

In addition to just designing the app, our team was able to show the client the value of other design activities that enhanced our work and design perspective. One activity we did early on was visit a customer call center to shadow call center representatives and listen in on the kinds of support calls they receive. This helped us better understand who our users were and the kinds of support they would need from their app. Our interviews with representatives also gave us insight into how customers viewed their energy company as a brand, which surfaced pain points and opportunity areas.

This led us to organizing a workshop for the client about brand, where we posed the questions: what is a brand, and who are you as a brand? With the key stakeholders in the room, we were able to co-create, discuss, and eventually align on how the app should look, feel and speak to customers.

Above left: shadowing and observations at a call center branch, where we listened into real customer calls before we conducted interviews with service representatives;
Above right: the team preparing workshop materials and mood boards for our branding workshop, where we educated our stakeholders on the value and meaning of brand for this app.
Below: high fidelity screens that were used for approval with the client and handed off to our development team.

If you're interested in seeing more, you can reach out to me for the full case study and other work samples.

San Francisco