How can we empower people to make informed investment decisions?
September 2022 - Ongoing
Overview
Investing Angles is an educational blog dedicated to assisting investors at all levels in making informed investment decisions through comprehensive analyses and visual charts.
For this project, it was me, a developer, and our client. I was responsible for the end-to-end design process, including UX research, concept development, prototyping, visual design and usability testing.
For this project, it was me, a developer, and our client. I was responsible for the end-to-end design process, including UX research, concept development, prototyping, visual design and usability testing.
The problem
In just a year since the start of the blog in 2020, it gained a lot of popularity, and saw a significant increase in subscribers. But as it grew, with more content, topics, and authors jumping on board, things got a bit chaotic. The blog turned into a maze, and readers were having a tough time finding what they needed.
Some users told us it was especially tricky on their mobile devices. Our readers just wanted to hop onto the site, find the specific topic they were interested in, and read the analyses with no fuss. After all, they come to us to make informed investment decisions, not to get lost navigating our website.
Some users told us it was especially tricky on their mobile devices. Our readers just wanted to hop onto the site, find the specific topic they were interested in, and read the analyses with no fuss. After all, they come to us to make informed investment decisions, not to get lost navigating our website.
The challenge
Our goal was to create a seamless experience for users to access and subscribe to the content that mattered most to them, all to help them make well-informed investment choices with ease.
Main objectives were to:
1. Make it fast and easy to navigate.
2. Ensure effortless readability on both mobile and desktop screens.
3. Provide users the ability to customize their subscription options.
Main objectives were to:
1. Make it fast and easy to navigate.
2. Ensure effortless readability on both mobile and desktop screens.
3. Provide users the ability to customize their subscription options.
Results
4x
Increase in Conversions
3x
Increase in Rate of Returning Users
68%
Decrease in Support Emails
40%
Surge in Net Promoter Score
So, how did we do it?
Understanding the project
I worked closely with our client to fully understand their goals, and with our users to understand their needs. I delved into the website's statistics to get a clear picture of its performance, and I dug deep into the website, studying how users moved through it on different devices.
Here is one of the components we examined:
1
The section header resembles a title of an article, adding to a lack of visual hierarchy.
2
The actual title of an article is hard to read, as it's made up of non-clickable tags and categories that serve no practical purpose.
3
The text description of the article is challenging to read or scan because of lengthy links to other posts and unnecessary tags. It's not a summary either, making it difficult for readers to grasp the post's content.
4
For the most recent articles, the date isn't as useful. Given the fast-paced nature of stock market developments, displaying the time posted is more relevant.
Re-organizing all these categories and tags for user-friendly navigation was a priority. I began by exploring how other players in the industry were structuring their content and navigation.
After examining our direct competitors, it was clear that their websites were somewhat basic and lacked inspiration. So, I decided to take a different route and looked at the big shots in the news and blogging world, like The New York Times and Medium. Their solutions to similar navigation and organization challenges served as an inspiration.
After examining our direct competitors, it was clear that their websites were somewhat basic and lacked inspiration. So, I decided to take a different route and looked at the big shots in the news and blogging world, like The New York Times and Medium. Their solutions to similar navigation and organization challenges served as an inspiration.
Understanding the users
We also needed to know what was bugging our users, what they were looking for, and where the site was falling short. Then there was the matter of subscriptions – what did our users truly prefer, and how could we align that with our business goals?
To connect with the users and understand their frustrations and preferences, I started with user surveys. Once we had those insights in hand, I crafted a quick user journey map, shedding light on the areas in need of attention. It was all about pinpointing where we could make things better for our audience.
To connect with the users and understand their frustrations and preferences, I started with user surveys. Once we had those insights in hand, I crafted a quick user journey map, shedding light on the areas in need of attention. It was all about pinpointing where we could make things better for our audience.
We used these findings to form the following insights:
😱
The first thing subscribers look for to start reading is a login button. But, the login button isn't visible, causing users to search or remember its hidden location.
🔍
Many users struggle to find the search bar because its placement doesn't adhere to common design patterns (it was at the bottom of the home page!).
😫
Users often go through several steps to find the latest article on a specific topic, causing frustration and wasted time.
📱
To the contrary of what we thought, the majority of users access the blog using mobile devices. Since mobile usability was never prioritized, users are clearly frustrated with the readability and accessibility issues on smaller screens.
Organizing content
I started by collecting all the categories to see how they connected and how we could group them by meaning.
We needed a structure that made sense and didn't leave our readers scratching their heads. Clarity was key.
We needed a structure that made sense and didn't leave our readers scratching their heads. Clarity was key.
Each article was focused on a specific topic known as an "instrument." Since there were a lot of these instruments, it didn't make sense to clutter up the main menu with all of them. So, we grouped them into themes, which we called "rooms."
Utilizing research insights and our plan for restructuring categories and tags, I mapped out the website's basic information architecture.
Utilizing research insights and our plan for restructuring categories and tags, I mapped out the website's basic information architecture.
Exploring solutions
I sketched out multiple main screens using proposed site map, to bring our ideas to life visually. My top priority here was making sure that the elements users accessed the most —like subscribe, log in, and the rooms— were just a fingertip away, no matter what device they were using.
Here are a few iterations we've explored along the way:
Original
Version 1
Readable time for articles within the last 24 hours.
Relevant image or graph not only enhances visual appeal but also facilitates quicker comprehension of article content.
Clean title and enhanced readability by relocating tags and categories to the bottom.
The card doesn't accommodate multiple categories well and fails to convey a clear hierarchy among them.
Version 2
Improved category organization: the parent category stands out at the top in our brand colour, and the child category listed as a tag at the bottom, giving users easy access to both.
Easy to understand the type of article (alert, trade signal, study) by clearly differentiating it from both tags and categories.
The grid system gets thrown off and creates a cluttered appearance when multiple cards with varying title lengths and fixed image sizes are placed in rows.
Final
The grid layout is visually consistent by swapping the positions of the image and content. Now, regardless of how long the title is, it won't disrupt the image placement.
The time/date is now displayed first for users to scan it quickly, while the author name has been moved to the article page for a cleaner card design. This allows more space for additional tag placement.
Including the number of likes on the card encourages increased user engagement and piques interest.
Designing a flexible subscription page
Meeting the demand for customers to select, customize, and combine multiple subscription options was a crucial business move. Our journey towards this goal was an evolving process that unfolded step by step through multiple surveys, research and design iterations.
Version 1
Initially, we decided to break down the subscription into three major packages. To determine which content belonged where, we relied on insights from user and market research.
This marked our first significant stride in offering users more choices.
This marked our first significant stride in offering users more choices.
Version 2
As we gained a deeper understanding of our customers' preferences, we recognized the demand for add-ons. These add-ons gave customers the freedom to handpick additional subscriptions and integrate them into their main package. While it wasn't the most straightforward solution, it certainly opened the door to more customization.
Final
Lastly, we rolled out bundled packages that includes every available add-on, sparing users from the need to select each one individually.
Additionally, we separated the add-ons into their own packages for those who don't need access to the full package, as we saw demand for individual instruments rising.
Additionally, we separated the add-ons into their own packages for those who don't need access to the full package, as we saw demand for individual instruments rising.
Testing our prototypes
After multiple rounds of fine-tuning, we crafted a detailed prototype that was primed for usability testing. Our aim was to confirm that the design was not only visually appealing but also functional.
We opted for hallway usability testing, involving 5 participants in the process. During these sessions, we did encounter a couple of minor issues, which I addressed before passing final designs on to our developer.
We opted for hallway usability testing, involving 5 participants in the process. During these sessions, we did encounter a couple of minor issues, which I addressed before passing final designs on to our developer.
Final Solution?
Fast and easy to navigate
The original website was difficult to navigate, with an unclear search and login process (no visible link/button), and no discernible way to locate desired content due to a lack of defined categories.
The new website improved experience by making it easier for users to find the log in button and search for specific content they are interested in (through visible search button, organized categories & tags) reducing the time spent on these tasks.
Easy to read on both mobile & desktop
The previous design of the blog page made it challenging for users to scan important content quickly, with links cluttering the interface, elements blending together and lacking visual definition. The categories and tags were included in the titles, making them difficult to read.
We simplified article titles, re-organized categories into tags and visualized them to improve clarity. We optimized line length & height to support readability. This enhances the overall user experience by reducing cognitive overload and makes scanning pages easier.
Ability to customize subscription options
Before the redesign, we had just one subscription option in place. It didn't matter if you were more interested in one topic over another; you'd get updates on everything across the board. Our goal was clear: empower the customer to choose and combine multiple subscription options, allowing them to read exactly what they wanted.
Launch 🎉
We launched MVP on February 6, 2023 with the goal of providing easier access to content and introducing the new website to our subscribers. Further design elements and features were tested and released in phases.
Visit Investing Angles Post-launch validation
After we launched, we ran tests to make sure our designs met our goals and worked correctly. One of the issues was with the image zoom feature 🔍. While users found the website easy to navigate, they couldn't pan or scroll horizontally when zoomed in on a graph.
We explored alternatives and quickly implemented a fix. Subsequent tests showed that users could now zoom in and scroll horizontally without any issues.