︎

Nathan Cheng

Info Design Media Notes

Nathan Cheng

Info Design Media Notes

Rices Mill Website

Simple website design & brand refresh for a family friend’s small business making it easier for administrators to provide for teachers and students.

Rices Mill Booksellers provides supplies to Philadelphia schools that aren’t otherwise obtainable through standard bureaucratic processes. As a family-owned business, Rices Mill prides itself on its speed, ease, personability, and adaptability.

The owner had minimal needs: core business information, a contact button, and a rotating collection of featured items. She also felt inadequate about her ability to manage a website herself. With that in mind, I made the website approachable and maintainable  by offloading the site’s dynamic content to an Airtable embed instead of a CMS, allowing her to easily customize through a familiar spreadsheet interface without having to learn a complex tool like Webflow CMS.

Project Type
Freelance
Duration
~2 months (Nov–Dec 2022)

My Roles
Web designer, Copywriter, Brand designer, Webflow developer, SEO, Airtable training
Tools
Figma, Webflow, Airtable, Concepts for iPad

Collaborator
Siobhan Reily (Monomark design)


The Rices Mill website shown at different display sizes: desktop, tablet, and mobile.


The previous Rices Mill website and logo. Scrappy moodboard planning out the visual direction. My concept sketches for the logo. Ultimately, we went with an older version that was already created by Mary Beth's niece.

Cover slide - Rices Mill Visual Language Logo Slide 1: Swirly wordmark with "RM" emblem and "Rices Mill Booksellers" Logo slide 2: "The full wordmark is the official logo. The Monomark, created by Siobhan Reily, is best suited for display contexts where space is limited or where the text would be too small to read." Typography slide - Primary typeface. "The primary font is Fraunces, a friendly-yet-professional, playful, and personable typeface by Undercase Type. The institutional serifs at the ends of each letter convey tradition & trustworthiness while the rounded, “wonky” shapes contain a sense of play suitable for child-oriented contexts. Fraunces is an open-sourced, free to use, and variable font. This gives Rices Mill the freedom to express this language in any context and adjust the “wonkiness” and professionalism for a variety of contexts. You can learn more about Fraunces here (https://fraunces.undercase.xyz/)." Typography slide - Fraunces inspiration: "Fraunces’ curvy, irregular forms complement the Rices Mill logo’s cursive, handdrawn appearance. Its style traces back to a tradition of typefaces like “Cooper Black,” along with the friendly, “Thank You For Shopping With Us” lettering on shopping bags throughout America." Typography slide - Secondary typeface: "The secondary font is Nunito, a clean and rounded typeface by Vernon Adams. A balanced and clear complement to Fraunces, Nunito features rounded ends and bubbly bold weights. Like Fraunces, Nunito is a free font available on Google Fonts." Typography slide - Secondary typeface inspo: "Design trends over the last decade have generally trended toward austere minimialism with clean lines and rigidity. Nunito's roundness calls back to the warm and satisfying attitude of various child-facing toys and food products. It roots Rices Mill in the business of child education while reading clearly in a variety of display contexts. Nunito complements the website’s content which will include visuals (e.g. toy catalogues) with similar aesthetics." Typography size hierarchy slide: "Both typefaces have different approaches to the same approachable and friendly feel. Fraunces conveys a sense of professionality and tradition while Nunito embodies a sense of play. Together, Fraunces and Nunito communicate in a visual voice that is clean and trustworthy yet warm, child-oriented, and humanistic. Use Fraunces for larger headings and labels. Use Nunito for small callouts, body text, and anything smaller." Brand primary colors: "The primary brand colors are purple (Purple Hewart, #7e22ce) and yellow (Sweet Corn, #fde68a). Here are shades you can use, with the primary colors highlighted." Brand alternative colors: "Alternate colors can express different category offerings. Child-oriented visuals tend to be bright and colorful. Rices Mill takes this approach to its colors but avoids oversaturated primary colors as its target users are older administrators. The colors use muter, more mature tones." Branding shown on business cards in a mockup photo. The wordmark is on one side against a purple background, and the rest of the business card text is on the flip side on an off-white, beige color. Website components, illustrations, and icons: "The Rices Mill graphics use a hand-drawn, sketchy/curvy style that extends the cursive approach in Siobhan’s “RM” monomark logo. The colorful illustrations have fuzzy edges that allude to childish crayon or pencil drawings. Rounded corners across the website’s typography, buttons, icons, and illustrations complement the curves in the logo and both fonts. The website’s background surface has a subtle “grain” texture that emulates real-life paper materials and makes the website feel more warm and tactile." Screenshots of the first two sections of the homepage. Two screenshots of the second half of the homepage. Responsive design: "The website design adapts to any screen size." Screenshots of the same homepage at different display widths, demonstrating the responsive design for desktop, tablet, and mobile sizes.



Nathan Cheng

Open to all forms of collaboration.
Reach out at n@nathancheng.work


All content © Nathan Cheng unless noted otherwise.
The use of any image from this site is prohibited unless prior written permission from Nathan is obtained.