Design Masterclass with the best designer I’ve ever met (Raphael Schaad with Cron Calendar)

Transcript

today we're talking about design going from sketch all the way to reality at initialized we funded a company called cron they're building the best calendar experience that you always wish you had google and apple they have unlimited resources but they still give you a bug-filled frustrating experience i've worked with hundreds of designers and rafa... Read More

Key Insights

• Sketching is valuable for exploration and communication, because it is a low-commitment way to try ideas and a quick picture can be shared with a team on Slack.
• Anyone can sketch, not only designers, since people all drew as kids. Adding a simple avatar or texture to an idea makes it visual and easy to react to.
• Deferring judgment is the core rule of early design. Asking a team for eight sketches in five minutes often shows that sketch seven or eight is no worse than the first idea.
• The more a team explores, the more good ideas it has, so the early stage should go broad rather than deep before any one option is chosen.
• Design is not only how it looks and how it works, but also how it is built, so some details can only be explored by prototyping in the real medium of code.
• Cron's adaptive precision shows an indicator before a click so users know where an event chip will be created, avoiding the common miss of about 30 minutes.
• A prototype built with plain HTML, CSS and JavaScript, with no framework, lets a designer feel an interaction, such as a gray line that sets expectations for where a drag will start.
• Designer opinions still need testing with users, because an idea that feels obvious to the designer can confuse four of five people when tested.

Questions & Answers

Q: Why should designers start with paper sketches?

Sketching is low commitment, so ideas can be explored quickly and cheaply. If an idea does not feel right, you simply draw the next version. A sketch also works as communication, because a photo of the page can be shared with a team on Slack. Raphael treats sketching as both exploration and communication.

Q: Can people who are not designers use sketching in product work?

Yes. Raphael says sketching can be great for anyone, because anyone can draw, and everyone drew as kids. Even a stick figure with a little added texture, such as an avatar on a profile view, brings an idea to life and lets people react to it. Engineers and PMs can join the exercise as well.

Q: How do you run a productive sketching session with a team?

Ask everyone, including designers, engineers and PMs, to sketch, and sometimes set a time limit, such as eight sketches within five minutes. Raphael finds that sketch number seven or eight is often no worse than the first idea. The goal is to defer judgment and collect as many ideas as possible, going broad rather than deep.

Q: What tools does Raphael Schaad use for sketching?

He uses a sketchbook rather than loose pages, so everything stays together, and he snaps pictures to share on Slack. His sketches are black and white, with color used only to highlight a few interactions. He likes Copic pens, made in Japan, but stresses that the tools do not need to be the same.

Q: What is adaptive precision in the Cron calendar?

Adaptive precision is feedback that shows where an event chip will be created before the user clicks. In many calendar grids, users end up off by about 30 minutes because they were one pixel above an invisible line. Cron's idea gives an indicator, such as a gray line, so users know whether a drag will start at the hour mark or 15 minutes after.

Q: Why prototype in code instead of a design tool?

Raphael says design is not only how it looks and how it works, but also how it is built. Some integrated details cannot be explored in a prototyping tool, and certainly not in sketches. Coding in the actual medium lets him feel an interaction and discover details that static or simulated tools would hide.

Q: What technology does Raphael use to build prototypes?

He builds prototypes with what he calls rocks and sticks: plain HTML, CSS and JavaScript, with no framework and nothing else. In the calendar prototype, a familiar grid shows no change on hover, but when the mouse pauses to click and drag an event, an indicator appears. This lets him test an interaction idea from his sketchbook.

Q: Why is it important to test designs with users?

A designer can be an opinionated curator, but personal taste is not enough. Raphael notes that he may think something is cool and obvious, then talk to five people and find four of them confused. Testing with users checks whether the feeling a designer has about an interaction is shared by the millions of people who will use it.

Summary

This video is a conversation about the process of design, specifically focusing on the transition from sketching to the final product. The speaker, Rafael, is a top designer who has worked on projects like Flipboard and MIT Media Lab. He shares insights and tips on how to create the best user experiences.

Questions & Answers

Q: Why is sketching an important part of the design process?

Sketching is a low-commitment way to explore ideas and quickly iterate on them. It allows designers to think through problems and communicate their ideas effectively. Sketching also encourages exploration and the generation of more ideas.

Q: How does sketching help in the communication process?

Sketches can be easily shared with team members, making it a great communication tool. They provide a visual representation of ideas and can help convey concepts and design directions to others.

Q: How does adaptive precision work in the context of calendar design?

Adaptive precision addresses the issue of event placement accuracy in calendar grids. By exploring options in sketches, designers can find ways to improve the user experience, such as enabling users to know where an event will be created before they click. This is achieved through visual feedback and indicators.

Q: What is the significance of the paper and pencil stage in design?

The paper and pencil stage is where ideas are explored without judgment. It is similar to the improv stage in comedy, where there are no wrong ideas, only opportunities to build upon existing ones. This stage allows designers to think freely and generate multiple possible solutions.

Q: How can someone with no design experience start sketching?

Anyone can begin sketching by starting with simple shapes and gradually adding more detail. It doesn't require advanced drawing skills, and even stick figures can be used to convey ideas. Practice and experimentation are key to becoming more comfortable and proficient in visualizing ideas.

Q: How does the design process progress from sketching to prototype?

Sketching is the initial exploration phase, followed by the design process using tools like Figma. Prototypes are then built using HTML, CSS, and JavaScript. This allows designers to simulate and test interactions in the actual medium the software will be built on.

Q: Why is it valuable for designers to have coding skills?

Designers who can code have the power to bring their ideas to life without relying solely on engineers. It allows for a faster iteration process and the ability to explore certain integrated details that cannot be easily explored in design tools.

Q: How does attention to detail contribute to an exceptional user experience?

Attention to detail, even at the pixel level, can greatly enhance the user experience. It involves refining typographic details, visual hierarchy, and functional improvements. Small tweaks can add up and make a big difference in the overall usability and aesthetics of a product.

Q: How does design work impact the feel of a product?

The feel of a product is essential, and designers play a crucial role in crafting that experience. They need to empathize with users and design with their needs and emotions in mind. Testing with users is also important to validate design choices and ensure the product resonates with its audience.

Q: What is the goal of the cron calendar app design?

The goal of the cron calendar app is to reimagine and create the best user experience for managing time. The team behind cron aims to help users make the most of their time by providing a powerful and intuitive productivity tool. They want to facilitate efficient time management and empower users to prioritize their tasks effectively.

Takeaways

Designing a product involves multiple stages, starting from sketching ideas and exploring possibilities. Sketching allows for low-commitment exploration and effective communication of ideas. Prototyping in the actual medium helps designers test and refine interactions. Attention to detail, both in visuals and functionality, enhances the user experience. Empathy for users and testing with them are crucial to ensure a product resonates and meets their needs. The goal is to create a product that empowers users to make the most of their time.

Summary & Key Takeaways

• Raphael Schaad of Cron starts new products and features in a sketchbook, using black and white drawings and Copic pens. He treats sketching as exploration and communication, keeps color only for highlighting interactions, and shares photos of pages with the team on Slack.

• Early design runs like improv, where the answer is always yes and judgment is deferred. Raphael asks designers, engineers and PMs to produce many sketches in a short time, since later sketches are often as good as early ones, and leaves sketching once an idea is ready for a design tool.

• He then prototypes in code, using HTML, CSS and JavaScript, because details of how software is built cannot be explored in sketches. His calendar prototype shows an indicator when the mouse pauses, so users know where an event will start, and he validates such ideas with users.