The Devastating Truth About White Tigers: Changing Design Direction Mid-Project

When I was babysmall enrolled in an Infographics class taught by Terence Oliver at the UNC School of Media and Journalism, I wanted to make my final illustration-based infographic about white tigers. They’re cute, stunningly beautiful, and very rare, making them even more interesting.
 

I eagerly looked at photos of white tiger cubs online, obsessed with their soft fur and bright blue eyes. They were the perfect combination of regal tigers and adorable kittens. I imagined the illustration I would make for this infographic: two cuddly white tiger clubs playing, their little paws up in the air, their mouths open in what would almost look like a smile… I couldn’t wait to get started.
 

Before starting research, I decided to do some preliminary research. I wanted information about what the tigers ate, where they were most common, why their fur was white, and how they were different from other tigers.
 

However, as I did more research, I noticed something troubling. All the sources I found about white tigers did not talk about how cute they were or what their favorite food was. Instead, I was finding quotes like this:

  • “The ONLY way to produce a tiger or lion with a white coat is through inbreeding brother to sister or father to daughter; generation after generation after generation.”

  • “The kind of severe inbreeding that is required to produce the mutation of a white coat also causes a number of other defects in these big cats.”

  • “Breeders of white tigers do not contribute to any species survival plan. They are breeding for money.”

 

I then tiger_downsynrealized that my dream of creating a cute, non-controversial infographic about white tiger cubs was not going to happen. Instead of reading about how tiger cubs like to play, I found myself reading about Kenny, the white tiger who was born with with Down Syndrome and physical deformities as a result of forced inbreeding.
 

Ignoring the huge problems in the breeding industry would be unethical. White tigers do not exist naturally and are inbred for profit because of our fascination with their beauty. Creating an infographic celebrating their beauty would only further perpetuate this problem. I knew it was my duty to tell the truth about these tigers, so I decided to make that the focus of my infographic.
 
It was time to completely change my creative direction.
 

I created an illustration of Kenny, the white tiger with Down Syndrome, and used the text in the infographic to discuss the problems with the breeding industry. Based on the research I did, I found four main problems with the white tiger industry:

  • White tigers are bred solely for captivity.

  • They wouldn’t survive in the wild- their white coats provide a significant disadvantage, making camouflaging and hiding nearly impossible.

  • The inbreeding leads to severe health problems.

  • While breeders talk about conservation, the real reason to breed these animals is financial. Because of the high demand and low supply of white tigers, the breeding industry is extremely profitable, even though many tigers cannot be sold because of their physical deformities.

 

Based on those four points, I divided the infographic up into four section, using a large illustration of Kenny to draw the viewer in. I added a faded chain link fence over Kenny to reinforce that these animals are only bred for captivity as sources of revenue.
 

Check out my infographic below to see the final product. Despite the unexpected change in direction midway through the project, I am glad that I was able to advocate for such a troublesome issue and create a piece with more meaning than “look at how cute these cubs are!” Especially since the popularity of those cubs is the reason this horrible industry is staying in business.

Inbred_Small

View Full Size Infographic

Why Designing for Mobile Devices Is Like Eating Ice Cream

Mobile devices account for more than half of online search traffic, and that number is only going to increase. Designing for such a small screen is significantly different than designing for a computer screen, and it’s crucial to design unique interfaces for both. And don’t forget about tablets, either! Each device should have a design that is optimized for its dimensions. All these factors to consider might seem overwhelming at first, but don’t worry, I have a solution. During my research for this post, I found quite a few connections between mobile-first design and ice cream. Whether you want a career in UX design or you really like ice cream, these five points will definitely interest you.

summer-dessert-sweet-ice-cream

 

1. You keep the size in mind.

If you go to an ice cream shop and order an extra large cup that you load with sprinkles and chocolate chips, you’re going to put less sprinkles/chocolate chips if you get a size small. Yes, either way you’ll have sprinkles, but not nearly the same amount. This is true for mobile design as well. If your website has a video, 5 photos, and an interactive map, you’re not going to put ALL of those items on the home page for your mobile site. You could stagger them so they appear as you swipe down, but you won’t see all of them immediately above the fold. Don’t try to cram in all your desktop features to your mobile site. Design with the space you have in mind.

 

2. Options are essential.

Why do ice cream shops serve cups and cones? Because some people prefer cones, and some people prefer cups. You’re serving the same thing, just in two different ways. Compare this to a slider in a mobile design. Some people want to swipe to see the next image, while others prefer tapping an arrow. So, which do you put? Both. If you just put arrows, people who prefer swiping will be annoyed. If you just put swiping, people who like tapping arrows will be annoyed. Options ensure that each user has the experience they want. And then everyone who wants an ice cream cone gets one.

 

3. You don’t want too much in one bite.

Your website has a ton of cool stuff. Great! But you need to space it out. White space is definitely your friend, and a clear and clean user interface provides a much more pleasing experience. If you eat too much ice cream too fast, you’ll get brain freeze. If you throw all your content at us at once, your user is going to get overwhelmed.

 

4. It can make people happy.

People use their cell phones when they’re bored on a bus, annoyed that their friend is late, and frustrated that their plane got delayed. The last thing they need is an app that is boring, glitchy, and confusing. Mobile apps can be fun, interactive, and engaging. Use that to your advantage! Just like eating ice cream, using a cool mobile app won’t make all your problems go away, but it can make you forget about them for a few blissful moments.

 

5. It’s fun for all ages.

The fact that toddlers can and do use iPads and smart phones is simultaneously exciting and terrifying. Mobile interfaces are extremely intuitive, which is why they’re so easy for people of all ages to use. Use that intuitive aspect to your advantage. As explained here, minimize the interface chrome (buttons, tab bars, check boxes, sliders, etc.) to make your content as easy-to-use as possible. Hopefully, I don’t need to explain to you why ice cream is kid-friendly. I think that one goes without saying!

food-ice-cream

How Playing Neopets Made Me Love Graphic Design

A lot of people become interested in graphic design when they take an introductory class, learn about design through advertising, or work on the design team for their high school yearbook or newspaper. I, on the other hand, became interested in graphic design before I even learned the phrase “graphic design.” It all started when my 10-year-old self began using Neopets.com.
 

Neopets is not a design site for kids. Neopets is a site where you have virtual pets that you can buy items for and feed, expect they don’t actually need food. You can build a house for them and chat about Neopets on the forums. You can play fun games and earn Neopoints. You can create a guild for like-minded people who also have Neopets, and you can design layouts in Photoshop and use HTML and CSS to style your guild and profile. Wait, what?
 

Believe it or not, I’m not alone here. Actually, far from it. According to this post on Reddit and this other post on Reddit, lots of designers and developers became interested in their field after they learned basic coding and design at a young age.
 

As a typical preteen, I was very into celebrities, so I would design layouts for the homepages of celebrity-themed guilds. This just meant finding a famous model or actress and using the colors from her outfit to design a complimentary background. Looking back on them, they weren’t that bad. Besides some basic UI flaws and weird obsessions with using Tokyo fashion districts to name guilds, the basic knowledge of color, typography, and layout design was there. Well, as much as it could be there for a 5th grader. Below are a couple of my best designs from back in the day…
 

harajuku

 

eclipsed

 

I remember instantly loving playing with different colors and layouts. I remember enjoying the entire design process, loving the challenges that came along the way, and eagerly looking forward to working on the next design. I do not remember why my username was candyapplex. I think I was trying to be edgy. I was probably in my Avril Lavigne phase then.
 

Conclusion: Everything you do in your childhood will shape you and determine your career path. Just kidding. But if you’re an elementary/middle/high school student reading this, know that the things you enjoy doing now are things you could pursue professionally. When I was making these graphics for Neopets, I had no idea I was a graphic designer. I had no idea graphic design was even a career I could go into. I just knew that I liked designing things digitally and having creative freedom on the computer, because the options were limitless. Then I learned what graphic design was and (slowly) began to connect the dots and realize that this was a profession that really interested and excited me. So, kids: Stay in school. But also do cool stuff in your free time and explore your interests. As designer Jessica Hische said, “The work you do while you procrastinate is probably the work you should be doing for the rest of your life.”

Expressing Complex Concepts in a Simple Logo

One of the most challenging aspects of logo design is communicating the complicated company values, mission, and services in a simple logo that translates easily over print and digital mediums. Especially now that over half of all digital media usage is via mobile devices, there’s a huge push for simple logos that scale down to mobile devices easily. That’s simple enough if your client wants a logo with their company name and a simple shape, but what if you’re designing a more complicated logo?

I was recently faced with this challenge when designing a logo for a program within the UNC Environmental Finance Center. The EFC offers many tools and resources, including a calculator used as a Financial Health Checkup for Water Utilities. The tool assesses the financial performance of your water (and/or wastewater) utility fund and demonstrates the financial strengths and weaknesses of the utility fund in the past 5 years.

Pretty cool, right? But not pretty simple. When I was given the task of creating a logo for this tool, I was told to:

  • Communicate that this resource deals with money/finance

  • Find a way to show that the tool evaluates the health of a water utility

  • Make it obvious that this is about water

So, all I had to do was create a simple and clean logo that communicates the complex ideas of money, health, and water in a way that was easy to understand but also visually appealing. A water utility in a doctor’s outfit holding dollar bills? A coin wearing a stethoscope swimming through pipes? No, those wouldn’t work. I needed to somehow show that this tool evaluated the health of the financial performance of your water utility fund. Also, it needed to be simple, easy to understand, and aesthetically appealing in all forms of media.

As with any logo design, the first step was sketching. I decided to first sketch out simple ways to illustrate each of the three concepts I needed to communicate, and then find ways to combine them into one image.

efc_money

Sketching ideas for money was fairly simple. I decided any of the options could work, so it just depended on which of these ideas went best with the visual representations for health and water.

efc_health

Illustrating health was a little more complex, because I needed to communicate the evaluation of health. While some of my ideas represented health, they didn’t represent evaluating your own health. Only the stethoscope, heart monitor, and checkmark represented the evaluation of health. The check seemed too vague, and the heart monitor brought in two extra elements (heart and jagged line), when I only wanted one. Bringing in two elements for health would overcomplicate the logo. I really liked the flexibility of a stethoscope, so I decided to move forward with that.

efc_water

To visualize water, I figured I should keep it simple. Using a water drop seemed like the best option, as any other ideas I had were too complex. Plus, displaying water with a showerhead or sink didn’t make sense, since this logo was about water utilities.

efc_combo

Now I needed to find a way to combine these all together. I decided to first find a way to combine money and health. My favorite ideas were the stethoscope on the piggy bank and the stethoscope that formed a dollar sign. I decided to move forward with those ideas in Adobe Illustrator and create those vectors.

efc_logos

After designing the two options in Illustrator, I decided the piggy bank idea was too complicated. It ended up looking awkward and clunky. However, the stethoscope/dollar sign idea looked clear, concise, and visually interesting. Next step: Typography.

efc_font

I drafted a few ideas that emphasized “Financial Health Checkup” and used the same colors in my logo’s image. I liked the two on the left the best, because when “for water utilities” was stretched too much, it looked clunky and large. The typography in the bottom left corner looked the most professional and clean, so I decided to move forward with that one.

efc_final

And, finally, I combined the typography with the image, which I decided to put in a water drop to bring the final element in. Changing the color of the main text to blue made it fade away too much, so the bottom right was the winner. My boss and I were both very happy with the final result. Check it out live here!

efc_logofinal

5 Ways Your Design Is (Unintentionally) Excluding People

Designers have good intentions, but small overlooked details can subtly reinforce concepts that exclude certain people, even if your company preaches diversity and inclusivity. Sometimes we get so focused on making pixel-perfect designs, adhering to a particular color scheme, and making great UI that we forget to look at deeper implications of what we design and how it might affect specific groups of people. Listed below are a few examples of designs I’ve seen that may make people feel excluded from your brand and company.

 

1. Lack of diversity in stock photos.

include05include06

Stock photos are a great way to show the culture of your company without hiring a photographer. However, be careful when selecting photos. Don’t just look for people who are happy-but-not-overly-happy-because-that-looks-fake— also remember to include diversity in your selection. Excluding people of color from stock photos implies that your company doesn’t value diversity. Implicit racist bias is still a problem in the workplace, and there’s a push for companies to do more to promote diversity in the workplace. If your company emphasizes diversity but that sentiment isn’t represented in the stock photos, it sends mixed messages. The stock photo you choose can even negate the content that you’re publishing, as Rob Humphrey, Senior Account Executive at LinkedIn, explained in this post.

 

2. Maleness as the norm in icons.

include07include08

Caitlin Winner, design manager at Facebook, led the initiative to change the Facebook friends icon after discovering that it featured a male silhouette in the foreground and a smaller female silhouette in the background. She redesigned the icon to make the male and female icons the same size. By not making one particular gender seem like the most important one, Caitlin’s new icon promoted gender equality. As content consultant Lindsay Patton wrote here, simple imagery can have a big impact on people.

If you’re making a website and showing different icons for different resources, and all of them look like men, you’re subtly saying that your product is geared at men and not women. This might work if you’re selling a product just for men, but otherwise, you may be unknowingly pushing 50% of the population away from your company.

 

3. Making America the default.

include11include12

When you’re choosing a globe icon, most designers automatically choose one displaying the Americas, or more specifically, the USA. Especially for US-based designers like myself, it’s automatic to only look at things from our perspective. One relatively simple way to fix this is to have a few different globe icons that change based on the user’s location. Facebook Software Engineer Brian Jew and Facebook Product Designer Julyanne Liang worked together to design new globe icons for users not in the American half of the world. If you’re in Asia, why would the globe icon on your profile have the Americas on it instead of the part of the world that you live in?

 

4. Not accounting for color-blindness.

include13include14

If you’re a web developer/designer, make sure you test your website for color-blindness. The easiest way to do this, as explained here, is to make sure that colors are not your only method of conveying important information. In the above example, the map of the London Underground should use another way to get the information across to people who are color-blind. This could be in the form of alt text, different line types denoted in a key, or text in the web page that supplements the color-dependent method. There are many online resources you can use to easily test your website for color-blindness. This contributes to a much better UX for these users and allows you to clearly communicate your information.

 

5. Accidentally portraying hierarchy when there isn’t one.

include01include02

I was looking at a company’s website the other day, and they had photos of their nine executive board members in a 3×3 layout. One was the president, and the other eight were VPs of various departments. The president was male, four VPs were female, and four VPs were male. However, the way they were arranged had all the women on the bottom. This was just a coincidence, as the VPs were alphabetical, and the men all had last names that started earlier in the alphabet than the women’s names did. But most people aren’t going to take the time to check the order of last names. Since the rank of the VPs is unknown to an outsider, it would have been easy to rearrange the VPs. Aesthetically, it looks better, but more importantly, it sends the message to women that they can be successful at this company. Otherwise, it looks like men run the company and that even the women in charge are still less powerful than the men. It implies that women at this company can be successful… but not *too* successful, as those roles are reserved for men. Little design tweaks like rearranging their photo order (still keeping the president first, of course) emphasizes your company’s diversity and opportunities for success.

 

…does any of this actually matter?

Maybe you’re asking yourself if this is really matters, or if anyone is actually going to notice or care if an icon is male or female. But as a designer, you have the capability to make people feel included or excluded by the steps you take in your design. And especially if your company preaches diversity and inclusivity, you don’t want to send mixed signals about your values by contradicting them in your design. A little effort can go a long way.

Kids Change the World

If you’re a designer looking for non-profit work or you’re a non-profit seeking a graphic designer, check out Grassroots.org. Their goal is to connect charities and non-profits with tools, volunteers, and resources. Through Grassroots.org, I’ve found a lot of great non-profits with important missions and designed for them. One of the first organizations I designed for is Kids Change the World. KCTW is a “global youth-led non-profit organization that envisions a world in which young people work to combat societal issues to ensure all are blessed with the opportunities that allow them to lead productive and fulfilling lives.”

About the Organization

KCTW01Kids Change the World was started by Christopher Yao. When he was 10 years old, Christopher was diagnosed with an physical impediment, an under jaw bite. He was told that he needed corrective surgery before he turned 18, but the surgery would be extremely expensive and painful. However, Christopher found a doctor who was able to solve his problem without using surgery; as a result, Christopher became passionate about helping children with severe oral problems. This led to him founding Kids Change the World. He has since been named one of the 25 Most Powerful and Influential Young People in the World by Youth Service America, and has been recognized many, many, many times for making such a difference at such a young age.

My Contribution

Initially, Christopher approached me and asked me to redesign their logo. He wanted the design to look professional and clean, but also colorful and kid-friendly. The final logo featured two small hands on splashes of red, green, and blue paint; those colors are used again in the logo’s words. After designing the logo, I’ve gone on to design many other materials for Christopher. In addition to promotional materials for Kids Change the World, I also designed a logo for Smiles for Lives, a group within KCTW which works to “fund surgeries through various nonprofits and partner hospitals to change the lives of children through life-changing cleft-lip or palate surgery and post-surgical therapy.” Featured at the bottom of this page is a flyer I designed for the Smiles for Lives Read-A-Thon 2015. I’ve also worked with Christopher to design a logo for Medical Marvels, an umbrella program over Smiles for Lives.

Why It Matters

Graphic design is very important for non-profits. When you’re just starting out as a non-profit, appearance is especially important when looking for partners and supporters. A professional logo establishes legitimacy and makes it look like you know what you’re doing (even if you don’t). When you go to a website and it’s poorly made, difficult to navigate, and looks like it was made in 5 minutes, you’re going to be a lot less likely to donate to that organization than if their website looks sleek, clean, and professional. You could start a non-profit with the best mission statement and plan that’s ever been created, but if you have no logo, a plain website, and no social media presence, the only people who are going to give you financial support are your parents (if you’re lucky). Whether you like it or not, your appearance and branding matters, and that’s why it’s so crucial for non-profits (and all organizations) to have an established identity and brand. Websites like Grassroots.org are great, because they help non-profits find talented individuals to design for them and grow their brand. Design can also help you think about what you want to communicate and how—who is your audience? What appeals to them? What sort of presence are you trying to establish? How do you want people to view your organization? Graphic design is so much more than pretty colors. It forces you to define yourself, your values, and your goals, and then challenges you to communicate all of that visually. If you’re operating or thinking of starting a non-profit and need graphic design, check out Grassroots.org or email me at lisa@lisadzera.com.

KCTW02

5 Common UI Mistakes, Explained by a Puppy

UI stands for user interface, which is how a user interacts with the interface you create. This includes menus, navigation, buttons, and more. It’s a part of the overall UX (user experience) that’s focused on the visual aspect of the user’s overall experience on a particular website or app. Good UI involves consistency, simplicity, and clarity. It is crucial to organize complex information in ways that are easy for a user to understand and navigate. You do this by creating a visual hierarchy that is easy to follow, designing clear and concise labels for actions, and ensuring that the layout and design stay consistent among pages. UI designers are very intentional with everything they do. Every action is added only if it’s absolutely necessary to the user’s experience, as designs need to be as intuitive as possible. Simplicity is key; however, simplicity is difficult given the large amount of information on most websites. As UI/UX Designer Pär Almqvist said, “A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.” The direction and flow of the website are managed through a clear UI, allowing the user to focus on what is most important. Ironically, the best UI design is invisible; if you don’t notice any usability issues and confusion, then you did your job right. Below are some of the most common UI mistakes that designers make, using illustrations of puppies to help explain the concepts.

 

1. Overly Complex/Cluttered Design

puppy01

UI design needs to be simple so it’s easy for the user to navigate where they want to go. Many designers get overexcited and start adding lots of links, buttons, graphics, gifs, videos, motion graphics, etc. While these features are beneficial in moderation, overusing elements just clutters up the page and confuses the user. It should be simple and straightforward for anyone to navigate your website, and adding a lot of features that are cool but ultimately not useful is a common mistake. Ask yourself if you’re putting something on the page because you need it or because you want it. Adding a photo of the mansion you’re writing about is something you need. Adding a 3D tour of the mansion that the user is forced to navigate through in order to go to the next page might be cool, but it’s not necessary, and it’s just going to confuse or frustrate the user.

 

2. Too Much Text

puppy02

The majority of website reading is done on mobile devices. That means that large blocks of text are not very user friendly. Paragraphs should be short and spaced apart so it’s easy for someone to read them on their phone. Make sure you test out your website on mobile before you publish it. If you’ve got long blocks of text, find logical breaking points to start new paragraphs. Even if the user is looking at your website on their computer, breaking up text into shorter paragraphs still makes text a lot easier to read and comprehend.

 

3. Non-responsive Design

puppy03

Mobile-first design is extremely important now with the prevalence of mobile browsing. Designing for mobile first means you know your site will be responsive and look right in the smallest size, which makes it a lot easier to resize for larger screens. Designing for a computer first and then trying to cram all that information into a mobile device is going to make it look cluttered and disorganized. Make sure your content can adjust to desktop, tablet, and mobile screen sizes, and that you’re taking time to design the website for each. Too many websites have a mobile site that’s exactly the same as their desktop site, just smaller. That means it’s hard for viewers to read and navigate, so they’re going to have a bad experience.

 

4. Lack of Hierarchy

puppy04

When looking at a website, it should be obvious where you want someone to look first, second, third, etc. Otherwise, viewers’ eyes will just wander aimlessly around the page, trying to figure out what’s going on. When you have very prominent elements that lead to somewhat-important elements that lead to less important elements, then the page makes sense to the viewer, and it’s easy for them to figure out what the most important information is. Using size, color, and layout, you can establish a hierarchy that helps your user navigate the page. Plus, if they’re only going to spend a short amount of time on your page, you need to make sure it’s obvious what the main topics are. It’s a good idea to test this out on people and ensure that the hierarchy you’re trying to establish is working the way you want it to.

 

5. Too Many Clicks

puppy05

Good UI designers consolidate similar content on a page, rather than spacing them out through multiple pages that involve clicking and waiting for pages to load. People expect instant gratification now, and if you’re making them click, wait, click, wait, etc., then they’re likely going to get bored and leave your website. Think about what’s best for the user. If you’re looking at a list of ten items, are you more likely to read all ten if all you have to do is scroll down a page, or if you have to click “next” after each item and wait for the subsequent page to refresh and load? Be intentional with your content and think logically about how to display information so it’s optimized for the user.

 

Good luck designing!

Hopefully, these tips help you optimize your UI design for your next project. It’s an important part of web design and the overall user experience. Plus, it’s puppy-approved.