AlphaSearch: Fidelity’s Access to Internal Information

Role

UX Designer, Information Architect, UX Researcher, Influencer, Collaborator, UI Designer, Web Developer, HTML & CSS Guru, Quality Control, Manager, Teacher

Background (Overview)

Fidelity had some legacy programs that needed a refresh. One of the old apps was crucial for Analysts, Portfolio Managers, Quant Researchers, and others to access internal notes and data published hourly. Easy access and retrieval were key for those Portfolio Managers to work their magic and keep Fidelity’s $5.4 trillion in assets ahead of the market.

Enter AlphaSearch, a high-profile project that is now the go-to tool for our investment professionals to find any internal research. It’s now an integral part of their decision-making process.

While Equity Portfolio Managers and Analysts were identified as the initial target users, a much more diverse set of users were later identified. This expanded list not only included PMs and Analysts from Fixed Income, High Income, and Quant, but also Equity Administrative Assistants totaling to over 500 users of the application.

When AlphaSearch was conceived to be the replacement to that aging program, there was a litany of requirements identified from the outset which included:

  • Search for companies, issuers, funds, analyst assignments, benchmarks and more.
  • Retrieve and view internal documentation such as Analyst notes in word & pdf formats
  • Create a collection of documents for later viewing or printing (Research Packs).
  • Create user defined watchlists of entities.
  • Filter document results list
  • Document keyword search
  • Identify and develop additonal features that will drive usage.
  • Reduce reliance on 3rd party applications (like Bloomberg) to reduce costs.

I was brought in at a point where some initial concepts and color schemes were created, but were far from complete. The design system was already selected (Semantic) and there was some apprehension with the previous UX professional and the Developers that I needed to contend with.

Actions on this project

  • Design Thinking
  • User Testing/Research
  • Visual Storytelling
  • Information Architecture/HCD
  • Competitive Analysis
  • User Interface Design
  • Prototyping Wire-frames/Mockups
  • Website Coding (HTML & CSS)
  • Journey Mapping
  • Presenting & Facilitation
  • Verbal & Visual Communication
  • Theme Development
  • Framework Research
  • Teaching\Coaching
  • Design System Creation
  • Jira Story Creation
  • Documentation
  • Analytics

Approach

My initial strategy was two fold:

  1. Learn as much as possible about the app, our users, and stakeholder needs
  2. Really listen to the grievances that the Developers had with my predecessor so that we could start off on a good foot

Getting to know the users and the app was pretty straight forward- basically by getting my hands dirty by digging in on product, playing with what was there, meeting our users, reading tons of confluence pages, talking with the Stakeholders, and keeping an eye out for what we are missing or what we can improve.

Resolving residual concerns about UX interactions with the developers took a little more finesse: that involved a lot of listening, asking questions about why they felt that way, and reassuring them that we have the same goal of making AlphaSearch the best product possible for everyone involved. Bringing developer feedback in earlier, being more flexible with designs where possible, and having the technical understanding of what the devs were working with was really helpful for gaining that common ground and making them feel included. At the same time, being clear about my objectives by saying “this is what I’m worried about from the user’s point of view” really helped get the devs on same page. All of this went a long way into smoothing things over and get everyone united.

As the AlphaSearch project progressed, there was several design system changes, a ton of usability changes, and new features identified through more extensive research and feedback. All of which was added to improve the functionality of the app.

This was a huge project lasting well over 5 years. Reach out to hear the rest including:

  • Balancing feedback from 10 different stakeholders across 5 different business units
  • Creating and conducting feedback sessions during Covid
  • Designing and managing the Figma library files through 3 different frameworks
  • All the opportunities to taken to guide and teach
  • AI integration

In the mean time, here are a few of the things that were involved in the creation and evolution of this monstrous project…


Aspects of AlphaSearch

Viewing Research

Early Drafts of Entity Lookup

Research & Feedback

The Evolution of AlphaSearch: A deep dive into Iterative Improvements and Responding to User feedback

The following is just a small example of how the AlphaSearch overview page has changed over the years based on usability sessions, direct user feed back and usage tracking.

Initial Design

Overview Page: The initial designs for the overview page were well received at first. However, as users began interacting with the app, we received feedback that some were confused by the five research sections (FMR, Broker, Company, SEC, and Agency). Others found it annoying to click through these sections to access the desired research. Users wanted the FMR info displayed front and center, without the need for progressive disclosure. We also decided that the tabs at the top were redundant for a web app within Chrome (the default browser), which already has built-in tabbed browsing.

Improving Readability: When I joined the project, I noticed readability issues with the app and strongly advocated for updates to the initial color scheme of AlphaSearch. Specifically, the light teal against the white background didn’t meet the AA accessibility guidelines for a minimum contrast ratio of 4.5:1.

1st Round of Updates: Lets Fix Some Stuff

Enhancing User Experience: To address the previous issues outlined above, we improved the readability, adding tabbed sections for the Latest Research card, and removing the unused tabs above the black bar. All these changes collectively enhanced the user experience.

Renaming the “Alerts” Card: We renamed the “Alerts” card to “Highlights” to reduce the sense of urgency and better reflect its purpose of surfacing actionable data. This also helped avoid confusion with potential in-app alerts we were considering.

Equity Announcements Card: A stakeholder approached us with a request to display Equity announcements front and center on the app home page. Despite concerns about limited space and potential negative feedback from users, we added an announcements card to the page to accommodate the stakeholder.

Responsive Design Level Up: Between this and the previous iteration, I successfully convinced key stakeholders the value of responsive design past the desktop only layout. We expanded to include mobile, and tablet views, with ultra-wide support added later. This effort was crucial as it turns out that a lot of the users would split-screen the app on their monitors to multitask, consume notes on their tablets, or attend company meetings and earnings calls with AlphaSearch in hand!

2nd Round: Popularity has it’s downsides.

Tabbed Layout for Latest Research Card: We initially switched to a tabbed layout for the latest research card to provide quick access to information. However, this change had some unintended side effects, especially with entries with numerous rating changes. Feedback revealed that many users missed additional info below the fold, overlooking other card summaries.

New Features Based on Pain Points: We addressed additional pain points by adding new features to the overview page, such as a current pricing card and a quick access option for assigned analysts’ RCP data.

Announcements Card Overhaul: The announcements card became overwhelming as various groups wanted to post everything there, making it the dominant card on the page. After receiving complaints from investment professionals, we convinced stakeholders to move it to the sidebar, freeing up space.

Company Info Bar Issue: The black bar containing company info at the top of the page became too cluttered and remained visible regardless of navigation within a search entity (like a fund or security). This took up valuable space on other pages without adding much value.

Whitespace Concerns: We also received feedback that there was too much whitespace on the page. Investment professionals wanted a denser layout, so we worked on making the page more compact and information-rich.

3rd Round: New Layout

Revamped Overview Page: We took a new approach with our overview page, introducing a card/widget-based layout that provides more information per page without anything being below the fold. We significantly reduced whitespace and ensured the cards display well on tablets and mobile devices, making development easier.

New Features Based on User and Stakeholder Feedback:

  • Tearsheet card (the graph)
  • Proxy votes card
  • Teams posts card
  • RCP card enhancements
  • Meetings card interaction enhancements
  • Various other small improvements

While the idea was to make these cards customizable (deletable, movable, resizable, and expandable to full screen), technical and workload limitations led to some inconsistencies in implementation.

The new page layout also yielded some interesting feedback with somewhat polarizing responses. The younger users tended to love it while the older users tended to dislike the layout. In general, the consensus was that the page was better than the previous version despite some of the comments of “it’s too cluttered”.

4th Round: Continuous Improvement

We received valuable feedback from our users about the analyst contact info and ratings sections, which led to some great improvements.

Analyst Contact Info: Previously, finding the right analyst for a security like Tesla was tricky because analysts from various business units (Equity, Fixed Income, High Income, Quant, ESG, etc.) were often overlooked. To fix this, we moved all analyst contact info out of the “Assigned Analysts” pop-over within the Company Info card and into a dedicated card. This change not only made it easier to find the right contact but also allowed us to add extra details, like when an analyst is transitioning into a new role. This update has made it much clearer and quicker for users to get in touch with the appropriate analyst.

Ratings Card: The old ratings card was a bit dull and didn’t effectively convey the analysts’ opinions. Now, with added background colors and emphasized primary ratings, PMs can quickly grasp how a company is performing at a glance. Users can also easily compare the current rating with how the analyst ranks the company in their research coverage portfolio (RCP), helping them gauge conviction or spot any discrepancies. These enhancements have been very well received by our users and stakeholders.

Moving Forward

UX is a continuous process and we are still not done improving the overview page. We still have a ways to go to incorporate the latest feedback.

Want to know more? Lets talk about it! Contact me to hear more!

UX, Y’all Conference Website

Role:

UX Designer, Information Architect, UI Designer, Web Designer/Dev

Background

The local UX community has a ton of respected talent that fly all over to give talks, yet there hasn’t really been anything for locals to access to such high caliber knowledge and insights. The Triangle UXPA decided to put on UX Y’all, a conference to tap into the local potential while providing residents access to phenomenal insights and experience.

Since this was our first time having a conference, Team UX Y’all faced a number of challenges, including building a website to handle all the obvious and unknown needs that a User Experience conference can bring.

It was clear from the beginning that the website needed to cover a lot of bases: promote the conference and presenters, attract sponsors and UX professionals. On top of that, it needed to provide necessary information such as travel info, schedule, social media contacts and a code of conduct.

How should all of that be captured and presented? How to make sure the conference conveyed the right blend of southern hospitality and professionalism?

Approach

Because of limited time and resources, we kicked things of by researching existing, successful conference websites to use as inspiration and apply the best features to our site. We then settled on a color scheme that fit the vibrant nature and welcoming atmosphere we were striving for.

I then applied Information Architecture principles to draft site map, which evolved over time. Since the site seemed pretty simple, we decided it would be too much effort to install a content management system like WordPress. Instead, I opted for flexing my Bootstrap 4 chops as the framework for speedy development time.

I utilized Figma to create low and high-fidelity mockups that were iterated upon and tweaked until approved by the team. You can see the entire project in Figma here. From there, the website got progressively enhanced, dictated by the changing needs and fluctuating time requirements.

Actions on this project

  • Competitive Analysis
  • Information Architecture/HCD
  • Prototyping Wire-frames/Mockups
  • User Testing/Research
  • User Interface Design
  • Website Coding
  • JavaScript Development


Presenter vs. Lecture Info

Challenge

We needed to display speaker bio and lecture info in a way that is logical and easy to navigate. We also wanted to minimize the number of pages to manage as well as duplicate content. Even more interesting was that some lectures had more than one presenter.

My first crack at the this was to list all of the lecture info followed by the speaker bio within a modal on the Presenters page as shone below. This also allowed for co-presenters and links to other speakers in a tidy format.

At the time, this approach worked well since there was a push to have that information live on the site to generate interest in the conference. yet the schedule hadn’t been created yet.

Later on when the Schedule page started taking shape, I had just pointed all of the talk and presenter links on over to the presenter’s modal. This presented another problem: it made it look like the Schedule Page had navigated someplace unexpected when the modal was closed. Bad for user experience, bad impression for Team UX Y’all.

Solution: Split the Info

After the inconsistent usage pattern was discovered, I tackled the issue be splitting up the modal’s information: presenter bios on the Presenter page and the talk descriptions on the Schedule page. I included links on to the new lecture modals from the presenter modals and vis versa. I then made sure the two sets of modal’s looked distinctly different. This was needed to minimize confusion and to notify users that they have navigated to another page/modal.


Home Page Development

Challenge

Create a home page that sets the tone for the rest of the site while enticing UX professionals to attend, sponsors to join, generate buzz, and open the lines of communication.

Solution: Iterate!

I captured 6 different iterations of the UX Y’all’s home screen before we achieved the final design of the site.

  1. Initial design: color scheme good and layout ok, but application of colors not so good.
  2. Version 2: layout great, but testing color application and logo versions
  3. Version 3: Layout, colors and logo selection settled! Testing different font pairings.
  4. Version 4: Fonts, Layout, Colors and responsive sizes adjustments settled!
  5. Version 5: Initial testing of sponsor logo visual hierarchy.
  6. Final design: updated logo hierarchy.

Even though I used the final layout for the creation of the home page, the different sizes and shapes of the sponsor logos still needed quite a bit of tweaking and finagling to get everything just right.

  • Developed an attractive, high-profile home page to attract/entice attendees and sponsors with appropriate call to action and prominent logo placement.
  • Devised a visual hierarchy to account for different sponsorship levels while respectfully balancing sponsor logo size and fit vs. clutter.

Project Results

  • Launched a deceptively simple and usable, mobile-friendly website through consistent and timely updates.
  • Successfully met or exceeded the website needs of the attendees, sponsors, presenters and organizers of Team UX, Y’all.
  • Achieved an accessibility rich user experience (WCAG 2.1) complete with generously portioned touch targets, larger font sizes with high contrast, and ARIA compliance.
  • Conference sold out 1 month early and had a wait list of nearly 40 people.
  • Sponsor enrollment surpassed expectations and exceeded funding requirements.

Sparrow – Effortless Giving App

Roles:

UX Designer, UX Researcher, UI Designer, Information Architect

Background

Sparrow, a local startup, needed help sorting out how to fix their prototype app that was receiving a 97% drop-off rate during the onboarding process. Mechanical Turk results showed users were failing to enter their bank account information and abandoning the app before they even got to the home screen.

They approached me to work out some of the kinks and improve the retention rate.

Approach

Diving into a heuristic review of the app revealed that there were a number of usability problems from the outset:

  • Unclear user mental model on how the app would work
  • no transparency on what personal information was needed or how it is used.
  • asking for unnecessary and too much information too early on.
  • uncommon and ambiguous usage patterns for app functionality

All of these issues resulted in an air of distrust of the app.

I started off by interviewing the stakeholders to gain a consensus and a clear understanding of their objectives for the app. I then started collecting and organizing the abundant yet disorganized information they had of their target users and compiling some personas for future reference.

I then addressed the most important issues with the functionality of the app. I started prototyping some wireframes followed up with usability testing by applying guerrilla tactics at coffee shops and cafes, targeted loosely around our target demographic.

Early Task Flows and Wireframe Iterations

We then iterated the designs based on the results. Testing revealed IA problems, which guided us to rethink key points in the onboarding process.

Onboarding Redesign of Rules Function

We continued on the cycle to achieve solid positive testing results and a much more compelling customer journey.

Actions on this project

  • UX Heuristic Review of prototype app
  • Persona Development
  • Stakeholder Interviews
  • Information Architecture/HCD
  • Task Flow Creation
  • Competitive Analysis
  • User Interface Layout & Design
  • User Research (Guerrilla User Testing, Card Sort)

Guerrilla Usability Testing

Challenge

Conduct usability testing on wireframes and task flows with limited resources and funding.

Solution: Apply the Kindness of Strangers!

I needed to run a series of usability tests (including the one above) to gain feedback on our designs and to make sure that I was heading in the right direction. I very easy and inexpensive way to achieve that was to apply the powerful technique of Guerrilla usability testing.

Guerrilla Usability Test

 

(Check out a sample of the testing session here)

I prepared by exporting an interactive mockup from Invision App to my Android home screen using Chrome. This worked great for viewing/using the mockup without having all of Chrome’s window chrome getting in the way of the test. Then I would print up a copy of the script that I wanted to test from and make sure that I had the screen recording app installed. I would also jump into my phone’s developer options and turn on the “show touches” that displays a little circle where the screen is touched.

Now that I am all set and ready to test, I would head on over to the local coffee shop, supermarket or farmer’s market, wherever my target users might reside. Then it’s just a matter of asking for people’s help and opinions. It’s great, because people in general are super helpful when it comes to this type of interaction and if they don’t have to time, they tell you pretty quick so no one’s time is wasted.

In my experience, testing results are very helpful and have really proved to be a terrific means to great insights.

Project Results

  • Set user expectations early to enhance trust building.
  • Strengthened the user’s understanding of the app’s purpose and features.
  • Increased app retention rate through an improved onboarding experience.
  • Clarified the ambiguous functionality of the app based on user interactions and feedback.
  • Informed the design of the MVP currently under development.

 

 

 

 

PDF Out Loud Mockup

App Description

Listen to your favorite books, magazines, articles, and documents all while preserving the impact and beauty of the printed page no matter where you are or what you’re activity. PDF Out Loud is the only PDF reader that specializes in converting the printed text found in PDF’s into spoken words without sacrificing features or forcing you to navigate ugly, cumbersome, and unintuitive interfaces. It has been specifically designed to be naturally easy to use and fully engaging on mobile devices of all sizes while still enjoying a comprehensive set of features. PDF Out Loud gives you the best of both worlds, leaving you with an aural, visual and interactive experience that is sure to be stunning.

  • Type of app: Productivity tool, PDF Viewer and Text to Speech translator
  • Opportunity: For business – Monetizable
  • Need: Provides PDF Viewing, TTS and extensive UX in one complete package.
  • Target market:

Primary Target: individuals, business professionals, travelers who multitask or are active. Those who benefit from books on audio (driving, working out, etc), Low technological expertise needed.

Secondary Target: Students, illiterate, ESL, visual impairments, attention disorders

Vision Statement

PDF Out Loud is dedicated to providing the best aural, visual, and interactive experience for a document anywhere in the world and in any situation. Weather the user’s focus is business, pleasure or to simply better their lives through learning, a cornerstone of success will be the enabling of the individual’s connection to electronic “printed” material regardless of physical activities, background, abilities, or language barriers.