It’s not surprising that Weinan Li thinks of sports when describing how design, product and engineering teams work together at WHOOP. After all, he is a senior product designer at a wearables company that helps people meet their health and fitness goals.

When it comes to building a modern product, Li likens it to playing football.

While Li speaks in sports analogies, his advice isn’t targeted at football fanatics. It’s for designers who want to reduce friction when working with product and engineering — designers who just want to make collaboration click. If that sounds like you, read on... (3 min read)

In the long flight to my first full-time UX/UI designer job, “hack meetups” became an oasis for me to perch, learn, and regain confidence. After I co-organized “Hack Homebase” twice in a row at Wayfair, the transformative power of hackathons became more evident than ever.

According to Wikipedia, a hackathon is a design sprint-like event to create functioning software or hardware by the end. To me, the essence of a hackathon is collaborative problem-solving. The chemical reaction during the event is more valuable than the output. When executed right, hackathon builds a truly stimulating environment for all, regardless of their background.

In the spirit of Wayfair’s ever-growing distributed team network to Austin, San Francisco, and Toronto, I wrote this blog to share my process and experience hosting virtual hackathons. Hopefully, one day you find this article helpful ... (7 min read)

I recently experimented with my new workflow for animated mockups using Sketch, Adobe XD and Final Cut Pro. It took me about 8 hours to go from crap to something I felt comfortable with. The final production is a 15‐second video.

For this project, I had to blueprint my process so the design file can be successfully passed from one tool to another. It is crucial that ... (1 min read) all the nitty-gritties are taken care of before I jump into design.

Sketch

Sketch is my go‐to place for designing icons or any vector graphics. It has more powerful shape manipulation tools than Adobe XD, InVision Studio and Framer X. I started out in Sketch to create all the icons I need later.

Adobe XD

Adobe XD (or simply XD) then took over the process in UI design and prototyping. Prototyping in XD is quick and intuitive. Its Auto-Animate feature creates stunning transition effect like a breeze.

XD also has a built-in recording feature that generates action movies for my prototype, a feature I fell in love immediately. On the flip side, XD doesn’t offer key‐frame adjustment, so my control on animation is significantly reduced.

Final Cut Pro

In my final process, I compiled four layers (three footages and one still image) in Final Cut Pro. The trick here is to time the footages perfectly to make my final production coherent and fluid.

It was fun to see the ideas come to fruition. Having this workflow, it is easier to build up captivating narratives around my future designs.

This website is constantly evolving since its birth, a process that helps me bridge the gap between design and development.

Lately I received feedbacks on my case study pages, and decided to add an internal page nav with a Scrollspy feature for better usability. I threw myself into the weeds again.

Act One

One thing I am good at is to ... (2 min read) mentally model a product. Even with limited knowledge on JavaScript, I constructed a vivid idea on how to make it happen.

Using jQuery .offSet() and .scrollTop() methods, I successfully coded a page nav bar that toggles between certain states. But the challenge is to make each anchor link highlighted when the page is scrolled to its corresponding section. A straight conditional statement was to little avail.

Act Two

Chasing down a web development instructor at General Assembly, I was told that Bootstrap offers a framework for the similar feature. (This is how I learned the word “Scrollspy”)

There was a significant learning curve for me on Bootstrap. After hours of fiddling, tweaking and testing, Bootstrap successfully muddled my CSS. I had no choice but abandoning it all together.

However, don’t get me wrong! Bootstrap would have been remarkably helpful if I used it from ground up. And by digging into its source code, I distilled a ton of valuable insight. No effort is wasted.

Act Three

By this point, I have come across dozens of tutorials on CSS and jQuery. Though no one gave me the magical recipe for the exact page nav I need, they all touched on some part of it.

On March 1, I found the last missing piece to the puzzle – the .each() method. After sticking things together, my JavaScript finally worked. The entire process took me three days.

Strangely, whenever I thought of giving up, there were new ideas bursting into my head. Some mystical power kept me moving forward in this toilsome yet exciting exploration.

You can see my page nav in action (only on screen size of 1100px or wider) on this case study page.

Though I had no prior web development knowledge, I built this website from ground up by pure self-studying. This article is for me to document my journey and process.

Make a Leap of Faith

I used to suck at coding. I almost flunked my CS101 in college. However, when I was studying UX design, I asked myself: isn’t it awesome to see my design come alive in my own hands? This rhetorical question inspired me to make my ... (2 min read) leap of faith.

Find out the “thirst” that drives you to code. Ignite that fire, and move on. True passion can take you further than you think.

Trust the Process

Coding is not a rocket science! What you need is a good code editor. VS Code is my favorite so far.

Start with Hypertext Markup Language (HTML), the easiest of the three front-end languages. A solid understanding of Document Object Model (DOM) and common tags (including their attributes) is essential to cement your foundation.

For Cascading Style Sheet (CSS), make sure you firmly grasp the concept of the box model and the two types of elements (i.e. block vs. inline).

In fact, you can make decent webpages just by using HTML and CSS. Experiment with these two, and get a sense of how they work together.

The learning curve for JavaScript is higher due to its complex syntax and algorithm. Because this is a realm that I’m still exploring, I’ll leave it here for now.

Stay patient, positive, resourceful, and practice everyday. Let time lead you to the success.

Get the Most out of Nothing

There are many good free resources out there.

W3Schools and MDN Web Docs are amazing. I frequented W3Schools when I was punching codes for this website. To me, it's the Wikipedia for web development. I also watched dozens of tutorials on Lynda.com (my BPL card gives me free membership).

If you really get stuck, web developers are everywhere. Find them in meetups or hackathons and ask well-informed questions.

Learning to code is not a sprint, but a marathon of problem solving. Though it takes time and efforts, you will be impressed by how much you can accomplish.