Jina Bolton

Jina Anne is a Senior Product Designer at Salesforce UX, working on the Salesforce Lightning Design System. She also loves Sass; she leads Team Sass Design, an open source task force that redesigned the Sass brand and website. Jina also organizes the San Francisco Sass Meet Up, The Mixin. She coauthored two books, Fancy Form Design and The Art & Science of CSS. Previously, she has worked with rad companies including Apple, Engine Yard, and Crush + Lovely.

License

Important: The texts published by Jina Bolton on the Pastry Box Project are released under the following license:

Copyright © Jina Anne 2015

This license overrides and takes precendence over the Pastry Box Project's default license.

Published Thoughts

Vision, Values, Methods, Obstacles, Measures

If you work in a company that is large like mine, you may be familiar with a formalized process to achieve alignment through goals and metrics. For us, our model to create alignment is called a V2MOM: Vision, Values, Methods, Obstacles, and Measures.

Every year, the company (via the CEO) will publish the V2MOM. Then the organizations (via the leadership) will publish and distribute their own, which are aligned with the company’s. Then teams (via managers) will publish their V2MOMs which are aligned with the organizations. And finally, individual contributors create their own goals, which are aligned with the team’s. These look like:

  • Vision

    What we want to do. This should be about 10–15 words.

  • Values

    What is most important about our vision. These are prioritized principles and that guide it.

  • Methods

    How we will get it. These are specific actions and steps to take. Again, this is in priority order.

  • Obstacles

    What may stand in your way. These are challenges and problems to overcome to achieve our vision.

  • Measures

    How we know we got it. These are usually quantifiable metrics. These are often linked to specific Methods.

We publish our goals on our work profiles, and we update them throughout the year. It’s a way to have transparency into what we’re all trying to achieve, and how we’re going to get there.

“…a clarified direction and focusing collective energy on the desired outcome eliminate the anxiety that is often present in times of change”
— Marc Benioff How to Create Alignment Within Your Company in Order to Succeed

In the last couple years, I learned that this isn’t just a model to use for your own personal job goals. You can use this on the major projects you’re working on. We used it while planning out our Design System. We are also using it to create our 2016 evangelism plan for our UX team. This is helpful for getting people aligned for a project across multiple teams.

2015 is coming to an end. A lot of people are thinking about their goals for the next year. Last year, my goal was simple. Do less speaking at events, and do more writing. I hit my goal — in 2014 I gave 18 talks and wrote 2 posts, while in 2015 I gave 16 talks and wrote 14 posts. But I don’t feel accomplished. I think it’s because I don’t really know why I set it. I just wanted to hit some metrics, but there was no vision or values behind why I was doing it.

This new year, I decided instead of a simple list of goals, I would write a personal V2MOM for myself. This way I have a more meaningful reason to hit these goals, and I have some measures that align to actual methods. Some of the goals here are redacted because they are very private and personal. But otherwise, here are my goals for 2016.

My Personal V2MOM

Vision

Be more organized, healthier, and more successful. Be a better person.

Values

  • Healthier me
  • Happy home
  • Success
  • Love my life
  • Peace of mind

Methods & Measures

  1. Better diet, exercise, & hygiene

    • Drink more water
    • Cut unhealthy foods
    • Use stand-up desk daily
    • Walk more
    • Go to the gym
    • Regular dental visits
    • Take care of nails & hair
  2. Take care of the house & those I live with

    • Keep home clean
    • Clean the litterbox every day
    • Do the dishes right away
    • Take out the trash
    • Make the living room into a more usable space
    • Hang out with the roommate
    • Play & cuddle with Zali more
  3. Do good work

    • Finish assigned tasks per week
    • Come to work earlier
    • Help out teammates more
  4. Be better with money

    • Pay off credit cards
    • Pay off a student loan
    • Save money for emergency fund
  5. Have a better social life

    • Throw a housewarming
    • Have a quarterly dinner party
    • Attend more meet ups
    • Go to more events like the Opera, Ballet, Symphony, and museums
    • Go on dates
  6. Do more good

    • Recycle and compost regularly
    • Donate 48 hours of my time to a non-profit
    • Stop using language that is sexist or ableist

Obstacles

  • Self-doubt
  • Over-committing to too many things
  • Temptation for unhealthy foods
  • Temptation for unnecessary spending
  • Procrastination, Laziness & Apathy
  • Being unorganized

For me, this is a pretty ambitious goal. If I don’t hit everything, I can move the goal to the following year. But as long as I’m making some sort of progress, I am okay with this. :)

My mother is born Asian (Korean to be exact). She looks Korean. And she was brought up in a Korean family, in Korea. Pretty darn Korean!

My father, however, is born an American citizen brought up in Chicago. His heritage is European — he is equal parts Italian, French, Irish, German. He and his brothers (from my observations) identify more with the Italian heritage than the other heritages. I assume it is because of what my grandmother told me: that her mother — the full-blood Italian — was a pretty strong figure in the family.

As for me? Well, as I have established in the prior two paragraphs, I am half-Korean, and half white. I was born an American citizen. I was brought up mostly by white people (since I do not know my mother or any of her side of the family). I definitely look Asian.

So how do people see me? Well… a few weeks ago, I conducted some Twitter Polls.

Here are the results from the polls. (If the embedded Tweets don’t show up for you, you can click through to see the poll results).

Based on the polls, it seems many people don’t see me Italian, German, French, Irish, or even more broadly — European. However, when it comes to race, whether I am white or not seems to be split a little more evenly.

So let’s see about my other side:

So… this is interesting. People are more likely to see me as Korean, Asian, or a person of color.

Now of course, there are a number of factors that most likely skew this poll:

  • the time of day that people filled out the poll could determine who is filling it out (what time zone? what country?)
  • how open a culture is accepting of me — from my own personal experience, I have found that some cultures are more accepting of mixed children being “one of them” than others.
  • the order in which I asked the questions — the polls expire after 24 hours and I asked them across the span of three days. After answering 5–6 of these questions, your perception may change but your previous answers are locked.
  • and, of course, I look Asian.

So… Where do I think I personally fall on this spectrum? Well, it’s complicated. When I am asked to fill out my race in a form, I tend to chose other. However, that is not always an option. So when I have to choose one, I choose Asian. Why? Because I look that way. But is that how I feel? No… yes… well… sometimes. I have faced discrimination from it. I don’t know. ¯\_(ツ)_/¯

So what is the point of this? When I conducted these surveys, I got some criticism and skeptical tweets — why was I doing this? What was I trying to say? Why do I care? Why should I let others define me?

Well the fact is, I wasn’t setting out for anyone else to define me. Honestly, it was just pure curiosity. And I think these results are pretty darn interesting.

At CSS Dev Conf, I was on a speaker panel where we answered questions from the audience. One of the attendees asked the speakers, “What is a skill or tool that you suck at?” I wasn’t able to answer the question because the microphone never got to me, unfortunately. But I’ll share it here.

Even though I was at a CSS-focused conference, my answer was going to be that I suck at CSS. This may come as a surprising answer to some people, especially as I’ve been talking and writing about CSS for 9 years.

Don’t get me wrong — I can still build a website or web application UI. I can still build a pretty, well-architected CSS framework and design system. But CSS has evolved and changed quite a bit and is now so much more capable and powerful — and now I am back in learning mode, again.

The list of newer CSS that I am clueless about is pretty massive. But my top three that I’m excited to learn are:

  1. Flex Box

    I only just started learning how to use Flex Box, as I’ve not been able to use it before at prior projects, due to browser compatibility. But we’re able to use it on my current project.

    I like it a lot. But there is still quite a bit about it that confuses me (like things that squish weirdly sometimes). I am making an effort to use Flex Box in all my new work I do, however, and hope that I’ll pick it up pretty well with time, just as I did with older layout techniques.

  2. Animations & Transitions

    These have been out for a while. But I’ve not really explored or played with these much. Now that motion and animation is gaining popularity in UI and CSS frameworks, I’m starting to dig into these as well.

  3. Blend Modes

    Blend modes look really cool. But I’ve not explored this yet. After seeing Una’s awesome CSSGram, I definitely am inspired and want to give it a whirl.

While I think I now suck at CSS (or the newer bits of it, anyway), I definitely still enjoy it and love working with it. It’s just time to up my game. :)

Clarity, Efficiency, Consistency, Beauty

A few months ago, I wrote about my experience and learnings with style guides and moving toward a living design system. I was excited to see that post get some traction as many other companies are facing the same problems and are solving them in very similar ways. It’s exciting to see all the super cool tools and guidelines people are building and sharing.

On Tuesday, we released the Beta of the Salesforce Lightning Design System. It is a rush to see how people are responding to it. Turns out, enterprise design is something a lot of people care about. Who knew? ;)

So, a couple things I learned while working on this:

  • Enterprise design is a challenge I didn’t know I would fall in love with (until now). The title of this post (Clarity, Efficiency, Consistency, Beauty) is a listing of our design principles. They are ordered in priority. This is key.
  • The way I write CSS for myself on small projects is very different from the way I write CSS for an enterprise framework that is scalable, platform-agnostic, and configurable.

I’ll write in more detail on these later. We will have a ton of posts at our team blog, where we will go into great detail of various aspects: motion, the grid system, the CSS framework, etc, from various talented contributors on this project.

I’m hoping that we get lots of feedback on the Design System, especially from people working in the enterprise design space. Let me know your thoughts on Twitter or send me an email.

Six Truths & a Lie

At work, we recently introduced some new interns to the team. As part of the introduction, the interns took turns playing Two Truths & a Lie, in which they shared (in no particular order) two facts and one lie about themselves and we would all try to guess what they are.

Looking back on some of the silly things I’ve done, I thought I’d give it a go myself. But instead of two truths and a lie, I’ll do 6 truths and a lie, just to make it interesting.

Only one of these stories about myself is not true.

  1. When I was 7 years old, my father decided to let me compete in a beauty pageant. His friends helped me get dressed, did my makeup and hair, and taught me how to do pageant-style walks and turns. I didn’t have nice shoes, so I borrowed some shoes that were way too big for me and they flopped as I walked.

    At one point while I was on stage, my dad’s friend tried to signal to me that I was not doing the correct stance. I couldn’t hear her and yelled to her from the stage, “What?!?!?!” and everyone laughed.

    When they realized that I was also supposed to do a walk in casual clothes — which I didn’t have with me — they had me put on another girl’s sweaty gym clothes she had just worn to do a talent routine in.

    Somehow I still won trophies and gifts, but my dad later revealed that it was because I was the only contestant in my age group.

  2. When I was 12, I made $50 a week babysitting three children (one girl and her two younger brothers) who belonged to a family from church.

    One time while I was there, I started my very first period. Freaked out, I called their mother. She told me where her pads were in her bathroom.

    I was so worried I would make a mess, I sat on a pile of newspapers, so I wouldn’t mess up their nice furniture. The little girl asked me why. I told her, “Um. You’ll understand someday.”

    Looking back, I realize I probably accidentally scared her.

  3. I rarely got in trouble during grade school, but the two times I was suspended were because a) I cussed out the principal and b) I got in a fist fight with a freshman girl.

    The first time, my dad had me write sentences a thousand times apologizing for what I did and hand it to the principal.

    The second time, my dad wasn’t as angry with me because my fighting was in self-defense (she had attacked me) so I spent my time just resting and listening to calming music.

  4. When I was in art school, I spent a lot of time hanging out with bands and other people in the music industry, largely because I made band websites as a freelancer to help pay my way through college.

    During this time, I met a famous new-metal band who had songs on MTV, and their most famous song was used in car commercials and movie trailers.

    I went on a date with the drummer.

  5. When I was about 10 years old, my teacher decided to put up a chart with all our names on it with 4 boxes to the right. She said that if we got in trouble for anything, she would give us a check. At the end of the week, she would have a pizza party. If you had 4 check marks, you would not get to go.

    Unfortunately, I had gotten in trouble for talking and drawing on my desk a few times and received all 4 check marks. At the end of the week, she gave the two boys and me (the only recipients of 4 check marks) a choice. She said that we could either choose to get a paddling, or not go to the pizza party. (This is back when paddling in schools was allowed if the school had permission from your parents).

    I really wanted to go to the pizza party, so I told the teacher I would prefer the paddling. She gave me one soft, swift pat on the butt with the paddle and told me, “You’re braver than the boys. They chose not to have the pizza party. Go on, have fun.” It didn’t hurt at all.

    I got to enjoy the pizza with my fellow classmates as the two boys sat a couple tables over with jealous looks on their faces.

  6. When I was 15, I went to a school dance and was standing by the wall like a wallflower. A boy I had a crush on asked the girl next to me if she wanted to dance. I was devastated and was about to start crying. But when I saw she was a terrible dancer, I couldn’t help but feel better about the situation.

    Another boy ended up asking me to dance instead. At first, I was reluctant to go with him, because I didn’t want the other boy to see me dancing with someone else. But I realized that a) he didn’t choose me so why should I care and b) I decided it was better than standing by the wall the whole time. So I went out and danced with him and actually ended up having a really good time.

  7. I won first place in a science fair in fourth grade for growing avocados through the hydroponic method of putting toothpicks in the pit and setting it in a glass of water. Though when I say I won it, I should really say that my dad won it, as he did most of the work.

So which one do you think is a lie? :)

Notes from Movement

Last month, I went to Movement, Detroit’s EDM festival. This was my first time traveling to a music festival. It was also my first EDM festival. I went with a group of friends. Here are some random things I learned or observed during this experience.

  • Don’t do Will Call. You’ll end up in an angry mob for hours (and that’s even if you rudely push through people).
  • Look up. There’s probably a drone camera above you.
  • Red Bull & Tito’s are the go-to drink for young ravers.
  • It’s all about the camelbaks, hacky sacks, and fanny packs.
  • You’re not sparkly enough. Put on more glitter, flash tattoos, and wear shiny metallic disco clothes. No, no. You’re still not sparkly enough.
  • Bask in the glory that is Grandma Techno. She is awesome!
  • My friends had fun at Club Toilet. I, on the other hand, went to a different Club Toilet. (I got food poisoning).
  • Don’t eat at Mike’s Kabob Grille.
  • Do eat at Slow’s to Go. It’s delicious.
  • Taxi’s try to rip you off, especially if they know you’re in town for the festival. Uber is cheap here.
  • If a man tries to force you into dancing with him (even grabbing you), it’s okay to stand up to him and push him away.
  • Squarepusher is sooooooo intensely amazing music-wise, but beware his almost seizure-inducing visualizations which gave me a bad headache.
  • Don’t expect a quiet hotel when you go back to sleep. People next door will be keeping the rave going in their rooms.
  • My friends watch some terrible “reality” shows when they're recovering.
  • “TECHNO RULES!!!” (as shouted to me by a passerby when he saw me in my Batman jersey).
  • Boots and cats, boots and cats, boots and cats…

Persist! Resist!

In my early 20s, I was asked to speak at my first conference in 2007. I would have to figure out travel and accommodations, as it wasn’t offered to me. I also wasn’t sure what I would say that would be of interest. But I was excited to speak at my first conference, so I immediately asked my boss at Apple if I could go. Technically, I wasn’t supposed to be speaking at conferences without PR approval — and from what I’m told, PR approval is rejected almost immediately unless you were at the top of the org chart. But since I wasn’t going to be talking about my work at Apple, he gave me the okay and even approved my travel expenses. I’m super grateful and thankful to him for encouraging me at the beginning.

I still needed to figure out what to talk about. At that time, “listicles” were on the rise. Top 10 lists gained all the attention on Twitter & RSS feeds. So after talking to a few friends who had spoken at conferences before, I decided to give what I thought were top 10 tips for CSS workflow. Unfortunately, I took some very bad advice from a friend who had spoken at many conferences already. “Sex sells,” he said. So I designed my slides to look like a Cosmopolitan magazine cover, and mimicked how they have their usual sex tips. I called my talk, “Creating Sexy Stylesheets.”

This was almost a decade before Code of Conducts became prevalent. Looking back, I am embarrassed that I went for such a cheap, and easy approach. But I learned a lot from it and have grown a lot since then. But back to the story…

The Mistakes

During the conference, I noticed all the guys wearing t-shirts and jeans, so I followed suit (no pun intended). As the only female speaker, I thought this would let me fit in with everyone else. Besides, this was basically what I wore all the time, no big deal. Plus, I wanted to sport my friend’s shirt for his website that he had designed. Unfortunately, I was not wearing a padded bra. That shouldn’t seem like much of a big deal, but it turns out that a regular un-padded bra sometimes doesn’t conceal enough combined with an American Apparel shirt, especially when bright lights are on.

I brought an Apple remote, which I found out is a terrible tool for presentations. As I walked around and spoke, I would then attempt to advance my slides and nothing would happen. I would try again, and still nothing. Then suddenly 20 slides would go by at once. What a disaster.

The Feedback

I learned that sometimes it is best to not check what people have written about you after you give a presentation. Some dude wrote a blog post and ranted for many paragraphs about how terrible he thought I was, and then went into detail about what I wore. He claimed I didn’t practice (which was not true — I was just really so nervous). He said I had dressed unprofessionally and was too revealing (mind you, it wasn’t skin he saw — it was just the shape that unpadded bras don’t do a good enough job of concealing). And he said I was the worst speaker at the conference.

Another dude wrote one short review:

“Notes: Nothing particularly new or interesting here if you’re proficient with CSS techniques and formatting.”

And more negative posts and tweets hit my feed. I was so humiliated. Granted, I don’t know how many people saw these posts. I only saw them because I was subscribed to my name on Google’s Blog Search service they had back then. But I was incredibly hurt and discouraged. I felt like a failure and an imposter. Why should I be on stage at all?

I thought that maybe speaking wasn’t for me.

Keep Going

I am very grateful for my friends and my fellow teammates I was working with at Apple at the time. They pushed me and encouraged me to keep going. I accepted my second speaking engagement at An Event Apart. I was so excited to meet Jeffrey Zeldman and I couldn’t believe he had invited me in the first place!

About 20 minutes before I went on, I was crouched in the corner, beet red, and shaking. I was approached by Jared Spool who was so nice and encouraging. He told me he had given over 200 talks (and this was still in 2007, so imagine how many he has done now!) and that he still gets nervous every time. I couldn’t believe what I was hearing. Even Jared gets nervous? He told me, “I just pound 2 red bulls, channel that energy into excitement!” He made me laugh.

I was to go on second, following Doug Bowman. Shortly before going on stage, Jeffrey came up to me to shake my hand. I admitted to him that I was very nervous, and that this was only my second time speaking. He immediately hugged me and told me, “Wow! I am so honored to be introducing you at the beginning of your speaking career!” This was exactly what I needed to hear and I will never forget that.

I decided to talk about graphic design principles applied to Interfaces. Admittedly, I still didn’t quite nail it this second time either, as I received some very harsh criticisms. “Jina should just stick to code, which is what she’s known for” (which was surprising to me as I went to Art School and was a designer by profession).

But personally, I felt I did much better that time than the first time, and I felt the rush of getting to share what I had learned with others. So I didn’t let that stop me. I kept going.

When I switched teams at Apple, I realized that speaking at conferences wasn’t going to be as easy. I did get to do a couple more, but eventually I was asked to stop. So I left. But I still am very grateful for the opportunities they gave me. I am even more grateful that every company I have worked at since then has encouraged me to get out there, to talk about my work, and to share what I know. Some even pay for it when the conference can’t do so.

Every talk I’ve given has pushed me to getting a little bit better than the last time. And I’ve learned a ton of lessons along the way. I do still get nervous. Very much so. And I still don’t think I nail it every time. But what matters is I keep getting better. And I dress a little better, too. ;)

Since my first talk, I’ve given 63 talks across at least 12 different countries and I have some gigs lined up for later this year. I am so glad I didn’t give up right at the beginning. I don’t say this to brag. I just want to tell my story to help those who might get discouraged early. Persist and keep going. Resist giving up due to negative feedback. It will be worth it.

Modeling School

When I was fifteen, I received a postcard in the mail from a popular modeling school. It invited me to a local audition. At the time, I was only semi-interested in modeling, but I was very interested in acting, which they offered classes for. I begged my dad to take me. It was probably the girliest thing I ever wanted to do when I was that age.

We went to the audition which was held in a hotel conference room. I interviewed with the owner of the franchise. She asked me about any previous acting or modeling history. I told her about the local after-school reality show I used to be on when I lived in Arkansas. She looked at my hair and my hands. I was too short for runway modeling, but she said I had a lot of potential for character modeling or acting. She wanted me in.

The total for all the classes and supplies would cost $3,000. My dad & I didn’t have $3,000. I became visibly dejected. After some thought, the owner offered me a work study agreement. I could work for her to work off the tuition, and then I was able to attend. I gratefully accepted and began classes right away.

The school was held in a very old victorian-style home that had been converted into the business. There was the front lobby, which either led to the back where the runway stage and makeup room was, or up the stairs to some offices and additional class rooms.

I was taught a lot of things that I still think about today. A few of those include:

  • I learned about standing and walking posture. Put your shoulders back, your, chest up, stand up straight! Pretend a string in the core of your head is pulling upward as you walk forward. Practice walking up and down stairs with a book on your head. Don’t let it fall.
  • I learned how to sit. Cross your legs at the ankles, not your thighs. It does a better job at protecting “the view” from being seen if you have a skirt on. It also helps avoid varicose veins.
  • I learned about table etiquette (though I pretty much forgot most of it). I do remember how absurd I felt when I was told I was supposed to pinch off some bread and dab some butter on it.
  • I learned how to walk a runway even though my height didn’t qualify me for it. Walk forward, foot in front of the other. Always look forward.
  • I was taught grooming and makeup tips (so many things I was totally new to, since I grew up with no mother or sisters).
  • I even had to try freeze modeling. When you’re told you can’t move your body for long periods of time, suddenly everything gets itchy.

For my work study, I had my own office on the first floor, past the runway stage room, near the restroom. It was very tall with high ceilings, but it felt claustrophobic nonetheless. I would have to cold-call leads (other girls and the occasional boy) to talk to them about their interest in modeling or acting, and then talk to their parents about booking them for an upcoming audition.

It was mentally draining. This brought me back to the stresses of my terrible telemarketing job I had before. Lots of parents were not only mad at me for calling, but I could even hear the parents get angry with the poor lead for even entertaining such an idea.

I was only “paid” if the lead successfully booked and attended the audition. Of course, I wasn’t ever really paid. It was all just going toward the debt. As you can imagine, with “no” after “no” after “no” after “no” after “don’t ever f…ing call my daughter again!” — it seemed I would never pay off the debt.

At some point, I was moved out into the lobby to do my work there. I was now also a receptionist. So now I had more tasks that didn’t even earn commission, like accepting guests, putting stamps on the post cards (the same one I had received), and answering the phone. Then I was also given tasks like reorganizing the makeup counters or acting as a teacher’s assistant. None of these tasks were helping me pay off my debt. They only distracted from it. But I found the business side of modeling schools fascinating, so I did it anyway. I suppose I thought of myself as an apprentice of sorts. It did feel like she was training me to run a modeling school, rather than training me on actually modeling.

One day, one of the staff members said “come see this!” and I followed her past the offices and found a small room with a kitchen and a sofa bed. I was shocked. It looked really cramped and disheveled. The owner had always seemed so glamorous to me, and I assumed she lived in a white marble mansion somewhere. Now I realized that this was not really the case. She was squatting here with her boyfriend. And it was a wreck.

I kept this information quiet for some time, but eventually the owner ended up confiding in me that she lived there. She said it was temporary. She even invited me in her living space to watch television while putting more stamps on post cards (she had a huge stack of thousands of post cards). I asked her how she got the leads’ names and addresses, and she changed the subject. I then asked her how I was supposed to work off the tuition if I wasn’t working through the call list, and she changed the subject again.

Over the course of the year, the owner grew more and more harsh with me, and became verbally abusive. She told me I would never make it in the modeling industry. She even started accusing me of stealing makeup. (As it turns out, it was the staff member who had revealed to me about the owner’s living situation).

The owner also kept demanding more and more hours from me (much more than should have been expected of a 15 year old girl) and none of these hours of work amounted to working toward my debt. It was basically free labor. I started to feel like a slave.

My dad was friends with an attorney. She was also half-Korean like me, so she began to spend some time with me. She took a special interest in my situation because she knew it had me crying and angry so much. She wrote a check for the remaining amount along with a stern letter to them, saying they should have considered my debt paid long ago (after all the hard work I had done for almost a year). I no longer had a debt to work off. I was so relieved. And I stopped coming in to work.

The last scheduled class involved a photoshoot to create a portfolio of head shots and full body poses, and the sets were in three different outfits. I arrived with my bag of clothes and makeup, very excited to get my photos taken.

The owner saw me come in and said, “Oh no, nuh uh! No way. Don’t even think about it!” I started crying in front of all the other girls, and the attorney who was with me said something quietly to her. Suddenly I was allowed to do the shoot. I wiped my tears, fixed my makeup, and got my photos taken. I ordered my selected headshot, and I hugged a lot of the girls that I had been attending the school with. This was the end of a long year. I was going to graduate a modeling school!

Blurry photo of the contact sheet. The faint red outline seen on the fourth photo down on the right most column was the chosen shot.

A couple days later, I came to the school to pick up my certificate that I had worked so hard for. I rang the doorbell.

No answer.

I knocked loudly.

No answer.

I walked over to the window and peered in.

No one was there.

The owner was gone.

The furniture was gone.

No…

Another woman pulled up in her car, and went to the door and rang the doorbell. I told her what I had discovered. The woman scowled. “You’ve gotta be f…ing kidding me. I’m calling the Better Business Bureau!”

I slowly walked back to my dad’s car, sobbing. I felt so defeated. I was scammed.

After all the hard work and tears I realized that it was all for nothing. I never got my certificate. I never graduated.


By the way, I do not think all modeling schools are scams. And I learned a ton from going to that school. But this woman and her boyfriend… yeah, I guess they were.


A couple years later, I decided to do something very unlike myself. I had never gone to dances, or done anything that the popular kids did. But it was my last year of school, so I decided to give it a shot: I ran for homecoming during my senior year of high school. A woman who had won the title, “Miss Nashville”, began working at our school, to help out with the dance and cheerleading teams. She ran the homecoming competition like a Miss America pageant. We had a talent portion, a dance number (how embarrassing), a speech, and of course the pageantry. There was one part where we had to wear a dress and walk down a runway to Madonna’s Vogue. I decided I would show off one of the runway moves I had learned.

When it was my turn to walk, I walked down the runway, one foot in front of the other, in a perfectly straight line. Eyes forward. Get to the end of the runway, stop, and in one move, clasp my hands behind my back and widen feet out into the “straddle stance” — then while continuing to look forward begin walking backwards for three paces, then pivot and walk the rest of the way back. And as I did this, the three paces landed right on the lyrics “vogue… vogue… vogue…” — it could not have been better timed. Everyone jumped up and cheered. I think they thought it was planned.

I didn’t win Homecoming Queen, but I did win Senior Court. That was good enough for me.

In Search of a Living Design System

Over the years, the web has evolved from simple websites to hosting an increasing amount of rich web applications. Designers and developers have learned from this shift to think less about designing pages and more about designing systems. From frameworks, CSS pre-processors, and automation tools to living style guides and UI libraries, we are creating an increasing amount of tools, workflows, and processes to make designing, developing, and deploying web applications easier.

“It used to be that designers made an object and walked away. Today the emphasis must shift to designing the entire life cycle.”

—Paul Saffo

Style Guides

One of my favorite tools of any project I work on is the style guide. My first style guide was a guide I helped create for a web design project I was a part of during my internship at Oden Marketing & Design. I had not heard of style guides until then, and I was intrigued. I liked the idea of having to think about a design in pieces, and then also think about it as a whole. We documented the brand identity, type, and color standards, as well as the layout grids and CSS syntax.

However, the entire process proved to be quite tedious and overwhelming. It was in a PDF format, which I quickly learned is a pain to keep maintained.

Online Style Guides

Fast-forward to 2007, I was working on a style guide for the Apple Online Store. This style guide was built on WordPress, which I figured would be way easier than reflowing a PDF document. HTML flows on its own, so it definitely helped in that regard. It also made things more collaborative since anyone could sign in to add to the guide and help keep it updated. I spent a ton of time building it out to be well-documented and I tinkered a lot with print style sheets, because I believed that people might actually want to print it out.

Something I found very helpful during this project was to have your ideal CSS architecture and organization documented before you do any refactoring. This gives you a goal to work toward. At the time I worked there, the Apple Online Store was the most complex CSS Architecture I’d encountered. You had the very well-known consumer-focused US store. Then you had all the variations on that store for different regions of the world and various countries and languages. Then you also had all the stores focused on education or business-to-business. This is a lot to try to refactor and have in your head. Documenting your idealized architecture, and working out how variations, translations, and overrides will work into the structure, will give you a sense of direction as you iteratively refactor and document.

I was so excited about this project that it led me to write Writing an Interface Style Guide (A List Apart, 2008) based on how I approached things back then. In this article, the key points discussed were:

  • Design & Brand Standards
  • Front-end Development Standards
  • Keeping Style Guides Current and Useful

“Current and Useful” — that’s the most important thing to take away. However, over time I realized that no one ever really took the time to update this style guide built in WordPress except me, so it became a task that grew to be less helpful and at times only got in the way. Lessons learned…

Living Style Guides

Before I started my job at Engine Yard, I had never used or seen their application, AppCloud. So when I started my new job there, I needed to learn how the app worked and looked and how things were organized. The first task I took on was to refactor the CSS (which was using Sass) and create a style guide.

I was brand-spanking new to Sass. I was pretty cocky at the time and figured I write CSS pretty well, so I wasn’t thrilled about this initially. However, after using it in about two weeks I realized I’d become so used to it that I found myself accidentally writing Sass when just writing vanilla CSS for other sites. Being able to use things like variables, mixins, and functions made writing and refactoring CSS for a large-scale application much more maintainable. I realized I was falling in love with Sass and now I can’t stop talking about it!

For the style guide, I built it inside the app itself, so it used the same front-end code base it described. It was an area of the application that only we had access to internally (the company had decided not to release the style guide to the public). There I displayed our icon set, our various typography settings, our color palette, and various UI elements like buttons and form elements.

This led to my “zomg!” moment. I realized that Sass + Style Guides = Awesome. I no longer needed to update color swatches when colors changed because it used the same variables — so swatches would already change automatically. It became a sandbox for new components and elements. I’d design in the browser from within the style guide itself, and document it in place. This I found would kill 2 birds with 1 stone (create the new object and already have it documented in the style guide). Then there’s no waiting until later (which never happens). It also became a quality assurance test; if it was broken in the style guide, it’s most likely broken in the app since it’s all the same code. Anytime I refactor something, I check the style guide to make sure everything’s still working & looking the way they’re supposed to.

I wrote a post for Engine Yard’s blog about the process and began speaking about it at conferences (an attendee at my talk at Madison Ruby 2011 even referred to this as “Style Guide-Driven Development”)!

I soon was excited to find out that I wasn’t the only one that had this “zomg!” moment — so many people are also creating beautiful Living Style Guides and putting them online. Some of my favorites:

There are also a ton of tools out there now to make this process easier and maintainable. You can even read a few other articles on A List Apart about them, such as Creating Style Guides and Getting Started with Pattern Libraries.

A common question I’ve received at conferences is, “How do you find time to work on a style guide?” — which is a very valid question. I’ve worked with many projects in which the style guide was an after thought, or something saved for later. I think the more automated you get and the more integrated into your workflow the style guide becomes, the more useful it will be — and it can actually be quite fun.

Automation is the key word here. There have been quite a few tools I’ve seen released over the last few years that automate the style guide documentation process. Some require you to hand number your comments to go into hand-numbered sections and some simply output CSS comments (usually written in Markdown in your CSS files) in the order it is compiled. These are all pretty great. And tools like Grunt or Gulp can take things even further.

Even Better Living Style Guides

A couple years ago at SassConf, we launched the new redesign of the Sass website. One of our objectives was to open source the web site so that anyone could contribute. As I was building out the beginnings of the Style Guide, I was concerned about maintainability. If someone designed something that required a new color, would they remember to update the style guide to reflect that? I wanted to keep things as DRY as possible.

For design properties, such as type sizes, typefaces, or colors, you have to have markup in the style guide to display an example. You also have CSS to style that example. And if you’re using a CSS preprocessor (Sass, of course, in our case), you also need variables for that design property. That’s at least three places you need to write it. I didn’t want to assume that collaborators would always know to do all that. So how do we automate this?

The website was built on Middleman, which is a static site generator built on Ruby, and it gives you a lot of the tools typical in a Ruby on Rails app. So you get Sass, Haml, Markdown, Ruby gems, and you even get a way of tapping into data via JSON or YAML.

I decided to store my name & value pairs for my design attributes in YAML files. My style guide web pages then simply looped over this one central location of colors, typefaces, sizes, etc. This meant when a new color is added, the swatch is automatically drawn with the name and the value. For my styles, I got sneaky and added an .erb extension to my .scss files. This meant it’d still compile as Sass, but now I could actually use Ruby, too.

So now, using the same technique of looping through to create markup, I now looped through my data to create my variables as well as the CSS required to style the examples. This allowed us to have a single source of truth. You can check out the code in the website repository to see how this was done.

Living Design Systems

When I worked at Do.com (back when it was a start up by Salesforce, and not the company that it is now), I was working on a style guide for the marketing website as well as the web app. Since both lived in the same Ruby on Rails codebase, this got me thinking about shared components. We even documented code syntax preferences (single line, multi-line, tabs vs. spaces, etc.) to make sure everyone was on the same page. Currently, there are efforts such as EditorConfig to help try to make this easier.

While working on this style guide, I really got into a modular mindset. Organize your UI libraries in small elements, then work your way out toward larger components, and then layouts. This will help keep things documented once (you can refer to the smaller or related pieces).

It’s also very important to show all objects’ associated types, variants, and states. If you aren’t explicit in the way an object’s hover states, touch states, open or closed states, etc., then chances are they will be overlooked and not built.

On the web side of things, things were pretty rad. However, I also needed to document our design for the iOS and Android app. This is where things were not so rad. I had a convoluted workflow of saving out multiple images (design comps and redline specs) to a Dropbox folder, and linking to those images from the mobile apps’ GitHub repository wikis. This led to sad times.

I can tell you one of the biggest lessons I learned from this experience is don’t try to document everything at once. If you try to get everything all in one go, you’ll likely get overwhelmed and may even abandon the effort altogether. Instead, document things going forward, iteratively, as you create or refactor things. I’ve found that working in iterations, you’ll be more thorough and have better clarity, because you’re more focused and not trying to cover too many things all at once.

Something that became incredibly important for us was to add tools for rapid development. We had CSS gradient overlays we used to display baseline and vertical grids that only appeared toggled in development. We also had iframes set at various sizes to help us with rapid responsive debugging. You would pass in a page of the app into the URL and all the iframes would change what page they displayed — and it’s even cooler if paired with an auto-refreshing mechanism, like LiveReload.

After my experience at Do.com, I moved over to join the Salesforce1 Design Systems team, which is a core Salesforce UX team focused on creating patterns, design systems, and tools to help keep the various products and features aligned across a very large-scale enterprise company. Honestly, I joined this team because I saw their product style guide and fell in love with it.

We use an automated system similar to StyleDocco in that it outputs components in the style guide based on markup written as comments in the Sass files. Our style guide also serves as a foundation for our prototypes that we build in the browser. During prototyping, we’re able to pass in new attributes such as a label for a button.

Similar to Do.com, we also have to consider native iOS and Android. I asked Sönke Rohde, the super talented UX Engineer I work with, if we could do something similar to what was done for the Sass website, but extend it to native mobile. I was amazed that he basically built the first version of it in about a day, and now we’re actually using it across the company. This open source tool is called Theo, which uses JSON to store design properties as name, value, category, and a usage comment in one central location, and it then generates variables for Sass, LESS, and Stylus. It also generates the Aura tokens (Salesforce’s own open source web framework we use internally for our production web application). And it even outputs the JSON and XML needed specifically for theming native ios and Android.

We built this system to be agnostic so that designers and developers can choose what works best for them (Sass, LESS, Stylus, Angular, React, etc). This enables us to have a design system that is timeless with today’s shifting landscape in technology. And by staying agnostic, when we update Theo, we have minimal impact to the designer or developer’s workflow.

We now have a true Single Source of Truth for our theme tokens which can be used by a wide variety of platform and devices. We also have an internal repository of assets (like icons and fonts) that we keep updated in one place. The style guide pulls from this to display all the icons in our style guide.

All of this is leading to better collaboration across our many teams, and better alignment. Because the work we are doing has expanded beyond the web and beyond a simple style guide, Sönke coined the phrase Living Design System to better describe what we’re creating — I think it has a good ring to it, so I’m going with it. Sönke wrote about it in more detail in his article.

I would really like to know what you’re doing on your team if you have better ideas or similar experiences. So please share so we can all learn! Remember, keep your documentation current and useful!

“Be regular and orderly in your life so that you may be violent and original in your work.”

—Gustave Flaubert

So, I don’t know my mother. It’s not very often that you hear this. But it’s true.

I also do not know anyone on her side of the family. My parents divorced when I was three years old. When my father got custody, he did not keep in touch with her (which meant she wasn’t a part of our lives at all).

Sometimes when I tell people this, they get a very sad look on their face and say, “Oh, I’m so sorry.” But there’s no need to be sorry. I’m not sad about it. It’s just the way life is for me.

I know her name is Min. I know what she looked like when I was a baby, through photos I stole from the trash can and kept. I have a very fuzzy, vague memory of her. It’s actually not even a memory of her. It’s a memory of a dream of her. She was standing over me, handing me a frozen popsicle, but I was unable to grab it because my hand kept going through it. Not sure what that means.

Sometimes people ask me if I would ever try to find her. I’ve definitely thought about it. It’s weird knowing there is a woman somewhere out there that I’m connected to biologically, but don’t know. And I do wonder sometimes if she thinks about me. Her contact information would be pretty easy to find, as she has a public record for when she was paying child support.

About ten years ago, a friend asked me if they could film a documentary about finding my mother. I declined their offer because I wasn’t 100% sure that was something I would want to do. If it all went south, then I’d be filmed going through some pretty emotional stuff. That doesn’t seem very appealing.

When I consider it, I think it’s very likely it could go south. I hear stories of how she was not a good mother, how she chose a life of partying over taking care of my brother and me, how she didn’t really seem to love me, how my brother had gotten really sick and she didn’t visit him in the hospital. If all of that is the case, then why would she be interested in having me in her life now? And yes, I’m only getting one side of the story. But I feel that if she wanted to have me in her life, she’d have reached out to me by now. I’m super easy to find.

She’s interesting to think about, though, when it comes to thinking about me, and who I am. If she had been in my life, I would have had to learn sign language — in Korean and English, I imagine. I also wonder about my preferences and personality, since there’s the whole growing up with out any female influence. I also had no sisters.

I was regularly given dolls by my family, and my room was decorated in pink. Oh, how jealous I was of my brother’s Batman action figures and comic books, and watching my father and my brother put model cars together. I was never given one myself. I did get a few comics though: Barbie comics. They were pretty terrible. I spent a lot of time watching Batman, Spider-Man, X-Men, Power Rangers, and other action shows after school. So I was so happy when I got my first Power Ranger toy. Of course it was the Pink Ranger. I was okay with that.

When I became a teenager, I began to gain control of my own room decor and the gifts I received. I decorated my room in dark blues, blacks, greens, and the walls were covered in planets, the ceiling covered in glow-in-the-dark stars, and I had a rocket-shaped lava lamp, and a black light. Wow, I was so into the 90s hippie resurgence.

I had stopped playing with toys. I turned my attention to rock music, playing cards, theatre, and had a stronger focus on arts & crafts. I wonder how much of that would be different if I had women in my home? Would I have different interests? Different hobbies? Different tastes?

You know, it could have been nice having a woman in my home to talk to about relationships, growing up, and becoming a woman. Puberty surely could have been a lot less awkward. Let’s not talk about how that conversation went. Let’s just say it was incredibly embarrassing.

I wonder if my relationships with friends at school might have been different; my friends were usually boys. When I was in my senior year, I did a lot of thinking about the person I was and who I wanted to be, especially as I was going to be leaving for college soon. I noticed in myself that I had a subconscious bias toward women — I realized that I didn’t really trust them. This was startling to me. I had suddenly realized that my thoughts toward my mother had affected my ability to have meaningful relationships with other women. I wanted to change this. At about that time, I was chosen to give a guest sermon in the youth group at the church I was attending. After a lot of personal reflection on this, I decided to make a change within myself. I gave my guest sermon on forgiveness, and talked about her, the way I thought about her, and how my first step in forgiving her would be a way for me to become a better person and have better relationships with women.

Fast forward to my senior year in art college — I decided to do my senior final project on her. I created a triptych and a three-part book. I used three as a theme since I was that age when the divorce happened. I also figured there are three communication barriers with her. I don’t know Korean — though it’s very likely she’s learned English by now — and of course speaking & hearing. Oh yeah, did I mention that she’s deaf? The artwork was created and written for her, though I knew she’d never see it. It was sort of like writing a message in a bottle and throwing it out to sea. It was a way for me to say what I needed to say and then move on. The only difference is all my fellow students, college staff, and my father saw it. My professor cried. That was awkward.

My father asked me for my final project work, since it was my final college project. I didn’t want to give it to him because it was a very personal project for me; I couldn’t help but think it’d be a little weird for him to have artwork on his walls that’s specifically about her. Though now it’s sitting in my closet, seen by no one. That’s okay. It served it’s purpose.

So now here I am, almost a decade later. I still love Batman. I find myself liking the things I see in men’s shops more than most women’s shops. (Gender-neutral things are better). I still have a ton of guy friends… but I’ve also made a lot of meaningful relationships with women. I’m a lot more open and trusting now. And as I’ve learned that gender is a non-binary spectrum, I realize it really doesn’t matter at all if I grew up without a mother. I’ve become my own woman (who likes boy things) in my own way. And I like it this way.