Stockopedia redesign
Step 02.
Research
When I joined Stockopedia, a redesign of the website had been in progress for two years. Nothing had been released to subscribers, and the site hadn’t undergone user testing. In my first week, we conducted user tests to gather overdue feedback. The results were eye-opening for the team, revealing significant flaws in the redesign:
“The site was meant to be focused on proprietary rankings, screens, and experts recommendations, and less about general market conditions and news. But it’s difficult to determine that when initially viewing the site. It’s frustrating.”
“I’ve used the old site for many years, and I love what you do, but I’m worried about the direction you’re heading in, I’m concerned you will ruin the site.”“I’ve used the old site for many years, and I love what you do, but I’m worried about the direction you’re heading in, I’m concerned you will ruin the site.”
“It feels like you just tried to make it pretty … on the old site everything was on one page, now there is loads of unnecessary scrolling.”
Benchmarking the live site
The team hadn’t conducted user testing on the live site either, which meant that improvements were based on guesswork rather than evidence. To address this and establish a usability benchmark, I initiated a series of tests with customers. This provided valuable insights into their preferences, pain points, and areas of frustration.
Key insights
More isn’t always better: Numerous features had been added to the site under the assumption that “more equals better”. The team believed this approach would make users feel they were receiving greater value for money. However, newer customers only used a fraction of Stockopedia’s features, and as a result felt the product wasn’t suited to their needs.
“It’s very feature rich. It’s more than I need to get the most out of what I do with my investing.”
“It’s a really distracting page, there is too much information!”
“Once you manage to get to grips with it, I think it’s very good. But there is lots of valuable stuff in there I haven’t used for ages.”
Analysing feature usage: There was a long-tail of feature with very low usage. We needed to focus our efforts on enhancing the quality of the core features that were used every day.
Poor discoverability: As features were released, little thought was given to the information architecture of the site. Large dropdown menus contained duplicate items, with pages containing multiple levels of nested tabs making navigation and recall of features frustrating for users.
“I do struggle to get around the existing site, I’ve just gotten used to the things I go to often.”
“The depth of the tools available is impressive. Given enough time, outside the context of a user test, I think I could use it efficiently.”
“Because of the proprietary names of some of the tools I found it less than intuitive to locate particular things like stock rankings.”
Step 03.
Ideation
Design Sprint
In response to user testing feedback on both the existing website and the ongoing redesign, we decided to pause development and conduct a week-long design sprint. Following the Google Ventures framework, we assembled a cross-functional team, including the CEO/founder, product analysts, engineers, and designers, to collaboratively address the issues identified.
At the end of the sprint, I synthesised the data collected from user testing, team discussions, site usage analytics, and competitor research to create a wireframe for user testing. Our primary focus was on enhancing the site’s information architecture and discoverability, rather than introducing new features. The central question guiding our efforts was: “How can we accelerate the user’s journey to value?”
Step 04.
Testing
I tested the same key tasks on the wireframe that I previously tested on the live site. To facilitate easier comparisons, I created a quantitative scorecard in addition to taking qualitative notes. The scoring system was as follows:
Overall, we observed an improvement in task completion rates compared to the benchmark of the current live site. Positive qualitative feedback from participants confirmed that we were on the right track.
“I can see quite a few things that have been changed and improved. It’s got all of the things that I am looking for.”
“I like it – seems cleaner somehow.”
“I go on lots of websites and they aren’t very intuitive, but this one is.”
Following a four-day workshop, the proposed design was not perfect. In our attempt to simplify the navigation, some top-level categories became too broad, resulting in large and vaguely labeled content buckets.
“Everything seemed to be stuffed into the ‘Browse’ folder.”
We also removed industry-specific terminology to appeal to novice investors. We found renaming “Screens” to “Filters” negatively impacted task completion rates. Our “best-fit” customers understood the term “Screens” in an investing context, and by trying to appeal to novice investors we risked alienating them, so we reverted this change.
Step 05.
Refinement
We refined the site architecture through two additional rounds of user testing. The initial Design Sprint and testing laid the foundation for the site’s structure, which was successfully released and remains live today.
“It was straightforward to navigate the site, I didn’t feel overwhelmed with options.”
“The website is in it’s early stages, but they’ve arranged everything into a tidy order where content can be accessed quickly.”
“The wireframe was easily navigable with a categorical design based on areas of interest.”
The CEO was confident in the test results, and gave the green light to proceed with the implementation. He stated:
“In my view we can now confidently say that we have the following:
- Qualitative feedback from current site subscribers that the new nav is ‘simpler’, ‘intuitive’ and ‘easier to navigate’.
- Quantitative evidence that the new navigation/structure leads to the correct results faster than the current site.
- Internal belief that the new nav maps better to perceived customer value (learn, discover, analyse, track etc).”
User testing eliminated guesswork, helping to motivate and align the team. A struggling redesign that took two years finally gained direction, and we successfully launched a beta version of the application six months later.
Step 06.
Results
We successfully migrated all existing users to the new version of the site using an opt-in mechanism. The new version of the site actually had fewer features, indicating subscribers preferred the new experience.
“The team have made the data more readable and more accessible. This allows individuals to select their own strategies and test them against the strategies of the giants of investing.The tools are simple to use and with pre recorded and live tutorials I have significantly improved my knowledge of investment process and as such my returns.”
– TrustPilot (March, 2024)
“Ease of use” is now the second most commonly stated comment from Promoters via NPS. We are maintaining a “World class” NPS of ≈50. Example feedback includes:
“The concise display and analysis of vast amounts of information in an easy to interpret layout & interface.”
“The structure of the website is well designed and easy to understand. This is complimented by the useful series of seminars.”
Since the release of the new application, we’ve won several investment awards, as voted for by the UK private investor community:
The new website has enabled faster product development, due to the improved technical infrastructure. It was built from scratch as a modern “single-page application” backed by a RESTful API. Moving away from the original PHP application allowed for faster iteration and supported more modern web technologies.
We developed a Progressive Web App to enable users to access the site on mobile devices. The design was optimised to ensure a good experience across all resolutions and was adopted by 25% of our user base.