FeedbackFruits is the a tool suite that enhances student engagement, collaboration, and feedback in both asynchronous and synchronous learning with LMS-integrated teaching tools.
In my past team and company, our design team was assigned with creating a brand design system in order to enable a shared experience, unify solutions and create cross-collaboration between various teams in the creative environment.
My approach was to research existing design systems, understand patterns and involve the team from the ‘get-go’ to participate with ideas and feedback. It took several months to build, improve and it is still developing.
In this project, I will present some of the highlights and efforts from the time I was still part of the design team. The FeedbackFruits Design System hosts guidelines, reusable UI components / templates (Figma), and other resources to help create products. According to it's purpose, the brand design system file has been divided into multiple libraries and component systems.
Design system build
1 x UX designer
1 x motion designer
1 x illustratior
1 x visual designer
The design team was in charge by making sure that the system evolves and covers all of the brand (product) aspects.
Everyone participates and makes suggestions on what could be improved within the system, thus creating a constant stream of ideas and a sense of membership.
The main software used to build the design system is Figma, due to its strong prototyping, sharing and collaborative approach.
The 12-column grid system is fully responsive and is used to build layouts of all shapes and sizes. This way, the content can be easily aligned and distributed correctly.
Color is instrumental in expressing the FeedbackFruits brand, establishing hierarchy, and creating legible experiences for all. Using focused, meaningful color pinpoints exactly what users need to see.
The color values in FeedbackFruits have been carefully selected and tested to meet WCAG accessibility requirements for contrast and color.
Primary, secondary, and tertiary colors have been created to support usability by ensuring sufficient color contrast between elements.
The monochrome palette is versatile: it works as a background for both light and dark themes, so the color gradation is saturated at the extremes and fairly sparse towards the center on both sides.
Various shades of grey which are used for things ranging from various text types, lines, backgrounds, etc.. Anything that doesn’t need a tool color, one of the brand colors, or is not semantic, will likely be a shade of grey.
From marketing to product, the main typeface used all across the FeedbackFruits brand is Roboto. Type sizes are different depending on the design system.In the typography usage, form follows function. We aim for optimal readability and clear hierarchy on a variety of devices.
Pixels (px) are used for the sake of simplicity, and as a standard unit of measurement for fixed values in this documentation. Pixel values will need to be converted for each platform.
We chose pixels as our the common denominator because it’s the default unit in screen graphics software (Figma, Photoshop, Illustrator, etc.).
Body text is the most common typographical element within our interfaces. Use this for all body copy.
A caption is a subhead for a single item or asset, but aren’t essential for everyday use.
To achieve harmony for an icon family that could be used both in our product and marketing design, FeedbackFruits went for Google's material design icons including some additional custom-made ones, with the same stylistic rules maintained throughout: filled, bold, 24px sized icons.
Effects are depicted by consistent use of shadow, which in turn reflects elevation. When a surface changes shape or scale but the elevation remains constant, its effect type doesn't change.
The size of shape changes can be subtle or more significant, and can be used to reflect a specific purpose or meaning.`
We use patterns and accents across marketing touch points to support a clear, cohesive, and consistent story from start to finish. It's almost always used to support copy, and should never distract or overshadow the key message.
After contributing to some concepts for illustrating education, Salooni Rizvi and Matthis Grimme from the design team (re)created the graphics that would later be used in marketing assets.
FeedbackFruits uses illustrations to add personality and visualize ideas outside of photography and video, as well as to simplify complex ideas. They can be static or animated, but used in careful balance to avoid childish tones.
Illustrations come in handy when photography or video cannot be used to explain certain topics. These shouldn’t be overused, as it is crucial to keep the human touch (through photography), and because they shouldn’t drive the attention away from the content (product features).
For outdoor settings, like a backyard, buildings and environments, we use a frontal perspective with a good angle in order to provide visual interest and unity between the objects involved.
FeedbackFruits follows an atomic design system. Components were built as reusable building blocks for both our branding and product. Each component meets a specific interaction or UI need, and works together to create patterns and intuitive user experiences.
Design systems are in a constant phase of development and maintenance. Many thanks to the amazing design team of FeedbackFruits – together, we managed to kick off the first FeedbackFruits brand design system, and this is my summary of it.
Although I’m no longer part of the team, it’s been a great experience with ups, downs, and a lot of learning.