Yitong came to DESIGNATION from Toronto and graduated from the Sapphire Cohort in 2016. He now works as a product designer at O/M Studio in San Francisco and was featured in an interview earlier this year. He also launched Interrobang, a content platform on Medium offering advice to emerging designers about their careers.
In September 2017, he launched a new site called Good Web Design, so we spoke with him about how he created it, what he learned from it, and more.
Describe Good Web Design in your own words. Where did it come from?
Good Web Design is a pattern library like pttrns.com, but for landing pages. Designers and marketers can use it to reference the best examples of landing page designs. What sets it apart from pttrns.com and other sites like Land-book and Nicely Done is the ability to search many sites horizontally for specific examples of the section you’re designing for.
I started working on it because, whenever I needed to reference other designs, I’d get stuck on a specific thing like, “how do I best show this feature?” or “what’s the most compelling hero image?” It didn’t make sense for me to comb endlessly through a gallery of full-website screencaps for the few specific examples relevant to my current problem. So I set out to build GWD with the hope that others might experience similar frustrations.
It’s also unfortunate that some of these sites have business models that severely hamper the usefulness of their product. To offset the cost of capturing and tagging large amounts of images, they’ve put up ads and paywalls. With GWD, we’re going to have a business model that keeps the site permanently ad—and paywall—free. If our tests work out, we can easily add mobile design too.
Did you get inspiration from any other sites, in—or out of—category?
As a maker of a reference site, I try to be pretty open about where I get my inspiration; remixing other people’s ideas is a part of the design process. The navbar was inspired by PaperSizes; the blue hue, soft shadow, and rounded corners were inspired by Spectrum; the sub-folder dropdown was inspired by Yelp’s mobile app; the column/grid toggle was inspired by Unsplash.
How long was the process of creating GWD, and what were the major milestones in creating it?
My partner Charlie Feng and I first started working on this project in April; he and I have been building products together since 2014. A lot of the initial work was around learning enough back-end programming like Ruby on Rails to be able to build the whole app ourselves. Neither of us are programmers by trade, but Charlie had the hustle to figure out most of the Ruby and I shored up the front-end.
We launched the first version with content I’d manually curated in June. It took us a month or two to figure out our V1 wasn’t good enough, and we spent all our time since then polishing the site until the launch in September.
Then came the long slog of figuring out whether we built something good enough to ship. I showed the site to every designer I knew—many alums from my cohort!—for feedback and figured out it needed a lot of polish. In the next months, we aggressively improved the site’s design and scaled content from 10 sites to 100 by hiring a freelance content producer.
How did your experiences at DESIGNATION prepare you for this project?
I’ve learned so much in the last year that it’s hard to isolate and trace back where I learned each thing. In general, the base layer of what I know about design comes from DESIGNATION so you can say that my experience there has shaped all the work I do.
I’ve found the alumni network specifically and tremendously helpful; I’m grateful for the incredibly active Bay Area group and my friends from the Sapphire Cohort, whose feedback directly shaped a lot of the design decisions that I’ve made in this project.
How about your experiences at O/M?
I’ve been working with teams at Google’s internal startup incubator. In general, they’re top-notch and the design problems they have for us are really challenging. O/M works on very complex apps within large organizations like Google and Facebook. So GWD is, in many ways, the opposite of the work we do. However, it was helpful to observe different designers work with inspiration. Everybody has their idiosyncratic workflow, so it was a really great place at which to put the site together. I figured that if I could cover my coworkers’ use cases and get them to switch to using GWD too, I’d have a real shot at a public site.
Speaking for my own growth, working at O/M has solidified a lot of the design foundations I learned at DESIGNATION. I’ve had the chance to practice and fail at pretty much every aspect of the design stack with the support of our creative director and peers.
But more importantly, I’ve learned a lot about working in a design team. The fact is, in the day to day trenches of software design, being able to effectively manage the relationship with engineering, other design and clients can separate junior designers from seniors. Plus, it was really valuable to have designers literally within reach to provide instant feedback or brainstorm with me to unblock the design. Much of the visual treatment for GWD stems from discussions with the designers in my studio.
The base layer of what I know about design comes from DESIGNATION, so you can say that my experience there has shaped all the work I do.
What’s been the response to GWD so far, and what does the next version look like?
We’re seeing very good raw traffic to the website, and it’s decaying surprisingly slowly. On the various social networks where we shared GWD, the comments have been also overwhelmingly positive.
People aren’t yet staying for more than a minute on average, which is either down to visitors being excited about the site but not needing a visual reference at the specific moment they discovered yet, or genuinely not needing GWD. We’re wired up with analytic tools that will tell us the answer in the next weeks, and we’re hoping it’s not the latter.
The next version will be mostly fixes to the bugs that have been picked up by early users, and minor features like more filters, increasing the number of screenshots per page, more UI polish, and image-uploading workflow improvements. We definitely encourage anyone to contact us with more features they’d like to see.
Finally, what advice do you have for readers or people out there who might be thinking about designing and launching a product on the side?
1. Find a partner
Working on side projects can be very lonely. Having a partner can balance out the troughs of demotivation. Research is pretty clear that the best predictor of failure in startups is a solo founder. The same is true of projects.
2. Work on something small
There’s no shame in starting small. When you start pulling on the thread of a project, a whole host of problems will fall out. Every single project I’ve done has taken at least 3–4 times longer to finish than I expected.
3. Launch before you’re fully ready
Launching too late is a mistake often made by people who really care about craft. We care a lot about the work we do, so when there’s no deadline, we tend to spend too much time refining. Although it’s uncomfortable, it’s far more effective to show your project to users and respond specifically to their feedback.
4. Learn to code, if you’re launching software
For small projects, it’s often faster to learn enough code to build it yourself than to convince a dev to work with you. Even if you do—and you should, given point 1—you can work a lot faster if you can implement some parts of your own design. I go into more detail about learning to code here.