Android App Redesign
- Client:
Chase
- Created:
2014
- Service:
UX Lead
The Challenge
Executive leadership requested our team rethink and redesign a tablet app used by bankers to monitor ATM machine functions. We didn’t want to reinvent the entire app, but did know that we needed to address some key usability issues and raise it up to the design standards set by the Chase.com team.
My Role
I set up and led the discovery and design phases of a redesign for an existing banker app running on an Android tablet. I was also in charge of all UX and UI assets and deliverables as well as the overall transition of the experience to the new mobile design system. I also led and mentored two junior designers during each phase of the project.
Current Experience
The app was created to provide bankers and tellers with insights into the overall condition and use of ATMs by customers, inside and outside of the Branch. It was used to display information and messages to the banker during certain situations with the ATM’s physical drawers, bins, and screens as well as cash and paper levels inside the devices.
The banker and teller could also see the customer’s transaction type; including, withdrawing or depositing cash or checks and checking their balance. These insights helped the banker make decisions for and with the customer when things were not going as planned.
The current design had just been deployed to a handful of Branches and the overall feedback was neutral to negative. We were getting a lot of feedback about the lack of visibility of customer information during the search process as well as learning of some pretty big usability issues.
Understanding the User/Personas
I had previously worked with bankers and tellers as a part the discovery and design phase of other projects and was familiar with how they used several of their desktop applications, but hadn’t dealt with or experienced use cases or scenarios needed in their mobile interactions with customers. We decided to discuss the feedback with 10 bankers and tellers in the field by observing real-life situations unfold in a branch.
Research
We conducted interviews with product owners, branch management, and senior leaders. We also pulled together the project team to understand and learn quickly about user stories and scenarios. We needed to understand the feedback and insights from the field while applying a design approach that fostered team engagement and design collaboration among cross-functional team members.
Insights
We knew there were usability issues that needed to be addressed and the feedback indicated that users were struggling to complete certain functions in the app.
While there were multiple usability issues to work out, the most obvious, and most critically in need of being fixed was the Check Review function. Check Review was created to help the Bank identify possible check fraud and provides them with a way to stop the deposit of checks during the deposit transaction.
Bankers needed to be able to review the checks and make a decision on whether the check should be accepted or returned to the customer. The flow was missing a few key pieces of information and the overall interaction pattern made it very difficult for Bankers to complete the flow.
Design Goal
The product team wanted to fix the existing usability issues and enhance the experience visually by adopting the look and feel of the new Chase.com mobile design system. We also knew we needed to provide more relevant information at certain points in the customer search experience.
We knew that in many situations our customers would see the tablet app while interacting with bankers and tellers. We wanted to make sure we updated the UI to match Chase.com and mobile app. This would provide consistency for the customer and show a cohesive experience for both the customer and banker, creating a single Chase experience that extends to our bankers and tellers.
The team in San Francisco shared their new design system and we were eager to apply it to our products. However, our first priority was to fix the existing usability issues and enhance the features with findings from the field.
To make sure we understood the feedback we decided to see our usability issues first-hand, in the real-world. We decided to observe the interactions between our bankers and customers on location. We traveled to a few markets in the Columbus and surrounding area and witnessed their frustrations first hand.
User Journey
We typically saw the same issues repeated and the patterns we observed matched the feedback and findings. There are several aspects of the overall customer interaction that we wanted to watch in addition to the pain points in the experience or overall usability of a screen.
Ideation and Iteration
We decided to pull together the project team for a series of discovery sessions. We wanted to get my team up to speed, exploring use cases and scenarios, all while documenting the conversation.
My plan was to get people talking. I needed to evaluate the prior project conversation. Understanding the existing conversation would help us understand where the team struggled the first time and may be a good indication of usability issues.
The flows are basically printed screenshots taped to a whiteboard or wall. The project team can leave notes, clarify use cases or steps, or even vote on several aspects of the design.
After evaluating the existing design and learning about the flows we started creating wireframes. We continued to hold discovery sessions and strategically started to evaluate the new wireframes as a part of the conversation.
Sketches and Wireframes
During the creation of the wireframes we balanced our time against changing the UX and learning how to apply the new design system created by our partners in San Francisco. We used static screens to get initial feedback regarding the new updates to page interactions, flows, as well as the new look and feel and UI updates.
Final Hi-Fi prototype
Our front end developer built out some of the key areas of the design in a web app that we could use to test the updated designs. This gave us a pretty good representation of the final state of the app. We could now get the experience in front of the project team, senior stakeholders, as well as our end users.
