The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Our client, a company holding three food delivery brands, sought to build a theme-able, brand-able, responsive application to support all three brands. Myself and another designer created a clean base UI, compelling UX and a modular robust design system in order to support our client's needs.
Fetch is a self-created brand that was used as a base while designing the core user experience.
Myself and another designer worked together to create the Fetch design ecosystem. Once designs were approved, we supported our team of front end and back end developers. We also worked closely with our product manager and test engineer to ensure alignment and quality throughout the product build.
Our client came to us in need of a new front end design to support the three different food delivery applications under their ownership. With the brand alignment of the three apps on the horizon, the client needed a modular and cohesive design and build to ensure scalability.
How might we create a compelling, modular, user experience and design system to support three brands.
Over the 6 months allocated, my co-designer and I solved our clients needs by creating artifacts to support a successful product build and the future scalability of the company. We did so by creating:
We designed a user experience to accommodate three different food delivery brands with different feature sets. We developed designs for every screen at mobile and desktop breakpoints while also documenting standards for every other breakpoint.
This design system posed a unique challenge of supporting three different brands for one single product interface and front-end build. To do this, we expanded the brand typography and color palette to be interchangeable in an accessible way. We stretched Figma to utilitize two plugins: Atlas Theme Switcher and Design Tokens. The former allowed us to switch between color, logo and type styles in Figma from one brand to the next. The design tokens allowed us to give our developers design token JSON output from Figma so they could implement a similar theme switcher.
Design System Documentation
This engagement presented the opportunity to rethink many of our processes as a team. We spent multiple weeks at the beginning setting up a foundational workflow and testing solutions to create an efficient, scalable and thorough workflow. Because of the complexity of the design system, a key priority for the product team was reducing the gap in communication between design and development. In order to do so, we shared design tokens in Figma through a JSON file to support a theme switching capability in the site build and ensure alignment between the design files and the developed product.