A blog about trying to make yourself better at making and designing websites. Also about random shit.

Figuring out my design process

I remember reading about the redesign of CodePen all those years ago and thinking how cool it must be to create a product that users would want to use.

Image: This is a screenshot of the Codepen and Sparkbox collaboration. It shows all the different things that they did in March.

And I wanted to know: how do web designers take all of that data—ranging from interviews, to user testing, to user feedback, to ethnographic research—and create something beautiful and useful?

I found myself wanting to know the decision-making behind design. Why was it designed this way? How does this solve the user's problems? Why are we going with this instead of that?

So last year I started designing at DuckDuckGo. I spent half the time working on design and the other half working on engineering things. I want to share with you the work and process that I've been doing recently.

Phase 1: Research

First I looked at what's out there: how do different individuals and companies do their newsletter page? Why did they structure it that way?

This is similar to Dan Mall's article on "Stealing Your Way to Original Designs". I'm learning how other people are making their designs and remixing them. This is also good practice for new designers like me.

Many want to be chefs but aren’t willing to be line cooks first. It’s not glamorous work, but it builds design muscles, muscles that you’ll need in order to get better and advance to the next step.

Image: This is a collage of the newsletter exploration that I did. It shows newsletters from different individuals and companies.

I needed to boil down my research so that I could focus on the important parts of the page. I created sketches and a collage of the elements for me to better understand what I'm trying to make:

Image: This is a sketch that I made of the page that we needed. It has three main elements: value, privacy, and praise.

Image: I collected the most important parts of the exploration that I did and organized them into categories: praise, value, form field

Phase 2: Wireframes

Wireframing is basically a way to get everyone on the same page on the general layout and content of the web page. I created different layout variations on both mobile and desktop to see which works best for our business goals.

Image: This is a screenshot of Sketch showing the different layout variations in my wireframe.

Phase 3: Design Refinements + Content

I found this phase to be the toughest one because I needed to iterate on the design to get to the right layout and content that we all wanted. Content was especially hard because I don't know how to take a sentence and create multiple variations out of it. I need to read things like Nicely Said and Everybody Writes to get better at writing.

Image: A screenshot of the high-quality mockups that I made.

Phase 4: Implementation

Implementation was pretty straightforward since what I'm making is a static page, and all the elements pretty much exist in other parts of the website. The backend already works so all I really needed to build was an interface for people. 😊

Image: A screenshot of the final result.

And that's it! You can check it out here. The major takeaway for me is that design—like any other skill—is super hard to do right. Designing and creating things for people is tough, but I find that it's fun to do. Also take note that it wasn't just me who worked on this. It involved a loooot of people from different parts of the company.

Some of my design resources: