RiverRock Consulting Design System
Design System
Introduction
Company: RiverRock Consulting
My Role: UX/UI Designer
Project Type: Freelance
Device: Web and Mobile
Audience: B2C
Timeframe: July-August 2024
Company Overview
RiverRock Consulting is a Portland, Oregon based financial consulting company that provides business operations, supply chain operations, and financial business management services to businesses. RiverRock consulting was founded to offer services to smaller Pacific Northwest businesses that may not have access to resources available to larger competitors.
Establishing design and brand principles
The guidelines for the design system and branding were simple: create modern, minimal, and forward thinking elements that communicate RiverRock Consulting’s professionalism and agility to businesses. To do this, I planned to focus the branding around natural themes to signal RRC’s regional connection to local business. I also created components that, while minimal and professional, project RRC’s forward thinking, agile, and scrappy identity to small business upstarts.
Stage 1: Typography
I chose to use two fonts for RRC’s design system. The logo font is a serif font named “Harmony.” Serif fonts are often used to convey a sense of trustworthiness, reliability, and stability. Using a serif for a financial institution’s branding helps support the quality and reliability of their work.
Resist Sans is the font used across the rest of RRC’s online experiences. Sans serifs are good for creating a clean, streamlined look and are far more legible than a serif font. Resist sans is a modern, readable font that contrasts well with Harmony.
Typography Scale
I chose to use a minor-third, 5:4 ratio typography scale because it provides more subtle and less jarring differences between text sizes, while still providing a wide degree of optionality and versatility.
Accessibility
When creating the typography scale, I focused on accessibility as a key consideration. Although the Web Content Accessibility Guidelines (WCAG) don't provide specific font size recommendations, the Bureau of Internet Accessibility suggests using a minimum font size of 16 pixels for body text to ensure readability. With this in mind, I established the body text at 16 pixels as the baseline, and made sure that the smallest text for captions and labels was at least 12 pixels. Additionally, to meet WCAG guideline SC 1.4.12, I ensured the line height for body text was at least 1.5 times the font size, applying this ratio to 16px, 14px, and 12px text. This strategy enhances overall readability and contributes to a more accessible user experience.
Iconography
I thoughtfully selected an icon set with rounded corners to reflect the warmth and personal touch RRC can provide to businesses. The hand-drawn, yet still modern, feel communicates that RRC is approachable and effective.
Stage 2: Color
I chose the following color palette because it reflects the imagery evoked by the name “RiverRock Consulting.” Deep blues, grey, and tan are reminiscent of a riverbank. Moreover, the color blue is is used strategically to convey trust, stability, professionalism, and security.
Typography, border, and fill color
For the next step I applied the color palette to relevant typography, border and fill colors. I also chose colors to use for user feedback and system status that matched the base palette while remaining clear and accessible. This color palette is crucial for maintaining consistency, clarity, and efficiency in the design.
Typography
Border
Fill
Accessibility
All of the colors chosen meet the accessibility guidelines set out by the WCAG. Text has a minimum contrast ratio of 4.5:1, and design elements have a minimum contrast ratio of 3:1. Ensuring that the color palette is accessible and inclusive was highly important while creating the design system.
Stage 3: Logo
I designed a full logo, a logomark, and a wordmark logo for different use cases. Each of these were rendered in full color, inverse color, black, and white versions. I also delivered a number of file formats for different digital and print use cases for each logo/color combination.
Concept
The concept for the logo is based on the ideas of confidence, guidance, solidity, and calm. I chose to use a cairn, which is a stack of rocks that hikers and explorers use as waypoints to mark a path. The natural theme carries from the company name, to the color scheme, through the logo. The full suite of branding tells the viewer that RiverRock Consulting can be trusted to guide them along their financial path.
Design
The design of the full logo is simple and straightforward. Rather than over-complicate things, I chose a more minimal design that projects straightforwardness, trust, and solidity.
Combination mark, wordmark, and logomark
The combination mark shows the cairn, a wave motif, and RiverRock Consulting’s name
The logomark uses just the cairn image, without the waves or company name. It can be used when space does not allow for the full combination logo.
The wordmark uses just the company name and wave motif, and can be used in situations when space calls for a low height, horizontal logo, such as for letterheads.
Sizing
For web applications, the full logo should be no smaller than 150px in height to maintain legibility. The logomark should be no smaller than 100px in height, and the wordmark should be no smaller than 250px in width.
On mobile, the full logo should be a minimum of 90px so the text remains legible. The logomark should be no smaller than 70px in height, and the wordmark should be a minimum of 150px wide
Colors
Full color: for use on light backgrounds
Inverse color: for use on blue backgrounds
White: for use on black backgrounds
Black: for use on white/light backgrounds when color logo is unavailable or inappropriate
Stage 4: Components
Ensuring accessibility
Accessibility was of utmost importance when creating the design system components. I achieved this by following accessibility standards and recommendations to provide an inclusive user experience.
Focus states
Similarly, I made sure that components had a focus state to clearly indicate which component on the website is currently active or selected. Focus states are highly important for keyboard and screen reader users, allowing them to navigate through interactive elements without relying on a mouse.
Stage 5: Finalizing Design System
Web Design
The mockups shown below show the implementation of some aspects of the design system and style guide for both web and mobile. Mobile implementation uses the wordmark to conserve vertical screen space. I also opted to use a hamburger menu to house the header navigation to save more space as well.