A years ago I worked at The Atlantic. I worked on a variety of projects including UX for our CMS and internal tooling, expanding the design system, interaction design for subscriptions, and layout design for sponsorships.
Storyblocks—a company that generates approximately $30M annual revenue—released a new brand identity to the public on September 18, 2017. Formerly known as Videoblocks, Graphicstock, and Audiblocks, it was time to portray a cohesive message with all three of our products. I was part of the team that implemented the new logo, colors, and visual identity to the masses through emails, display ads, facebook ads, landing pages, onsite promotions, press releases, and more.
Tools: Sketch, Invision, Illustrator, Photoshop, Premiere Pro, After Effects, Google Analytics
Skills: UI, Visual Design, Brand Identity, Wireframing, Prototyping, Content Strategy
First thing I’d like to note on this project is that it is still a work in progress. As our design team, product, and brand grow and mature, we’re finding it necessary to expand our defined color palette. As it stands, Storyblocks has three main brand colors: yellow, black, and white. Which can really prove to be be tricky.
So we’ve begun exploring new brand colors to add to the yellow, as well as some awesome supporting characters to bring into our UI as part of the design system. Here is some of my exploration.
Tools: Sketch, Invision, Usability Hub
Skills: UI, UX, Prototyping, Brand, User Research
In the past, Storyblocks has used Free Trials as a marketing technique for gaining thousands of user leads in order to later convert them to users. Their problem isn't that free trial has no value—because it does. The problem is the clear language and designs that confuse customers. They don't realize they will be billed automatically after their trial expires, and it has led to an unfortunate amount of Chargebacks and Refunds.
With the redesign, we set out to make our free trial sign up flow clear and transparent in order to reduce those negative stats—and of course to provide the best possible experience to our users.
Tools: Sketch
Skills: UI, UX, Wireframing, Prototyping, AB Testing. Illustration
The Storyblocks blog brings together education and inspiration for the users of three different product offerings under one umbrella brand. The blog is designed to support SEO strategy and boost organic traffic—all while fostering a creative community. I led the UX and UI collaborating on strategy with SEO and Content Marketing team members for final implementation. The redesign led to 100%+ boost in traffic.
Read the full case study.
Tools: Sketch, Invision, Photoshop, Wordpress
Skills: UI, UX, Visual Design, Content Strategy, Brand Identity, Wireframing, Prototyping
One of the rarely seen parts of design is what goes on behind the scenes. As a UI designer, polish is incredibly important to me, but as a UX designer as well, sometimes I find I’ve got to get a little bit messy to really solve the hard problems.
My Process:
1. Opportunity Discovery / Problem Definition
Every decision we make in a product either starts with a known problem or somehow discovering the problem, whether through QA, user interviews, user research, surveys, NPS responses, customer service complaints, internal complaints, etc. So whether you’re actively seeking an idea for a product feature or it falls into your lap in the form of a complaint, the output of the first step is defining the problem and understanding your users.
2. Research / Consult
Gather the data. Gather the facts. How do competitors solve this problem? How do market leaders solve this problem? How does [insert favorite brand here] solve this problem? Sometimes a problem has a simple solution. Sometimes there are people out there who are already doing it well. Figure out what works and what doesn’t, and use that as a starting point. And don’t forget to check in with your project stakeholders!
3. Ideate / Wireframe / Prototype
Bring your ideas to life. Draw. Sketch. Use post-its. Ask questions. Draw again. Cross things out. Be wrong. Wonder if you’re right. Ask your friends. Ask your coworkers. Ask your mom. Ask yourself. Draw messy boxes and layouts. Make them neat. Go back to messy. Use a whiteboard. Use Sketch. Use pen and paper. Always carry sharpies with you. Be not afraid of the mess. Make your designs clear. Clean and precise. Now you’ve got a design to test. Know what you’re trying to solve.
4. Test
You may think you understand your users, but empathy has its limits. You are not your average user. Never trust yourself to fully know every problem with your product. Be curious. Be open-minded. Get ready to be wrong. Let your defenses down. Each and every little complaint is a golden nugget. Sift through the dirt and strike gold. Expose yourself. Detach yourself from your designs. Ask questions. Don’t lead your testers. Don’t confuse them. Now you know how to make your design better.
5. Iterate
You got your feedback. The problems have been made clearer to you. Get excited because now your designs get to transform. You were wrong and it feels so right. Or you were right and that also feels pretty good. Listen to your users. Make the changes. Or maybe even start all over. Designers can’t suffer from sunk-cost bias. There’s always room to improve and that’s amazing.
6. Roll Out / Monitor
Get your design built. Send it out to the world. Come up with a hypothesis. Put some data science to work and let the AB test show you how you were right. Show the world. Maybe you were wrong. Show that too. Always stay curious. Never take the data at face-value. Always seek context. And either watch your beauty soar or get excited that you have another problem to solve.
