Money mentor is a finance editorial created by The Times business, owned by News UK.
I was contracted as a lead UI designer to help the venture team that managed this fledgling product. The initial brief included a redesign of the entire platform, overhauling the existing brand, UX, interactions and CMS system. The solutions we worked towards aimed to better empower the teams creating content for the editorial, and create accessible and personalised experiences for users.
The product aims to demystify money for its users through accessible scenarios and storytelling, and a personal financial health check system. The product includes reader stories, Q&A’s with finance experts, guides, product comparison tables, calculator and customisation tool, and a financial service provider rating system.
I was hired as the team struggled to move the product forward from the MVP that was launched. As the content variety and traffic to the site grew, the early launch systems and were beginning to leave users with disjointed experiences. The system architecture wasn't fit to categorise the breadth of information now available, and the UI was limited creating a repetitive experience and limiting accessibility.
Designers working on the product had been struggling with the limited guidelines and how they reconciled with the perceived user audience, and the actual audience the product was reaching.
In collaboration with the Lead UX, create a new content system and UI pattern/visual style to align existing discrepancies and future functionality within the product. Leave a legacy of documentation for the News UXD hub to run the product from in the future.
Understanding the landscape
Existing research, along with interviews with end-users, and employees of the business were conducted to understand the perception o the product both internally and externally. I distilled the collective data to extract insights, user pain points (both across the product and its competitors) and intrinsic differences between the existing brand and its active market to create a clear benchmark to rebuild the brand.
Key Insights
I collaborated with the team to synthesise data from across user interviews, focus groups and internal workshops. The core pain points we aimed to address were as follows.
- Unhelpful page hierarchy and large chunks of info with no structure
- Overall brand felt untrustworthy and childish
- Users where quick to dismiss product as sensationalist or ‘click bait’
- Despite being simpler than competitors, users found the product more complicated
- Target users where not engaging with brand
- Designers where limited by existing brand work
- Lack of brand proposition meant internal stakeholders struggled to articulate the product within News UK
- Editors and Content Managers felt stifled by lack of UI patterns and page variety
- Product didn’t reflect the content and tools
- Primary audience composed of legacy Times users
Workshopping
Subsequently, we ran rapid ideation workshops in a stripped-down google sprint format with the team to address these. I facilitated the team through a series of exercises including competitive analysis, lightning talks, ‘how might we’s, crazy 8s and anonymous input. These sessions were used to discuss brand direction, Information architecture, content strategy and define the action plan the team and I would use to address both business and user pain points.
Modular UI System
In response to many layers of feedback and running several workshops, and as part of the overhaul (and integral to the new usage standards), I teamed with the Lead UX on the project to introduce a modular design system to the product. This eliminated the linear method that both editors and users where using to browse and curate content. The system included visual patterns depending on content routes, display hierarchy for product rankings and logic/design patterns for awards and partnership deals.
All this was used to build a new CMS that not only reflected inherited editorial logic from The Times but also accommodated the unique demands of a finance and comparison product.
We were aware that most users first experienced the product at a 2nd level category. To accommodate this, all pages that grouped content were considered landing pages and built out of the same modules. This allowed editors to curate several pages in a single category based either on search terms or the financial maturity of the user.
The system allows users to navigate both across and within categories easily due to the global UI patterns. The content was displayed relative to its subject affiliation, whilst maintaining a defined distinction between editorial pathways and comparison tools. This pattern was utilised for users to digest information and navigate quickly and intuitively.
Content variation
Money Mentor has four core editorial content pieces: Article, Guide, Q&A, and Story. These were given complete overhauls to create a more accessible and convenient experience for reading on the go.
New type hierarchies, segmentation, and rich media were designed into each content type, allowing editors to build content around the subject rather than the platform. This hyper-flexible system also allowed for analytics to create dynamic bridges between content pieces based on demand and partnerships.
Comparison and ranking tools
Comparison tables with independently reviewed products were completely overhauled from their launch versions. We created a rationale, usage standard, and logic in the way a new product card system presented data and converted users.
The cards had to present data on a plethora of different product types. We used heat maps and conversion rates, along with user trials to provide a consistent end-to-end implementation of the system. The new visual style was imperative to align existing discrepancies within the system between expert ratings, customer experience awards, and product types. Lastly, the cards now work with multiple executions, presenting large amounts of product data, and lean information only (such as names).
Provider Reviews and ranking
We rediscovered an early user-requirement to provide independent company reviews. This was built into the product offering as part of the overhaul. Provider pages were developed alongside the product comparison pages, inheriting their UI patterns and topography to create consistent product conversion routes.
These tools served as index catalogues for search engines. Organic traffic to these pages allowed for partnerships and discounts to be offered from a partnered provider through the platform.
Money Mentor is now better received both within News UK and by users. Over the two quarters that we have been releasing changes, organic visits, repeat users and use time have been steadily increasing, whilst bounce rates and none-conversion exit stats have been falling. The implementation of a unified brand has given stakeholders the tools to rationalise the product to C-level investors. The new UI has reconciled the product with its function and is allowing the business venture and editorial teams to ideate new functions and assist in product expansions quickly, a quarter ahead of schedule.
If you have a new project, opportunity or are in need of some digital design assistance, I would love to hear from you. Just fill out the form below to get in touch and I’ll get back to you pronto!
If you're interested in following my latest escapades, or are just in the mood for a good old stalk, here are the social channels you will find me on.
