YourLocal Case Study




YourLocal (yourlocal.org) promotes green living. The app’s retail marketplace allows restaurants to offer customers discounted surplus food and thereby reduces food waste.

Flatiron School’s UI Team benchmarked YourLocal’s visual design system via three sprints: research, design, and user testing. Rather than overhaul the brand, the project explored integrating a stronger, more genuine branding.


Sprint 1: Research & Style Exploration

Research and Synthesis

Current State

The UI team conducted an ad-hoc review using the app. We first took screenshots documenting the app design’s current state, but later I realized capturing the Usability Heuristic Evaluation provided benchmarking metrics needed to refine future work.

Current State evaluatin radar graphing showing percentages met of the 10 usability heuristics for interface design

Domain Research

Knowledge ​regarding food waste has grown. The ReFed Roadmap adopted the Environmental Protection Agency’s Food Recovery Hierarchy framework and categorizes food waste reducing methods. The 2016 report noted fast-expiring foods contribute close to 80% of food waste. Food waste recovery initiatives recommended connecting donors and recipients using technology platforms. Consumer-based food apps offer similar approaches. Eateries turn a profit by selling discounted perishables to the public, and consumers can save money on the offer.
uneaten top
uneaten bottom
food waste

If all of America’s wasted food was grown in one place, this mega-farm would cover roughly 80 million acres, over three-quarters of the state of California. Growing the food on this wasteful farm would consume all the water used in California, Texas, and Ohio combined. The farm would harvest enough food to fill a 40-ton tractor every 20 seconds.

User persona

A user persona wasn’t a scheduled part of Flatiron’s client phase.


Wordmark Logotype – Made by Mystie Personal Portfolio Website Design Overview

Most of the professional design work is for professional music clients, and a good portion of that work falls into the category of brand-identity design. After graduating from NYC’s Flatiron school for UX/UI Design, I decided it was a good time to revisit my brand-identity design since the school requirements had been somewhat rushed and not ideal for a more contextual deep dive.

Before even opening Adobe Illustrator or also sketching on the iPad, I knew that for the wordmark, I wanted to focus on the play of starting with words and lettering as a means to communicate through visual design creation. Conceptually, I wanted to visually express a thoughtfulness in lettering forms and similar typographic considerations. After all, parts of my most basic design skillsets relied on both sketching and writing.

  • write
  • words
  • letter
  • line
  • draw
  • sketch
  • typed
  • cursive
  • script
  • iambic
  • flowing
  • design
  • structural
  • modular

Wordmark/Logotype Design Process Overview


Exploration Word & Letter Shapes

I like to start by looking at the overall shape of the words and individual letters to identify potential patterns of interest.


Structural Exploration Typographic Skeleton

Then I like to see how different fonts react and create different structures for the identified potential patterns.


Customization Lettering

Playing with the idea of writing and a signature, I tried alternate glyphs and weights to forms that met my brand needs.


Refinement Variations

Now that I had an identifiable name, I experimented with variation to find a complimentary subhead font.


Final Wordmark Logotype

The final design carries the brand idea through form through with the color direction.

Overall, the first brand principles carry through in a fluid, well-balanced design. This modular design grows to incorporate more transdisciplinary and transmedia elements when needed, while still representing an identifiable signature.

Blockquote Design

Designing a Pull Quote with CSS – Made by Mystie Personal Portfolio Website Design

As I was working on some blog posts and documenting my progress building out my rebrand identity and portfolio website, I realized the pull quotes needed some work. This opportunity gave me another chance to continue to add personal branded UI assets to the in-progress design system.

For this project, I wanted to take the standard HMTL blockquote used in my Phlox WordPress theme and use CSS and CSS Pseudo-elements to transform the text quotes into a contextually relevant and visually attractive pull quote. The quote would essentially pull attention in my case studies and blogs with some slight HTML markup. Additionally, I wanted to ensure semantically cited quotes.

I used CodePen to work out the relationships between the HTML and CSS by replicating some layout markup from my WordPress Elementor Text Editor. The simplified layout code included an h4 and h5 and a series of paragraph elements with replicated text from another post and two blockquote elements.

HTML Semantic Author Attribution

I had at least two artist attribution quotes to cite. Still, as I was researching blockquote best practices, I came across many articles that mentioned the cite tag should be used to reference creative work, and not the person responsible for the quote.

A blockquote is used in conjunction with a figure and figcaption to relate a quote to its attribution (WC3). So I wrapped both the blockquote and figcaption in figure<//code> tags for a more semantic read.

            <figure class="quote">
        <span class="low-highlight">
            Design is thinking made visual.
        —Saul Bass

HTML & CSS Low-highlight Effect

Since the blockquote is a block-level object, setting the background will set the color for the whole block. To create the inline highlight, I applied a span with a “low highlight” class to all the text within the blockquoteso that the blockquote remains a block element, but the inline content can have that highlighted style.

The trick to achieving the low-highlight effect is to use a gradient background. I set the background property with the linear-gradient value setting the angle to 180 degrees such that the “gradient” is vertical (top to bottom). The first, or top, color is set to transparent so that the background shows through, and for the second, or bottom, color, I chose the brand Broom (yellow) color to allude to the typical marker.

            /*low highlight*/
    background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #ffe91c 65%);
    display: inline;

CSS * Selector

Box model layout design

So that I can better see the relationship between all my elements, I like to select all of the elements and apply a thin cyan border to show the box model in action. I can comment out these rules afterwords.

            /*box model layout boxes*/
  border: 1px solid cyan;

CSS Pull Quote

Base blockquote style

To bring more of the brand style into the design, I targeted the blockquote with the blockquote selector. Then within the brackets, I first focused on the font and colorproperties.

For the font, I wanted to create some context from the UI sans-serif typefaces by using a slab-serif typewriter-style like the one used in the logo sub-head. Color-wise, I thought I could also add some warmth with the ballpoint-pen ink-like Diesel color.

I choose the Google Special Elite font because of its inked-up grungy and old-school analog flavor. A typewriter font style adds a hint of vintage in its retro nostalgia but also suggests a personal work ethic and developmental process, all of which aspects likened back to my brand.

  font: normal 1.8em/1.8em "Special Elite", serif;
  color: #230100;

Pseudo-element Quotations

I used CSS pseudo-elements to add more massive double quote marks to the beginning and end of the blockquote elements. According to CSS-tricks, pseudo-elements are the way modern browsers are handling quotations, so there is no risk of duplicates since new browsers will overwrite the default. Older browsers that still support pseudo-elements will always add them.


I, therefore, used the quotes property to specify the types of used quotes and indicated when added via the content: open-quote; and content: close-quote; rules. I included four values to the quotes property targeted in the blockquote selector: a set of double smart quotes, and a set of single, smart quotes. The first pair of quotes in the value are the opening and closing quotes. The second pair is for nested quotes.

[Note: In Elementor, the end quote was aligning as a block element, so I added a display property with a value of inline to the after pseudo-element of the blockquote selector.]

To add further contrast and appeal, I wanted to make the quote marks larger, and the Broom (yellow) brand color for added consistency. I targeted both pseudo-elements with one rule to which I applied a font-size property and a color property. I used the line-height and vertical-align properties to position the marks around the text better.

Hanging Punctuation

I wanted to extend the opening quotation mark so that the margins of the quote’s left-justified edge flushed and gave the appearance a more uniform vertical alignment.

In CSS, I did this by using a negative value on the text-indent property. I used a red border-left property to help with adjusting the spacing. Again, I can comment-out or delete when ready to publish.

  quotes: "“" "”" "‘" "’";
  font: normal 1.8em/1.8em "Special Elite", serif;
  color: #230100;
  text-indent: -1.9em;
/*   show text-indent */
  border-left: 2px solid red;

blockquote::before {
  content: open-quote;

blockquote::after {
  content: close-quote;
  display: inline;

blockquote::before, blockquote::after {
  font-size: 4em;
  color: #ffe91c;
  line-height: .1em;
  vertical-align: -.4em;

Author Attribution

I targeted the figcaption selector within the .quote class so that not every figcaption on the site would be styled the same way as a specific author attribution. Handwriting fonts are full of character and suitable for representing personal connection and as a way to stand out, enhancing flair and creatively.


LTR positioning hierarchy

The quote figcaption is secondary in the hierarchy to the blockquote text itself, so I wanted to denote that status within the design. Since my content is also in a language that flows left to right (ltr), I correctly aligned the author’s name to the right so that it read more like a signature or autograph.

Handwritten Type

Along with the idea of a name as a signature, I chose the Reenie Beanie Google font because of its legible ball-point pen handwriting in a playful and loose look, and because I was already using it as a secondary illustrative UI typeface in my case-studies. The Boulder (grey) color helps situate its relative importance by adding an average balance of tone.

            /*figcaption author attribute*/
.quote figcaption {
  width: 91%;
  font: normal 1.8em/1.3em "Reenie Beanie", sans-serif;
  color: #787878;
  text-align: right;

Figure Space

Looking at these two objects, I wanted to increase the likeliness that the entire figure would render as a whole form. I used the gestalt principle of proximity, wherein I grouped the blockquote and figcaption within the figure quote class to create a more significant association.


I decreased the figure’s width and added negative space on the top and bottom margin to bring the enclosed elements further closer together. They are most likely automatically paired in the viewer’s eyes.

            /* Figure */
    width: 65%;
    margin: 4em auto 4em auto;


The final set of rules were for devices with screen sizes under 768 pixels wide, such as tablets, and devices with screen sizes under 360 pixels wide, such as smartphones.

Media Queries for small screens

For smaller screens, the font-sizes decrease, and the text-indent needs adjusting. I also made some minor adjustments to the overall width to make the best use of the smaller display spaces.

            @media screen and (max-width: 768px){
    font: normal 1.3em/1.8em "Special Elite";
    text-indent: -1.5em;
  blockquote::before, blockquote::after {
    font-size: 3em;
      width: 100%;
  .quote figcaption {
    width: 88%;

@media screen and (max-width: 360px){
    font: normal 1.3em/1.8em "Special Elite";
    text-indent: -1.4em;
  blockquote::before, blockquote::after {
    font-size: 3em;
      width: 100%;
  .quote figcaption {
    width: 85%;