Money.com
Expanding and upholding
a brand system
The Challenge
In 2020, Money.com underwent a significant rebrand, which included updated logos, color schemes, and typography. While some documentation outlining the basics of these elements was provided, a comprehensive brand book was never developed. As the newly appointed Product Design Lead at MoneyGroup in 2022, my first task was to take this foundational documentation and expand upon it, creating a fully realized design system that addressed all the finer details necessary for consistency and scalability across products.
Part of the provided documentation for logo usage and brand colors
The Solution
To inform the development of our design system, I began by researching existing brand guidelines from similar companies in the industry. This competitive analysis helped me identify best practices, gaps, and areas for improvement, providing valuable insights that guided the refinement of our own brand guide.
Color Pallete
My first priority was expanding the color palette to provide the design team with a wider range of options for the illustrations we create daily for both news articles and evergreen content on the site.
Typescale
Next, I refined the typescale for mobile to address frustration from writers who couldn’t use h4 headings. The issue was that h4s were set at 14px, while body copy was 16px, causing visual dissonance despite adhering to SEO guidelines. By adjusting the typescale, I created a more consistent and flexible heading system.
Graphic Support
I also provided examples for using graphic support elements and created a space for our Senior Art Director to document best practices for photography, illustration, file naming conventions, and icons. Additionally, I clarified the distinction between editorial and system iconography and their appropriate use.
Buttons
Another gap was the inconsistency in button shapes and sizes. I defined our primary, secondary, and tertiary buttons, specifying height and radius values for each.
Spacing
I also focused on refining the spacing between elements, implementing an 8pt grid system to ensure consistent visual hierarchy across all pages.
Handoff
These were just a few of the key improvements I made to strengthen our brand guide and design system. Once finalized, we presented it at an all-hands meeting and provided a deck which included links to all templates, typography, and components, ensuring everyone in the company had easy access. This made it possible for us to stay aligned and eliminate any future design inconsistencies.
Next Steps
With the brand book and design system now in place, the next step was to audit our existing experiences and ensure they adhered to the new guidelines. Starting with the money.com homepage. Up until that point, the homepage looked less like an editorial experience and more like a product experience. A lot of important content was being pushed far below the fold, especially sponsored content.
Money.com before and after
Homepage
I performed extensive research and found some common denominators that make an editorial site feel like an editorial, such as a central featured article, trending topics as well as latest news columns. By performing a few tweeks I was able to maintain our most prized featured and sponsored content above the fold. Below we would immediately have a blade to showcase our sponsored flagship experiences and content hubs, followed by a blade with our top categories. After the initial structure was mapped out, I passed the project along to our Sr. Product Designer for some final touches, but also made sure to give him the space to explore some further iterations, building up on what I had started and taking it to the next level.
Money.com wireframe exploration
Money.com UI exploration
Category Pages
Next up was our category and subcategory page templates. Our SEO lead at the time pointed out that there was a lack of a proper category structure. Users had no easy way of easily accessing categories and much less reaching subcategories within categories. The top menu had clearly not been updated in years, it focused on specific experiences and pages, a strategy that had worked for a time but was no longer making sense. Following the new page structure the SEO team provided, I put together a much simpler menu, with a clear categories and subcategories structure.
Money.com original navbar
Money.com navbar update
The next step was to establish a clear category and subcategory page hierarchy, where users could not only easily access content, but also understand the visual difference between a main category and a subcategory page. This was achieved using subcategory icons on each category page, and a clearer content approach for the subcategory pages.
Easily identifiable breadcrumbs were also added to the top of each page. Previously, breadcrumbs looked more like labels over article titles, making it difficult for users to understand that it was actually a breadcrumb. After mapping out the structure of the pages and providing some initial design exploration, I passed the project along to our Sr. Product Designer so that she could polish and elevate the design, suggest details such as color background use, icon styles, expand features and more.
Category map and wireframes exploration
Final category page design by Odara Lozano, Sr. Product Designer
Flagship Experiences
Lastly, it was time to update our sponsored flagship experiences, this includes Changemakers, Best Places to Travel, Best Places to Live and Best College amongst others. Our basic template limited innovation, allowing only photo swaps, color changes, and content updates. I researched other publications and identified missed opportunities like filters, micro-animations, and video backgrounds to enhance flagship designs. Noticing limited collaboration between Product Design and Editorial Art, I formed a task force with two Senior Designers and a Sr. Art Director to brainstorm impactful ideas, leveraging our full creative capabilities to attract sponsorships.
Original flagship template
I kicked off the project with Changemakers, a list of the 50 influential entrepreneurs. The experience would consist of two basic templates, the homepage and a profile page. For the homepage, I established the artistic direction and leveraged the talents of the Art Team to create 50 profile images with a collage cutout style and set them up in a grid that could be easily filtered through a tab system at the top. Each Changemakers thumbnail included a quote that would animate in on hover.
Photo treatment exploration
Wireframe and thumbnail exploration
I then requested the help of our video editor to slice together a simple loop animation with those profile pics to be placed at the very top of the page, so that everyone could be showcased above the fold, giving users a quick glance of who had made the list.
I put together a very simple profile page featuring the Changemakers name, photo and enlarged quote, with plenty of space below for the writers to drop in their copy. I added back and forward arrows at the top of the profile page so users could easily jump between changemakers.
Finalized designs
The Changemakers template revamp was successful enough to be sponsored by Public.com The template itself, as well as the cross functional workflow I established in between Art and Product Design, served as the base from which all future flagship projects would be built and iterated on, from best banks to best places to live, best colleges, best hospitals, best places to travel and more.
Flagship experiences
Reflection
In the end, my contributions to Money.com as a whole have set the building blocks for the rest of the team as well as future designers to work on any project related to the brand.
