Overview
Ally's goal was to deliver the best user-focused experience to reinforce their position as a trusted ally to their customers. To achieve this, my team was assigned the task of designing personal responses and error scenarios that would effectively engage users with positive and helpful content.
Background
I was tasked to enhance the user-focused experience of Ally's mobile app. The primary objective was to demonstrate Ally's dedication to being a trusted ally to its customers. To achieve this, my team and I were tasked with designing personalized responses and error scenarios that would capture users' attention with positive and helpful content.
Key Players
UX Team
Manager
Mobile UX Designer
CX
Collin Jolliat
Jeffery Wiafe (me)
Vanessa Homsy
Problem
Gamifying the Ally Experience and Enhancing Password Security for Privacy-Conscious Users.
The objective of this redesign was to compliment the personalized Ally experience in development. This was achieved by developing a personalized approach which encourages secure login practices and aligns with a new security policies for security and privacy-conscious customers.
Additionally, our task was to identify potential error scenarios for biometric, pin, passwords and usernames login issues. while designing password confirmation modals that tie into the upcoming achievements.
Sketch
Invision (Metronome DSM, Craft, Spaces, Prototype, Freehand)
Zoom
Process
To begin the process, I conducted a comprehensive review of Ally's existing style for users. It became apparent that the current design was outdated and no longer aligned with Ally's evolving brand and design direction. Therefore, a key focus of the project was to update the design to match the new style that Ally was adopting.
Furthermore, the design standards outlined in our Design System Manager (DSM) emphasized the need to merge the previously separate login paths for Auto and Credit. By consolidating these paths, we aimed to create a unified login experience that would be intuitive and familiar to all users, regardless of their specific needs.
The implementation phase involved translating the updated design standards into a refreshed login screen. This encompassed revamping the background design to align with Ally's new visual style, incorporating consistent branding elements, and ensuring a seamless transition for users navigating between Auto and Credit login paths.
By leveraging user-centered design principles, we focused on improving the clarity, accessibility, and overall user experience of the login screen. The goal was to create a visually appealing and intuitive interface that would provide a positive first impression and encourage users to engage with Ally's services.
Merging Auto and Credit Requirements
1. Swapping out the purple gradient background to match new dark purple gradient
2. Update header styling where applicable. White headers/black text/X to close
3. Swap out purple page titles for black
4. Update link blue to new purple color for buttons/links/Icons
5. Update button shapes
6. Update table styling-taller tables, remove dividers (when appropriate), bold table headers
7. Update dollar values to use SF Pro rounded(iOS)/Nunito (Android)
8. Bring in new picker pattern with native dropdowns
9. Investigate collapsible tables where applicable.
The Ally mobile app login screen for Android devices
It was crucial to address the lack of Face ID support for Android users. Since Face ID is specific to iOS devices, it needed to be removed from the happy path to provide a consistent user experience across both Android and iOS platforms.
The implementation phase involved redesigning the error handling experience to align with modern design principles and best practices. This included crafting clear and concise error messages, utilizing appropriate visual cues, and ensuring consistency in error presentation throughout the app.
To address the lack of Face ID support for Android, the flow was modified to remove the Face ID option from the happy path specifically for Android users. By doing so, we provided a consistent and tailored experience for Android users while preserving the Face ID feature for iOS users.
Research and accessibility
We did not conduct User Research activities such as testing or for this project since we were just updating the style of the log in page, the same A11y accessibility features also still applied since we were just changing the look and style there were no changes in placement of content or graphics.
Happy Path
%201.png)
When a user opens the Ally Mobile App they are greeted with a personalized message, along with their login method of choice.
%201.png)
An example of the Face ID login screen.
Below the CTA the alternative option for login can be selected.
An example of entering passcodes on the Android device.
If the user has not set up passcode, they are given the option to log in with the basic username and password.
An example of the basic login screen.
Prototyping
Prototyping was done via Invision
Error Handling
We also addressed error handling through scrum meetings with developers and shareholder requests to make sure we addressed current issues that affect the ETF screener, which could bleed over into the Stock Screener.
