design Archives • Page 5 of 7 • Mel Choyce

New England GiveCamp 2014 Recap
This past weekend, I attended New England GiveCamp. The goal is to spend a weekend helping out a local organization or non-profit somehow with their web presence. This could mean redesigning an outdated website, or helping them build a new site or app.

The camp went from 6pm Friday to 5pm Sunday. Over the weekend, my team and I spent about 24 hours total on our project, Mill Falls Charter School. We were comprised of:
- Meryl Levin, the founding board chair at Mill Falls
- Rachel Morris, our project manager
- Kelly Dwan, our developer
- …and myself!
I ended up on the Mill Falls project by chance — the original project I had been assigned to was unable to make it, so my team got split up and put onto other projects. (This worked out well for the Mill Falls team, whose original designer was also unable to attend.)

Old Mill Falls homepage

Old Mill Falls interior page

Once my group snafu got figured out, Kelly started making updates to the Mill Falls WordPress install (it was running WordPress 3.1 — ouch!), and started removing unused plugins. I huddled up with Meryl and Rachel to go through the project goals, and then on the site’s information architecture. The current site was a little complicated — there were some pages that could be condensed and combined, as well as restructured into more specific top-level categories.

We whiteboarded out all of the pages together

After deciding on an updated site architecture, we discussed what we thought some of the most important elements were, so we could highlight them on her homepage. I finished up the night wireframing out a basic homepage and interior layout at desktop and mobile sizes as the rest of my team got together and talked about some of the more technical bits. We touched on the site aesthetics at the end of the night, and then at around midnight, we wrapped up and Kelly and I headed home.

The second day dawned rainy and cold — the perfect kind of day to spend inside, designing and coding. I jumped straight into designing, mocking up the homepage and interior design in Photoshop. It’s been over a year since the last time I worked on a client site, and it was fun to slip back into familiar patterns.

Meryl was interested in keeping the existing look and feel of their site, but growing upon and modernizing it. Their existing site already looked pretty good, so I had a really solid base to work off of. One of my favorite features were some really charming slides in a carousel on the homepage. However, since you probably shouldn’t use a carousel, I decided to take out all of the slides and highlight them on each primary page. While I originally intended for Meryl to eventually replace them with photography, the slides grew on me more and more throughout the weekend.

Since the site was also pretty navigation-heavy, despite our re-architecting, I decided to give each sections its own on-page submenu, instead of just relying on the menu’s dropdown. This would give site visitors a better sense of where they were. I drew in colors from the slides, which already formed a really lovely color palette.

I finished mocking up my pages in the early afternoon and had a check-in with Meryl via Google Hangout, since she was unable to drive down to Boston that day. She was super enthusiastic, and provided some great feedback as we went through the designs. I ended up with very few elements to change. After making some minor adjustments, I handed off the mockups to Kelly to start implementing.

While Kelly started coding out the designs, I worked on restructuring the current site’s menus and pages to match the IA we had discussed the previous night. The rest of the day was focused on structure and development. Later that evening, when it started to get into crunch time, I helped out Kelly with some minor theming bits like styling forms and the interior sidebar. We wrapped up at 11 with an almost entirely complete theme.

The rest of today was spent wrapping up. We activated the theme on the live site and made some minor adjustments to the content, including setting the featured image and header background color for each page, depending on the image. We walked Meryl through the site and its various features, and had the pleasure of introducing her to the (somewhat new) WordPress media modal, Jetpack galleries, and the new admin color schemes.

We also put together a style guide so she would have quick and easy access the colors we used, and a visual guide to the different text and header stylings, using Mark Jaquith’s WP Help plugin. Kelly wrote up some additional documentation around widgets, menus, installed plugins, and changing the featured images and their background colors.

https://twitter.com/melchoyce/status/452898116233334784

We ended up pushing right up to the presentations at the end of the day. All told, we spent 24 hours over the weekend working on the site. I’m incredibly happy with the site we produced, and it was really great being able to help. Working with Meryl, Rachel, and Kelly was a real pleasure. Their professionalism, enthusiasm, and and knowledge really helped shape this project into something special. I had a really great weekend.

Thanks for the fun, New England GiveCamp!
mel

April 6, 2014

regular

design, givecamp, hackathon
You don’t need permission to do awesome things

You don’t need permission from anyone to do awesome things. All you need is the time and space to work on it.

— Frank Chimero on The Great Discontent

mel

August 27, 2013

regular

design, frank chimero
A Game of Themes

A couple weeks ago, I decided it would be a fun design exercise to explore a series of themes based around houses from A Song of Ice and Fire by George R.R. Martin. It comprised of three parts: creating a look & feel for each house, designing a base template to skin, and then applying that look and feel to the base theme.

I started by throwing together some style tiles for each house, looking to explore colors, texture and typography:

Next, I explored some potential layouts:

The first layout felt a little too corporate and the second one felt a little too complex, so I ended up going with the last layout, which I thought would fit the multiple skins best. Here’s the skins applied to that theme layout:

House Stark

Built on shades of grey with a desaturated blue accent, Winter is like the Starks: dark, cold, and stoic. Winter features Titillium, a thick sans-serif to ward off the impending cold, and Crimson Text, a serif as sharp as Valyrian steel.

House Lannister

House Lannister drips danger, arrogance and power. Pride featurs rich crimsons and indulgent golds that hint at wealth. Domine is an enchanting and seductive header font, which is paired with the warmth ofSource Sans Pro.

House Targaryan

House Targaryan is the biggest challenge, because while “fire and blood” evokes crimson and black, Daenerys herself is hot and white like the desert sun. She is sand and stone yet as soothing as an oasis. I decided to represent Daenerys with rich browns, tans, and blues. Queen uses Gentium Basic reflects her royal roots, while Cantarell hides danger behind grace and poise.

I don’t see these mockups going much further than this, but it was overall a pretty fun experiment.

mel

August 19, 2013

regular

design, wordpress
Simplicity through thoughtful reduction

In The Laws of Simplicity John Maeda posits, “The simplest way to achieve simplicity is through thoughtful reduction. When in doubt, just remove. But be careful of what you remove.” The final warning is important. Removing things often leads to simplicity merely because the user has fewer items to process. But removing visual cues that help the user mentally process the interface — such as graphical elements that group items, that differentiate buttons and labels and that make things stand out — could do exactly the opposite by giving the user more work to do. So, rather than guide the design by style, guide it by principle.

~ Dmitry Fadeyev, Authentic Design

mel

August 14, 2013

quote

design, Dmitry Fadeyev
Why every new employee should do customer support

I was recently hired at Automattic as a Design Engineer. All new hires are required to spend three weeks as a Happiness Engineer, answering support tickets for WordPress.com. No exceptions.

I know what you’re thinking — a designer, doing support? I wasn’t hired for this! That’s not my job, this is pointless!

That’s where you’d be wrong. Do you know why? Doing support is awesome. It’s probably the best thing you could have your new hires do. It’s been tremendously more effective in introducing me to Automattic than any new hire orientation I’ve gone through, and here’s why.

You learn your product faster

Part of any new job is fumbling around, trying to figure out the ins-and-outs of your product or service. Only now, guess what — now you get to do it for someone else! And you’d damn well better do it right!

After two days of training with full-time Happiness Engineers, new employees are thrown right into the fire of support forums and tickets and oh god I don’t know anything about domains, I better figure that shit out asap. No sir, I have no idea why your theme isn’t working, guess I should set up a test blog and try it out for myself.

I’m going to be honest: when I started, I had only used WordPress.com a little bit. I’ve always been a self-hosted user. The ridiculous amount of information I’ve crammed into my skull during my three weeks of support about WordPress.com has transformed me into an expert. I know where everything is. I have whole swaths of support documentation memorized. I can refund a dissatisfied user in 30 seconds. Bring it.

It creates empathy for your customers

Unless you completely lack empathy, seeing someone struggle with a difficult task is painful. You want to help. When they succeed, you feel excited. Woohoo!

While doing support, you actually get to experience your customers, in the wild, interacting with your product or service. You get a sense for their workflows, for their habits, and most importantly: where you fall short.

When your customers have trouble doing something, that’s your fault. But I haven’t even started yet! Doesn’t matter, still your fault. Own it. This is now your company. If there’s something that needs fixing, you don’t shove your fingers in your ears and insist that it’s not your fault, sorry sir but I only just started, I don’t know how to help you. If there’s something that needs fixing,you try to fix it. If you don’t have the power to fix something yet? Bug someone who does.

I think it’s easy to fall into a trap as a designer or a developer where you just design and code in a vacuum. It’s just you, and your product, and what do you mean other people have to use it? I can use it just fine! Doing support shows you who uses your product or service and how they use it. It’s not just you anymore.

You feel a greater sense of responsibility

Every single day of my support rotation I had a ticket I just didn’t know how to answer. I tried looking through the docs, but I couldn’t seem to figure out how to fix a customer’s problem. When that happens, I descended like a starving lion on my support buddy, a full-time Happiness Engineer who was assigned to help me for my three weeks. If he was unavailable, I asked around in our support chat, feeling anxious about not already knowing the answer.

It was kind of pathetic. But that’s okay, because my buddy, and the rest of the Happiness team, are amazing. They are understanding. They are patient. They are my saviors. They are my friends. You don’t want to make life hard for you friends, do you? You’re not an asshole, right?

If I left my support rotation and went on to design something hard to use or broken, guess who’s going to feel the heat first? Guess who will need to deal with my mess? My wonderful new Happiness Engineer friends.

Working support instilled within me a greater sense of responsibility. My actions not only affect our huge user base, but also my coworkers. I better damn well make sure anything I push out is going to make lives easier, not harder.

I’ve officially finished my support rotation. I’m pumped to start designing. I feel like I’m overflowing with all this creative energy that built up over the past couple weeks of doing support. My last week of support was the most challenging, but the experience I gained will help me become a better designer.

I’m pretty damn sure that if you try supporting your customers for a while, you’ll become a better designer too.

Originally posted on Medium.

mel

July 10, 2013

regular

automattic, design, support
Designers, we need to care for our young.

Almost every company in our field is hiring a designer right now. However, finding the right designer is an agonizing process. We are unique in this poor economy in that we have more positions open than qualified individuals to fill those positions.

There are not enough of us. And it’s our own fault.

New designers have it hard

Undergraduate courses in web design are anachronistic remnants of what the web once was, and never will be again. They rely on outdated techniques instead of teaching the foundations that help prepare students for a constantly evolving environment. As a result, graduates leave unprepared for the modern web.

Unable to find entry level full-time jobs, many young designers enter the field as contractors and freelancers. This is a toxic environment for new designers, who do not yet know how to handle clients, protect themselves, and earn what they are worth. Young designers undervalue themselves, and are constantly persuaded to create more for less.

What do we do? We sit back and watch as our young are taken advantage of, underpaid, abused. Sometimes, we are the abusers.

It needs to stop.

We can do better

Internships aren’t enough. We need apprentices, and apprentices need mentors.

If your company is hiring entry-level designers, you need to devote the time and effort required to adequately mentor them. Pay them fairly. Give junior designers a solid framework for success, and be clear about how success is measured. Give them room to fail, and teach them not to fear failure. When they fail, help them see why they failed, and let them fix it.

If you are a successful senior designer looking to give back to the design community, consider mentoring a younger designer in your spare time.Find a local designer in your community and offer to go over their work with them every now and then. Give them career advice. If they are being mistreated, speak up. Encourage them to value their time and abilities.

Steps in the right direction

More companies and organizations are stepping up to train our next generation of designers. Here in Boston, both Fresh Tilled Soil and thoughtbot offer structured, paid apprenticeships for junior designers to gain real world experience and receive individual mentorship.

Accelerator programs such as Startup Institute might even be replacing college as an option for young people looking to enter the web industry. Startup Institute offers real experience through collaboration with local startups.

Let’s work together to create a web where we nurture our young. Our entire industry will benefit.

Originally posted on Medium.

mel

May 13, 2013

regular

apprenticeships, design
Women, WordPress, & the Web

This morning, Sarah Parmenter, a talented female web designer and frequent conference speaker, spoke up about the disgusting, abusive and degrading experiences she’s had as a female speaker. These kinds of experiences are not uncommon for women in tech. Women are underrepresented at conferences, and often when they are represented, they are sexually harassed, verbally abused, or are just plain talked down to. Attempts to discuss the lack of diversity and problem women face in tech conferences have even been met with disrespect and ridicule. (Aral Balkan does a good job of summing up that entire debacle.) It’s no wonder there aren’t as many women itching to speak at conferences:

There’s many questions around why there aren’t more females speaking in this industry. I can tell you why,they are scared. Everytime I jump on stage, I get comments, either about the way I look, or the fact that I’m the female, the token, the one they have to sit through in order for the males to come back on again. One conference, I even had a guy tweet something derogatory about me not 30 seconds into my talk, only for me to bring up the point he had berated me for not bringing up, not a minute later – which caused him to have to apologise to my face after public backlash. I’ve had one guy come up to me in a bar and say (after explaining he didn’t like my talk)… “no offence, I just don’t relate to girls speaking about the industry at all, I learn better from guys”. Sarah Parmenter

I want to talk a little bit about my experiences, specifically in the WordPress community. To start, though, here’s a bit about me. I’ve been taught from a young age that women are awesome. Though my mother might not have been the best parent as I was growing up, she is and always has been an incredibly strong woman who taught me, quite frankly, not to take shit from anyone. It’s something I internalized early. I spent thirteen long years as an active girl scout, being encouraged that whole time to be a strong leader and activist. This encouragement extended into my college years at Smith. Smithies are known for raising a raucous, and boy, do we like to give “the man” hell. Needless to say, I’ve never really been intimidated by “male spaces”.

This leads me to WordPress. One of the things that immediately attracted me to WordPress was the number of visible women. I went to my first WordCamp (NY ’10) along with some coworkers. At that point I had probably spent about a year working on and off with WordPress, and had enjoyed it, but I wasn’t really in love with it like I am now. WordCamp NYC changed that. Part of it was the excitement, camaraderie and learning that comes along with any tech conference, but a bit part of it was who specifically was there. I was a little in awe of Jen Mylo, Automattic employee and the UX/UI lead for WordPress for several years. I still remember Sara Cannon’s session, Beyond the System Font. Women were involved with organizing the conference, women were volunteering, and women were speaking. It was my kind of place.

I think one of the unusual(ly awesome) things about the WordPress community, in contrast to the overall tech community, is just how easy it is to find amazingly talented women to look up to. They’re everywhere: From designers like Jen Mylo, Sara Cannon and Chelsea Otakan, to Helen Hou-Sandi, rockstar core contributor, developer, and current UI team lead, to Siobhan McKeown, an amazing web writer now an editor at Smashing Magazine, to Lisa Sabin-Wilson, author, really dynamic and personable speaker, and now partner at WebDevStudios. I could go on listing people. The number of women working with, writing about, and speaking on WordPress is huge. WordPress really helped my find a place in the overall tech community. It really inspired me to start speaking, which is something I want to continue to do as I grow as a designer and a community member.

Don’t get me wrong — I’m not saying the community is a bubble immune to discrimination, harassment, or all the other nasty things that plague the tech industry. I’m sure we have a lot of things we’re doing wrong. But my experiences within the WordPress community have helped positively shape me as a designer and as a woman, and for that I am thankful.

mel

February 4, 2013

regular

design, women in tech, wordpress
How Donald Norman predicted the iPhone

Would you like a pocket-size device that reminded you of each appointment and daily event? I would. I am waiting for the day when portable computers become small enough that I can keep one with me at all times. I will definitely put all my burdens upon it. It has to be small. It has to be convenient to use. And it has to be relatively powerful, at least by today’s standards. It has to have a full, standard typewriter keyboard and a reasonably large display. It needs good graphics, because that makes a tremendous difference in usability, and a lot of memory—a huge amount, actually. And it should be easy to hook up to the telephone I need to connect it to my home and laboratory computers. Of course, it should be relatively inexpensive.

– Donald Norman, The Design of Everyday Things

mel

February 4, 2013

quote

design, Donald Norman
Beertone

Just stumbled on Beertone, a beer color reference guide. Great blend of two things I love: beer and design!

mel

January 11, 2013

link

beer, design
A review of the new Myspace

If you’re anything like me, you haven’t touched your Myspace account in years. A social networking pioneer, Myspace’s fame waned with the rise of Facebook, which did social bigger, better, and more efficiently. Myspace was high school; Facebook was college.

That’s why I was surprised and delighted to hear about the “new” Myspace. If you haven’t had a chance to check out the promotional video they put out a few months ago, check it out:

It looked sexy, and boy was I intrigued. I signed up for the beta release and, low and behold, found an invite in my inbox earlier this week.

Setting up my personal profile was a little confusing. Navigation is context-specific, so I had to click around a little before finding the option. (I’m also pretty sure that edit icon wasn’t there when I was trying to set up my profile, but I could be wrong) I’ve since gotten used to the context-specific navigation, but it was definitely a bit of a challenge the first day. I also had some trouble grasping the concept of “connections”, which is essentially Myspace’s “like.” You can connect with anything: music, mixes, images, videos, people, artists, etc. I still think it’s a little weird that you can “connect” with things that aren’t people, but at least it’s a consistent experience across the site.

So far my absolute favorite feature has been Myspace’s new search. On any page, if you want to search, all you have to do is start typing. An overlay with your search pops up as you type. It organizes your results into relevant categories. It’s clean, simple, and really easy. Don’t actually want to search? Just press esc and you’re back to where you were.

I’m going to let you guys in on a little secret: I love making playlists. Love it. I’ve spent hours in Winamp and iTunes making the perfect playlists for every occasion. Myspace’s process for creating “mixes” is one of the most seamless and enjoyable experiences I’ve had to date. I can search for music without leaving my mix page, unlike iTunes, where it’s a constant game of back-and-forth between playlist and library. If you’re listening to a genre radio or someone else’s mix, you can also quickly and easily add those songs to your mix from any page on the site. Your mixes get published to your activity feed so you can instantly share them with your friends.

Unfortunately, I’ve run into a few frustrating spots with making mixes — the drag-and-drop reordering is a bit jagged. I’ve had trouble dragging songs from bottom to top, or vice-versa. Additionally, there’s no way to preview songs before adding them to your mix, so I’ve found a few available songs that are really bad quality. Lastly, the selection right now isn’t as awesome as I’d like it to be — a lot of songs I’ve found and enjoyed through services like Hype Machine and Turntable.fm are unavailable, and there’s no way to add your own music. Even still, Myspace’s mixes are definitely a step in the right direction.

Right now, there aren’t a lot of people using the new Myspace. Despite that, I’ve found myself coming back every day. This isn’t something I can say about Google+, which has all but been abandoned. Why is the new Myspace bringing me back when Google+ failed to? It’s actually quite simple — it doesn’t matter that no one’s using it yet. My enjoyment isn’t contingent on social interactions, but personal enjoyment of music. It’s everything I was hoping Spotify would be. Searching for music is fast and easy. Making playlists is fun, while on Spotify making a playlist is tedious, even agonizing. I can listen to albums or easily find mixes other people have made. The new Myspace isn’t trying to be the new Facebook, unlike Google+. It’s trying to be the new Myspace.

Will it continue to keep my attention? Who knows. As of right now, however, I’d give the new Myspace a thumbs up.

Want an invite? I’ve got one up for grabs! Tweet me your email @melchoyce.

mel

December 7, 2012

regular

design, myspace, ui