Overview
In this case study, I demonstrate my expertise in UX design, including conducting user research, designing intuitive workflows and interfaces, and collaborating closely with the development team to ensure seamless integration between design and technology.
Background
The Ally Stock Screener is a powerful stock screening tool that empowers investors to make informed decisions. I was tasked with redesigning the Research page, the complete Stock Screener and flow, Filter Selections, Search and Stock Quote pages. Additionally, I redesigned the well-known Ally ETF screener to complement the navigation layout for the Stock screener.
Key Players
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
The main challenge was to improve equity tools and research for Invest customers, reduce client attrition, improve third-party ratings, and provide customers with tools that help them find stocks to invest in (Idea generation). Prior to this feature's creation, research was limited, especially on mobile, and there was limited connectivity between TipRanks and Ally's research tools.
Sketch
Invision (Metranome DSM, Craft, Spaces, Prototype, Freehand)
Miro
Process
We began with a project kickoff to define the biggest priority of our stakeholders and users. We looked at TipRanks and other competing brands for insight, such as Yahoo Finance, Finviz, Marketwatch, Ameritrade, Fidelity, and Apple.
Features that stood out were filters, price entry options, results, and navigation (vertical vs. horizontal scrolling for results). Assumption Mapping and Stakeholder interviews guided our initial ideas.
Requirements
· Integrate the "Analyst top Stocks" — Oneof TipRanks Idea Generating tools
· Create/Integrate a Stock Screener that incorporates TipRanks data from Smart Score API
· On or both tools may live on "Research" page within mobile and desktop
· Tools should be a gateway to trade execution
· Fully responsive designs to cover mobile(including App), tablet, desktop
· All tools will be API driven and require service integrations and frontend UI
· Tools should contain help content in the forms or popups or tooltips
· Empty states, loading states, error states
· Click and load analytics
User Research
We conducted card sorting via Miro to categorize our filter options and categories.
AB testing was done to explore the option of a Horizontal scroll style for Stock Screen results. We looked at competing brands for reference and found that developers had time constraints and limited skillsets to create this feature.
It is important to note that this feature was not successful and was further explored for a future full Ally App redesign. The redesign was handled by a separate ‘Invest Simply’ UX team but referenced our exploration deliverables.
Referencing Ally's ETF Screener was a must, Katie and my research uncovered how the user would access both screeners in the most accessible means possible from both the research page and Screener pages. Elements like Segmented buttons, search results, and TipRanks data were generated and implemented as useful features to include.
See more about ETF Screener here
Development
Sketching and Planning
Sketches were completed in Invision Freehand. Several approaches to the Stock Screener Entry point and navigation were drafted, presented in Scrum meetings, Office hours, and Critiques
A component that caused a big discussion and update of the DSM was Dot Navigation. We intended to use this for the card selection feature, but ultimately we did not need it due to the context provided through the layout of the cards.
We did not use this element for the Stock Screener nor did we have any design guidelines surrounding this. Through exploring the Dot Navigation we were able to update our DSM and provide useful tools for future projects at Ally and strong guidelines surrounding it's use.
Sketching also led to defined design guidelines in Ally surrounding card selection, before the Stock Screener existed. Cards were designed and used as needed and did not have parity between other experiences. You can now see the same approach for cards being used else where in the Ally App.
I do not have access to any of the sketch deliverables due to company policy please contact my references at Ally to verify.
Feedback
Featured Screens' Card Navigation
May benefit from navigation markers
-Cliff, UX Research
Ultimately, the Mobile UX team believed the layout provided context to the user. From an Accessibility standpoint a prompt could also be added to the section to provide insight to disabled users.
A clear means of deselecting the Featured Screens and filtering results were also recommended by Research.
This benefited from a Clear Filters button above the filter selection list along with providing more context on the result and filter screens, this helped the user move quickly between Screener results.
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.
The final designs went through usability testing and department-wide design critique sessions. The app was successful in execution, getting minimal feedback from the UX team, mobile UX team, and shareholders in our open forum meeting.
Usability Testing
User testing on my prototype was moderated by Cliff Anderson. Cliff, worked with Web Designer Katie Wright, Manager Colin Joliat and I (Jeffery Wiafe) to create the scenario's the users would encounter and tasks the users would need to complete.
Qualitatively testing was conducted to get feedback from real users on the mobile version before going live. My team aimed to understand how accessible our UI was, findability and how comprehensible our filter options and results were, along with the usefulness of our product.
On the quantity end, we wanted to compare the amount of users who felt familiar with our jargon, could successfully use our contextual help features, and how many users could successfully search for a stock and navigate through our categories. We also wanted to see how many users felt comfortable with the Stock Quote page in it's preview state and full page state.
Usability Testing Results
Users— 9 in total
4 Prospects
2 customers
Experience
With Stock Screeners
Familiar & use — 3
Don't use but intersted — 3
Not familiar with — None
General knowledge of Trading Stocks
Savvy — 3
Results
Tasks
Fintch screen, then large cap/ delete large cap from results
2 had no issues, 3 had partial completes, 2 failed
Environment filter, then sort on market cap
5 had partial completes, 1 failed
2 took extra time
2 didn't understand the difference between filtering & sorting initially
Find specific stock
4 got it, 2 failed (never saw the link)
Save filters
3 liked it, 2 were mixed
Buy
All users who tried this were successful (by clicking on the stock itself)
Discussion — Good job
Overall Feelings
3 had positive comments
"This looks like a cool tool.
"For me, this makes a lot of sense — like, what you want to have."
"I like that they have a screener for stocks and ETFs."
2 were more mixed
"I don't know that I'm knowledgeable enough to create very many screeners myself, buy just looking at the screeners was an educational experience for me."
Discussion — Not bad so far
Screens — General
2 wanted the data in More Filters & Results to match up
"What could be a really cool feature is you tap on that grey text last price, and they change, and you can change it to these various indicators that you had under More Filters."
"There are things on this list [More Filters] that I didn't see before [on Sort]. If I am sorting by market cap, and market cap should be market cap , then this column header should be market cap, and market cap should be displayed here instead of, for example, the last price or the day of the change. So, I think that this Last Price / Day Change column header should be dependent upon what you're sorting by."
4 did not get where Featured Screens were coming from
"My assumption is that Featured Screens are certain sectors, I guess, that analysts have put together. So whatever company this is, the analysts that you have on staff or that you're contracting out, there are just ones that are pulled together like some of the top of each sector and my assumption is that it just comes from what ever the company is doing in terms of focusing."
Discussion — A little worrisome, but discoverable. Also, not a problem with desktop. Finally understanding may not necessarily have anything with actual usage. Having more than 4 featured screens might help a lot.
2 liked the filters
" think that's perfect because it gives you just enough information. So, I think it's good and makes sense."
"I think this is pretty bread reaching,"
"For me, this is perfect. I really like it"
Discussion — Good job
3 had mixed comments about the results
"Yeah, that's fine. That's a good snapshot, an overview. Yeah, I think that makes sense."
"I think there's nothing wrong with the way it's shown. That's kind of expected."
"This is all very standard stuff"
Discussion — Let's keep an eye on this
Customization & Personalization
3 wanted to customize it
"I assume we cannot customize those [feature screens]."
"That's the ability that I would like to have — to interact with this and customize what I'm seeing here."
"It'd be nice to be able to customize that [Last Price/Day Change]."
3 wanted it personalized
"It would be nice to see if, perhaps there was some sort of questionnaire that could inform what type of things I like to invest in."
"[Where filters come from] might honestly have to do with the preferences I put in at Ally [sic]."
Discussion — both good adds — if not now, then later criteria
4 wanted/liked sector; 3 each wanted price, market cap & dividend yield
"Sector is good"
"I will oftentimes look at market cap."
Discussion — Good job
Delivery
The final designs went through usability testing and design department-wide critique sessions. This app was successful in execution with minimal feedback from the UX team, mobile UX team, and Shareholders in our Open forum meeting. With my contributions and expertise, we were able to create a powerful investment tool that meets the needs of our stakeholders and users.
Results, Impact and Reviews
Review from Investopedia
https://www.investopedia.com/ally-invest-review-4587885
"Stock Screener Ally Invest has a stock screener available on the primary website, but not on Ally Invest Live or the mobile app. The screener works well and provides many criteria users might want, including fundamentals, sectors, exchanges, price performance, and valuation. There is also fundamental information such as accounting ratios, earnings per share (EPS), dividends, and consensus analyst ratings from FactSet. The stock screener also has technical information that includes some specific patterns. There are convenient buy and sell links next to each result on a screen. A nice feature of the screener is how it shows matches across each of the criteria selected, not just a final number of matches for the entire search. This allows you to see where adjustments might show more or less information for a successful search. User-defined screens can be saved for later use and the data exported, but results from screeners can’t be turned into a watch list. There are also six predefined stock screens available: stable dividend, small-cap value, mid to mega-cap value, small-cap growth, mid to mega-cap growth, and top growth tech stocks."
Review from Stockbrokers
https://www.stockbrokers.com/review/ally-invest
"Easy to use and convenient, Ally Invest is fine for casual investors who are already Ally customers. Like many of Ally’s services, Invest caters to those beginning to accumulate savings and wealth. Its margin rates and commissions are low, but one-time fees (such as those for outgoing transfers or closing retirement accounts, are higher than many competitors. My testing found that Invest is missing many features that I rely on when I trade, such as streaming quotes, adjusting trades on charts, and ladder trading."
For Stockbrokers they found the design restrictive but good enough for casual investors, which was our original targetted audience.
Overall, my contributions to this project resulted in the successful creation of an essential investment resource that offers Ally customers a comprehensive tool for researching stocks and making informed investment decisions.
