FeedbackFruits: Brand Design System
FeedbackFruits is the a tool suite that enhances student engagement, collaboration, and feedback in both asynchronous and synchronous learning with LMS-integrated teaching tools.
1. Introduction
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.
My contribution
User research
Visual exploration
Project management
Design system build
The team
1 x UX designer
1 x motion designer
1 x illustratior
1 x visual designer
Year
2022–2023
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.
2. Grid system
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.
3. Color system
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.
These colors are used to provide accessibility, simplicity, and consistency throughout all brand communications.
We use secondary colors to create highlights in a layout. Secondary colors are used regularly but only in small bits, just for accents. They allow us to be more flexible and creative in surprising ways.
The correct usage should enhance communications, help set focus on the layout and allow us to design easily identifiable messaging for our audience and behavior.
Tertiary colors are meant to be used very sparingly, mostly in illustrations.
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.
4. Typography
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.).
Headings establish the first-level typographical hierarchy for sections throughout the interface. For screen reader users, titles are a ‘bypass’ mechanism that allows them to navigate between different areas. Using a blend of the two different headings can also help visually distinguish content and guide merchants through the page.
Without a clear titles hierarchy, users have to step through every single element, in turn, to get from one place to another. Therefore, using the right hierarchy is crucial for our accessibility measures.
Subtitles create ownership and define a specific area of an interface, such as a list or small text block.
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.
5. Iconography
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.
6. Elevation
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.
7. Corners
The size of shape changes can be subtle or more significant, and can be used to reflect a specific purpose or meaning.`
8. Accents
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.
Shapes be used individually or combined (maximum of 2), and are usually a slightly lighter or darker colour than the background. The main purpose of the shapes is to provide some texture and fill up awkwardly empty spaces.
When combining shapes make sure there's a significant scale difference, the smaller in front of the larger. The one in front should have a shadow in order to indicate depth.
In order to pinpoint certain features or content – textured lines, arrows and text with a handwritten effect are sometimes used within one viewport or material. Lines and arrows have a chalkboard texture to them in order to denote imperfection, but also as a nod to classroom learning.
9. Illustrations
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 indoor settings, like classrooms or homes, we use clean but warm atmosphere. Use use simple lines and angles, adding small moments of personality without distracting from the main subject of the scene (like windows, plants, books, a cup of coffee. When showing the inside of an academic building, we keep the space simple and thoughtful. Choosing specific items to give the “feeling” of the type of environment, without crowding the space with too many people or things.
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.
When showcasing our product in illustrations, we usually draw a scene where the product is being used. This can be done by adding our character in a setting appropriate to the context (f.e. an instructor teaching in a classroom full of students, or a student studying at home).
When drawing other objects, the same guidelines apply as with surroundings and furniture: clean simple lines, preferably the same angles. Scaling of objects is important when drawing a scene that also involves characters.
The FeedbackFruits animations are used to explain concepts / products / features / ideas. They are informative and playful. We usually try to keep the video length to about 2-3 minutes. The storyline always starts by presenting a problem on a transparent FeedbackFruits Green background.
Then a transparent FBF green screen follows, mentioning FeedbackFruits and the specific solution it offers. The story continues on a transparent FeedbackFruits Green background, representing the positive outcome of using our tools.
In terms of artwork, the previous illustration guidelines always apply.For the colors of an animation, we use an accent color to highlight the problem and the solution that is being displayed.
The FeedbackFruits animations are guided by a voice-over and custom made music / sound effects, when necessary.
For other platforms (such as our product and website), other assets have been designed in order to illustrate broader actions.
10. Components
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.
Tabs are used on the website in order to display multiple items in an organized or interactive way.
The ‘category’ tab is designed to help the user browse through different blog categories.
Cards group information into flexible containers to let users to browse a collection of related items and actions. They show a taste of information and reveal more details upon interaction.
Conclusion
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.
