Author Archives: Tim

Typography of ChefSteps

Fortunately, I have the freedom here at ChefSteps to go down rabbit holes I think are important, as long as I can A) Convince the team they are necessary and B) Can execute. Well, the team really has the expertise to handle situations like these. It is probably why they are hired in the first place. In fact, most designers tend to have a proficiency in creating responsive designs, having a knack on how to use grep command (or similar coding commands), and handling web server and design applications. Therefore, it was not a big hassle for us to change the typography of the site. After feeling like something was a bit off about the typography of the site, you’ll notice in the last couple of months that we moved away from using Raleway and Helvetica Neue on headers and body text respectively, and moved to mostly just Gotham. I love it, and I think the site looks very clean with it, but there was something missing.

It all started with MailChimp’s Archived Post of Rhythm and Grid , and I got started down the path of looking at our own typography and vertical rhythm (it was lacking). Once I started on the path of defining a vertical rhythm, I found several great resources that all coincided with choosing a scale for the typography as well. We’re currently using Gotham as the main font for the site through H&FJ (typography.com). A little more digging and bam! 8th light post about choosing a scale.

I started here, with a 9:16 scale, which is a minor seventh in musical terms. I chose 9:16 because of the similarity (while not exactly the same as) to 16:9 aspect ratio, which Ryan shoots the video at. That scale looks like this. The minor seventh looked good, but sounded a tad discordant for my taste. Knowing no one would really care/know about his, I still took the time to change it so it matched up to a perfect fourth. A perfect fourth sounds like the first chord on this song, which was playing everywhere at ChefSteps one day:

17 by Youth Lagoon on Grooveshark

By this time, I’d seen several blog posts about incorporating music into your typography, and Robert Bringhurst’s advice to compose to scale is where a lot of these rooted from. Tim Brown’s article on A List Apart and Owen Gregory’s on 24 Ways are older posts, but also absolutely amazing and in-depth. I’ve not even come close to the thoroughness of the composition for layout as these two do, but it’s a start.

Here’s what I did: I took the Perfect Fourth and associated our scale to those and used the true 16:9 pixel dimension as the magic number (in this case, 1136px for our videos, which is a true 16:9 resolution. So, we’re using the perfect fourth scale now, which was a small adjustment, but gives me a really nice story behind the design 🙂 – Here’s the modular scale. We skip a few sizes between h3 and h5, but that also allows us flexibility in typography for different sized text should we need it.

One of the big things I struggled with was em vs. rem. I was defining baseline by em, which was screwing up issues because it was all defined by the parent and ems can compound in size based on inheritance. The only real solution while still using ems is to write more css – The answer was to use rems. I then defined the root for html to be 62.5%, which is the same as what Jonathan recommends, in order to have every X.Xrem to translate into XXpx (1.1rem = 11px). Then I used a SASS mixin to define a baseline of 1.1rem and anytime I add margin, I use $baseline * N for as much space as I need.

All this took a little while, because the rhythm is constantly disrupted by image sizes that don’t fall into multiples of our baseline (11px), but for the most part, the text up and down the page does. It helps the pages look more composed and any new modules we have in the future should fit neatly into the grid, making the entire site more flexible and robust from a UX perspective. You can apply different types of examination to better understand users’ needs which would later lead to bringing in more traffic to your site. It might be possible to learn more about the shortcomings of design by employing UX research methods. Furthermore one can use that data to improve the design to match the user expectations.

Did you get this far? You must really like typography! You’re probably like:

But I’m like:

Vertical rhythm and composing to a scale: Like doing the robot in a robot suit. Typography and UX design can be hard to wrap your head around, especially at the start. But don’t feel ashamed if it’s not clicking in your head, coding the typography for your site can be difficult, especially if you want something professional right from the start. That’s why many choose to hire a website builder to do all the bracket codes, headers, and font picking for them. As for me, I’m proud of what I’ve managed to accomplish.

Thanks to everyone linked here for helping me figure out how to implement something like this on ChefSteps. What’s next?

Some more resources:

Weeknote 52

Things

This is what my Things list looks like.

 

5 weeks late, the weeknote is back. The last time I had a weeknote ready to draw up, I was going to talk about the Knife Collection Design, which is up at chefsteps.com/knife-collection.

We worked really hard on the design and implementation of this page so that it would work on mobile as well as desktop. The original idea I had for the knives came from (of all places) Boden, which featured large, lovely pictures of clothing and touch or click targets on top of those that opened up a popover to purchase. For the life of me, I can’t find any good examples of them doing that now, and it’s possible they’ve moved on from that design, but I liked it, so cribbed it, mostly because I knew we wanted to have a very photography heavy experience and to highlight those knives. Since our pics are so great, wtf not, right?

Additionally, we have these awesome stories to tell, and I wanted to draw the eye to them when users scrolled so that it wasn’t ignored. You’ll see the pics naturally, but the words about these knife makers is pretty freaking cool, so I used a little javascript magic to put a cool gray background behind the words. This, you’ll see was another idea stolen from kerem.co, whose got a beautiful website as well.

When we had our first iteration, responsive was screwing everything up, and our mobile screens weren’t doing what we wanted so I iterated on those a bit. Truth be told, I should obviously be designing mobile first, but our user base does actually skew heavily towards desktops, though we absolutely expect that to change. So instead, I pitched the push-right, push-left idea to Huy, and he came up with a great implementation. Affordances to show that you can click off (or the plus button) to close the window were light, so another idea, from Path’s menu was taken.

So that’s it! Those are all my design secrets. We’ve been hard at work on the macaron course, which involves brand-new content (of course) but also a redesign landing page and activity pages for the courses, streamlined with a focus on getting through and experiencing the content so that there’s less jumping back and forth. If you’re interested in getting a sneak preview and talking about it for a while, leave a comment.

 

Week 46

New homepage! You get that yet? You should have. The new homepage is solving a few different problems for us, and hopefully you.

The top layer gives you the latest content from ChefSteps, regardless of our categorization of it. We’re thinking about doing away with that categorization all together (recipes, techniques, science) because it seems to mean more to us than to users. Can anyone confirm that? In any case, you’ll always see the latest up there.

On the left side, we’re highlighting a few of our courses. If you’ve enrolled in a course and haven’t yet finished it, we’ll show you the course and give you a chance to continue it, because we really want to make sure you get 100% of the content there—We’ve put a lot of work into our courses and will only continue to get more.

Lastly, we have an activity feed! This shows you everything that anyone does on the site. It’s sort of a firehose right now, but the reason why is because there’s always activity happening on the site and this lets you see what other Steppers are interacting with. We UXers like to call that serendipitous discovery. Later, you’ll be able to filter that list based on who you follow (yup, following coming soon) and by trending areas.

Okay, easter egg: Click on Community Activity to take you to the page that loads just activity, then on your iPhone (yeah, unfortunately only for iPhone right now) click Bookmark > Add to Home Screen to get a sweet app icon to save on your phone and have the community activity on ChefSteps a tap away. Week 47 coming fast. Peace.

Week 44-45

The last two weeks: I’ve been busy doing user interviews with a lot of great people here in the Seattle area — It’s been super amazing to talk to people and hear what they like best about ChefSteps. All of the feedback I’m getting has been great, and we’re learning a lot about how to prioritize our efforts. Thanks to Alex, Nicole, Julian, Quoc, Chuck, Zack, and Amanda for taking time out of their day to hang out and talk with me about ChefSteps.

I’m re-examining the value of a carousel around here. I like it, because it’s really beautiful, but I’m not sure it’s helping people find content that is relevant to them. In fact, the more I talk to users, the more I’m seeing that that is a recurring problem. Because we have so many different levels of cooks at ChefSteps, the experience needs to be more guided so that people can find content that helps them take their skills to the next level. For a lot of people that are in the industry, even though some of the knife sharpening stuff is cool and relevant from a science standpoint, they already know how to sharpen their knives because they have to do it for work all the time, but spherification is new and exciting, so they’re more likely to be helped by that new technique.

Equipment continues to be a barrier for a lot of users as well, with a lot of folks not having all the cool tools we have in the kitchen (but wanting them). I think we’re doing a good job listing the substitutes and different techniques to achieve similar results. If we’re not, let us know.

One of the other things I keep hearing is that people don’t document their recipes. I was talking to Michael about this and it’s a big barrier. There are people that do it because it’s their job; recipe development is something they do and they want people to use their recipes, but for most home cooks and for users outside the industry, they cook mostly by feel, taste, texture. Is that a barrier that we can overcome? If we made it easy enough to upload a recipe or made it super-easy to get the bones of a recipe started so that you can edit it later or, better yet, someone else could do it for you or work off your idea and make something different and amazing, would that be good enough for users to really find value? I’m not sure yet, but I’m working my way towards an answer the more people I talk to.

In any case, that’s mostly what I’ve been up to. Lots of good content went up these past two weeks, so make sure you check it out. We’ve still got a lot of things coming soon as well and we’re working at making it more obvious when our stuff is going to come out so stay tuned. Have you uploaded your avatar yet? Get rid of those gray boxes!

Have a great weekend. Remember: <whisper>chefsteps!</whisper>

Week 43

I’m reading a few different books right now, one of which is The Experience Economy, which talks a lot about adding theatricality to your service to create an experience. I’ve been thinking a lot about that with our interfaces and how we can make it more satisfying to users when they do things we like them to do: cook food, practice techniques, take courses (and cook that food), and add recipes. These are all things we want people to do on a regular basis because it’s the best way to get better. Practice quenelles with crisco! You can upload those pictures, too; it’s important for people to learn the how of getting better at cooking, and practicing is part of that. We’re going to make it feel more satisfying to do that as well.

We launched the knife sharpening course last week which has gotten a lot of uptake quite quickly. There’s a dozen pics that are proof positive that Steppers have some kick-ass, sharp knives. We’re about to get hooked up with some really sweet knives and sharpening kits, so stay tuned for that. I definitely need to do some sharpening, so can’t wait to get some stones. And probably a new knife.

I was making myself some coffee one day in the staff kitchen and I really don’t have any idea how to make good coffee on our crazy awesome La Marzocco machine, and Grant just laughs at me (in a nice way) and says, have you not had a lesson? I had one from Ryan a while back, but I forget a lot of things (my 1.5-year-old son kicks me in the head while he’s sleeping sometimes). So he gives a quick run through and I realize again that I am exceedingly lucky to have had that lesson, on a whim, on an average day at work. But I don’t get to play back a video or written documentation to show me exactly how to perfect my technique. Everyone in the ChefSteps community, however, does and even has the access to the chefs if you have questions about what you’re doing. I think that is pretty amazing.

Week 42

Polls? Yes. One of the harder parts about being a sole designer at a startup is that you have try really hard to adhere to what your core product is, and it’s easy to lose focus on that because of all the cool features your team thinks of. The social design explosion is a great article about determining your feature set, and we’re looking at what makes sense and what doesn’t for our users. We wanted to introduce polls because they are adding an extremely great way for users to essentially help shape the curriculum here and ultimately be a place where cooks can learn what they want. And what’s our core mission? Making you a better cook.

So voting for new content is currently where it’s at here at ChefSteps. Make sure you head over and vote on your favorite new thing that our kick-ass kitchen crew will work on. We’re probably going to open up some other social features coming up soon, but don’t look for the deluge of social features to encroach on the great content that we’re putting out.

Last week I changed up the default avatar on everyone’s profile with something pretty generic, but also lets you know that it should be an avatar. There’s a lot of gray boxes out there! Make sure you update your avatar and bio by clicking on the profile link on the navigation bar at the top right. It’ll help you stick out of the crowd.

Last thing for all you designers out there working on digital products: I’ve been working on an email engagement plan to get more awareness on all things we’re working on at ChefSteps. A couple of awesome things that have made my life easier are mailmatic and pre-mailer (comes packaged with mailmatic). It allows me to design and code emails using SASS and HAML and automatically converts them to HTML-style email (like 1990’s code). Pretty awesome. I really want to make the first 30 days of a user’s experience at ChefSteps really amazing (and of course, after that, too), and an email engagement plan is part of that. If you have suggestions on how to make your experience better, please let me know.

That’s it for now. On to 43!

Week 4(1)

I’m jumping ahead in time here, because it’s really week 41 since ChefSteps launched, and weeks 40 and 39 just kind of disappeared into the abyss and now we’re looking at week 41 and there’s a ton of stuff to highlight:

Michael was hard at work on getting Beta testing up on some User-created Recipes — If you’re interested in being a beta-tester, please let him know. More at the forum. He was also hard at work on gallery pages which have gotten some UI upgrades: You can now filter by recipe skill level (easy/intermediate/hard) and any new content on the site at all is accessible through this page — just hit “any” in the filter and you should see everything from newest to oldest.

Google Chrome

Huy was busy with getting a nice upgrade to profiles: Notifications show up if anything you’ve uploaded has been starred or commented on by other users as a badge up in the top right, and in your timeline, we call those things out with a little “new” badge as well. Pretty sweet. He’s also working on some yet-to-be-released new homepage stuff, so keep on the lookout.

Another big feature from Huy: Uploads now have integrated commenting, so that you don’t have to log in to Disqus in order to comment on other people’s uploads. Here’s a few nice uploads folks have done to get you started: Baselerd’s Salmon 104, Xavi Meros Asencio’s Cod brandade gnocchi, Jeff Minuk’s delicious looking Pomme Rösti with poached egg. Go ahead and click through and comment away; these dishes are really beautiful so kudos to those folks that have uploaded.

I did some work on the About page, which got a little facelift and introduces you to the team and links out to the jobs page, which, I should mention: We’re looking for some help! Check out the open positions. You could be here!:

I also revamped the footer to get everything organized a little bit more and to better emphasize the main areas of the site. We’ll get around to doing this for the main navigation too, once we get a few other awesome new features sorted out.

Lastly, we also made it easier to share links for recipes and things out to others by just clicking the email button in the share panel below the videos. Please share liberally! We’ve got some more great things coming up soon from both the content and website worlds. Stay tuned!

Cheers,
-t

Weeknote 3

Hi guys, UX Design here again. The weeks keep going by too fast! Missed another weeknote, so I’m going to break it down for you quickly:

I started working on new nav paradigms for the site. Many thanks to the folks that have already participated in the card sort I put up last week. I got some great feedback and we’ll be updating the nav someday soon.

I’m running my first usability test this week and will be doing more soon, I hope. If you are interested in participating (remotely or otherwise), please get in touch – Leave a comment, tweet, forum post, door-knock, whatever. We really have some exciting stuff we need help testing to get right for our users, and your help would be awesome.

We launched poutine! I also made a poutine badge, which I like very much. You can’t imagine the amount of time it took me to get the fries to look right. Shout-out to Emmett for some refinement help.

poutine-02

The poutine course is pretty great. It’s using the same course structure we established with Spherification and we’re hoping to use this same structure for courses going forward. Our aim on these course pages is to be able to encapsulate the recipes and science with more structure and narrative, so you can get through and be linked to the forum easily from any page to ask questions.

I’ve made the fries twice now, and if anyone is considering doing it, just do it already. It may seem like a lot of work, but it’s not really, the hardest part for me is finding enough counter space to lay out all the fries after the water bath. I don’t have an immersion circulator, so just used a pot and a thermometer. I performed the brine test, which was fun, and substituted light corn syrup in lieu of Glucose Syrup, which has a little vanilla in it that maybe I could taste a little bit, but also probably just in my head as well (my palate ain’t that good).

More good stuff: You can favorite/like any recipe or technique we have on the site now, and you’ll be able to have those show up in your profile for safe-keeping. Use it to keep track of recipes that you want to cook later or have cooked and would like to cook over and over again.

The last big thing I’d like to mention, is that we’ve enabled uploads for all recipes! I uploaded the fish & chips I made a while back, and if I hadn’t fallen completely flat on the pomme rösti I tried to make yesterday, would have uploaded that one, too. You guys should really start uploading your pics, it’s a lot of fun.

My timeline on my profile is getting kind of ridiculous. We’re working on it.

Cheers! Have a great week.

Weeknote 3

Hi guys, UX Design here again. The weeks keep going by too fast! Missed another weeknote, so I’m going to break it down for you quickly:

I started working on new nav paradigms for the site. Many thanks to the folks that have already participated in the card sort I put up last week. I got some great feedback and we’ll be updating the nav someday soon.

I’m running my first usability test this week and will be doing more soon, I hope. If you are interested in participating (remotely or otherwise), please get in touch – Leave a comment, tweet, forum post, door-knock, whatever. We really have some exciting stuff we need help testing to get right for our users, and your help would be awesome.

We launched poutine! I also made a poutine badge, which I like very much. You can’t imagine the amount of time it took me to get the fries to look right. Shout-out to Emmett for some refinement help.

poutine-02

The poutine course is pretty great. It’s using the same course structure we established with Spherification and we’re hoping to use this same structure for courses going forward. Our aim on these course pages is to be able to encapsulate the recipes and science with more structure and narrative, so you can get through and be linked to the forum easily from any page to ask questions.

I’ve made the fries twice now, and if anyone is considering doing it, just do it already. It may seem like a lot of work, but it’s not really, the hardest part for me is finding enough counter space to lay out all the fries after the water bath. I don’t have an immersion circulator, so just used a pot and a thermometer. I performed the brine test, which was fun, and substituted light corn syrup in lieu of Glucose Syrup, which has a little vanilla in it that maybe I could taste a little bit, but also probably just in my head as well (my palate ain’t that good).

More good stuff: You can favorite/like any recipe or technique we have on the site now, and you’ll be able to have those show up in your profile for safe-keeping. Use it to keep track of recipes that you want to cook later or have cooked and would like to cook over and over again.

The last big thing I’d like to mention, is that we’ve enabled uploads for all recipes! I uploaded the fish & chips I made a while back, and if I hadn’t fallen completely flat on the pomme rösti I tried to make yesterday, would have uploaded that one, too. You guys should really start uploading your pics, it’s a lot of fun.

My timeline on my profile is getting kind of ridiculous. We’re working on it.

Cheers! Have a great week.

Weeknote 3

Hi guys, UX Design here again. The weeks keep going by too fast! Missed another weeknote, so I’m going to break it down for you quickly:

I started working on new nav paradigms for the site. Many thanks to the folks that have already participated in the card sort I put up last week. I got some great feedback and we’ll be updating the nav someday soon.

I’m running my first usability test this week and will be doing more soon, I hope. If you are interested in participating (remotely or otherwise), please get in touch – Leave a comment, tweet, forum post, door-knock, whatever. We really have some exciting stuff we need help testing to get right for our users, and your help would be awesome.

We launched poutine! I also made a poutine badge, which I like very much. You can’t imagine the amount of time it took me to get the fries to look right. Shout-out to Emmett for some refinement help.

poutine-02

The poutine course is pretty great. It’s using the same course structure we established with Spherification and we’re hoping to use this same structure for courses going forward. Our aim on these course pages is to be able to encapsulate the recipes and science with more structure and narrative, so you can get through and be linked to the forum easily from any page to ask questions.

I’ve made the fries twice now, and if anyone is considering doing it, just do it already. It may seem like a lot of work, but it’s not really, the hardest part for me is finding enough counter space to lay out all the fries after the water bath. I don’t have an immersion circulator, so just used a pot and a thermometer. I performed the brine test, which was fun, and substituted light corn syrup in lieu of Glucose Syrup, which has a little vanilla in it that maybe I could taste a little bit, but also probably just in my head as well (my palate ain’t that good).

More good stuff: You can favorite/like any recipe or technique we have on the site now, and you’ll be able to have those show up in your profile for safe-keeping. Use it to keep track of recipes that you want to cook later or have cooked and would like to cook over and over again.

The last big thing I’d like to mention, is that we’ve enabled uploads for all recipes! I uploaded the fish & chips I made a while back, and if I hadn’t fallen completely flat on the pomme rösti I tried to make yesterday, would have uploaded that one, too. You guys should really start uploading your pics, it’s a lot of fun.

My timeline on my profile is getting kind of ridiculous. We’re working on it.

Cheers! Have a great week.