Overview
This case study presents an in-depth examination of the iterative design process employed in the development of the Ally ETF Screener. The primary focus of this study revolves around usability testing, wireframing, and interface design, highlighting our commitment to simplicity, accessibility, and visual clarity. Our ultimate goal was to create an intuitive and captivating user interface that facilitates efficient research, comparison, and analysis of ETFs.
Background
The Ally ETF Screener represents a prominent feature within the Ally mobile app, renowned for its ability to empower investors in making well-informed decisions. I was entrusted with the task of redesigning the ETF Screener, harmonizing its functionality with the new Stock Screener and ensuring seamless navigation between these two research tools. While the filter selections remained unchanged, we adapted the Search and Stock Quote pages to complement the stock screener, maintaining consistency throughout the application.
UX Team
Jason Gingras
Sarah Frears
UX Team
Manager
Senior UX Designer
Mobile UX Designer
Web UX Designer
CX
Collin Jolliat
Tim Stopar
Jeffery Wiafe (me)
Katie Wright
Cliff Anderson
Francis Andoloro
Shivram Vivek
Problem
Enhancing Navigation and Visual Consistency of the Ally ETF Screener.
Our team was tasked with the crucial objective of updating the user interface (UI) of the Ally ETF Screener to address two key challenges. Firstly, we needed to streamline the navigation experience, enabling users to effortlessly switch between the stock screener and ETF Screener. Secondly, we aimed to achieve visual consistency by aligning the ETF Screener's style with the updated design direction and overall aesthetic of the Stock Screener, reflecting the evolving brand identity of Ally.
These challenges presented significant obstacles for users seeking to utilize both research tools effectively. The existing UI lacked a seamless transition between the stock screener and ETF Screener, leading to user frustration and a disjointed experience. Furthermore, the mismatched visual styles between the two screens created confusion and hindered users' ability to navigate the application effortlessly.
To address these issues, our design solution aimed to create a cohesive and intuitive user experience by implementing enhanced navigation capabilities while ensuring visual consistency across both screens. By achieving these objectives, we sought to optimize the usability and overall satisfaction of users utilizing the Ally ETF Screener, aligning it with Ally's broader design direction and elevating the application's usability to new heights.
Tools used
Sketch
Invision (Metranome DSM, Craft, Spaces, Prototype, Freehand)
Miro
Process
User Research
No User research was done on the ETF Screener, this feature was created with the Stock Screener and tested together.
User Flow
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.
I included some screens illustrating a happy path for the ETF screener due to the redesign nature of the project and minimal steps we took in the itterative process.
When a user logs into the Ally Mobile App they are first brought to the Snapshot.
To access your Invest account you tap on your account and are brought to the Overview page for Invest.
Via bottom Nav, the user taps research to access the research page. The CTA for Stock and ETF are found here.
Upon tapping the CTA, the user is brought to the Screener experience.
The user has the choice to stay in the Stock Screener or access the ETF Screener, by tapping the segmented control tabs at the top of the screen.
To filter your ETF results you can select a pre set filter from the card navigation.
The user could fine tune the results further in the "More Filters" section. By turning on Pays dividends or accessing the other filter options.
This is an example of what the child page for these filters look like. I chose to include definitions of each filter at the footer of the filter options to guide and educate users on each filter respectively.
Once the filter selection is made, the user returns to the ETF Screener to continue their search.
Results feature the pre filter the user selected above with a caption. The option to sort results are below the filter sections as results are listed below.
The option to sort opens up a child page where the user has several options on how they would like to see the information listed (A-Z, dividend yield, etc.)
Each ETF offers a trade ticket and more details about each ETF to educate the user on it's performence
Here is an example of the search screen, the results are similar to the filter results.
Delivery
The final designs underwent rigorous usability testing and underwent thorough critique sessions within the design department.
The application's execution proved highly successful, garnering minimal feedback from the UX team, mobile UX team, and shareholders during our Open Forum meeting. Through my valuable contributions and expertise, we achieved the creation of a robust investment tool that effectively addresses the needs and expectations of our stakeholders and users.
Results, Impact and Reviews
Review from Benzinga
https://www.benzinga.com/money/ally-invest-review
"Impressive ETF screening tools that make it easy to find your next fund"
"Comprehensive ETF screening tools. Ally’s easy-to-use ETF screener allows you to narrow down your options based on the characteristics you’re looking for in an investment. Filter by stock symbol, sector, price, Morningstar ratio and more to instantly find your next investment."
"Wide selection of ETF screeners: ETF screening tools can help you locate funds to add to your portfolio and explore the market in a more manageable way. Ally Invest offers a wide selection of ETF screening tools — search for funds by price, volatility, fund family, major investment category, Morningstar ratings and much more. You can use the ETF screening tool on both mobile and desktop interfaces."
