Last year, I spent months redesigning our product, Click & Speak – an online training for people learning English.
The goal was to make the new design feel more modern, more colorful, and more alive thanks to animations. The goal was also to make the new design perfectly responsive (not just "working.") Our best users use our training 1 to 3 hours a day, and getting both desktop and mobile right was critical.
The main resource guiding the redesign was Refactoring UI by @steveschoger and @adamwathan. It's a great book, super practical. I'd read a few classics about design before, but this one really answered practical questions I had, rather than theoretical ones. I picked up a lot of tips & tricks and I feel I have a better eye for design now. I must have read the book like five times now and know I'll get back to it!
I also spent a lot of time checking out Trello, Stripe, and design choices in TailwindCSS (but without using the library.) Trello looks beautiful yet simple, and super usable; Stripe always manages to delight with a few thoughful choices in their design; and TailwindCSS is from the same guys as Refactoring UI, which let me check out how they implemented stuff.
The old site was minimal and dated from 2012. Because I sucked at design, I'd kept it simple (which was a good thing!) It relied on Bootstrap 2.3.2. The new site started with Bootstrap 4, but I got so sick of it that I got rid of it. (Its classes were getting in the way, instead of helping.) As far as implementation is concerned, the new design meant mostly writing a ton of CSS (via SASS), using BEM to try and keep things contained.
Let's look at some before & after pics!
2012 vs. 2019-2020.
The Login page:
The Home menu:
(If the bottom feels a bit empty… you're right; it's waiting for a search widget.)
Monologues (a flashcard-based review system.) Here the front of the card, with the original English:
…and here the back of the card, with a translation:
You can tap the card to flip it and the chart, called a Phonograph™, is fully interactive (thanks to amazing D3JS.) You can also tap the buttons to slide the card out. It feels much more alive than the old site.
The site menu or drawer:
(I meant to include videos here, but the screen recordings looked terrible, with the video compression causing artefacts in the gradient, so no videos for now.)
Dialogues:
A few take-aways from thinking about and working on design much more than I ever had (my background is self-taught / full-stack / "Jack of all trades"… I guess what you would call "maker" these days):
- Design can be learned. I now notice things about color and spacing I did not before.
- Reducing your options makes your life easier. K.I.S.S. applies to design, too! e.g. working with colors is not that hard if you stick to just a few.
- In that spirit, setting up a system is really useful, and I should have done it early on. I knew I should set up a system… but I spent so much time experimenting without one, that by the time I set up my own (for colors, spacing, text size, fonts…) it was really painful and I had (still have) to DRY a lot of the CSS.
- I learned to keep CSS rules organized.
- HSL for the win!
- I'm addicted to glows! 😍
- Animations really bring things to life… Now, sometimes it's super quick, sometimes it takes ages.
- Besides MDN's reference on timing functions, I checked easings.net and Animista a lot (if not to copy-paste, to get a sense of what I was looking for.)
- But beware browser bugs, especially when combined with SVGs. (I contributed to 4 bug reports in Chrome, 2 in Safari and 1 in Firefox and with half an hour to over an hour to contribute a proper test case and report, it sometimes felt like I was working for the browser companies.)
- Overall, it's very time consuming… but it sometimes bring that "Wow!" effect. So it's a trade-off.
- It's not news, but CSS is insane! BEM helps keep things organized (I like the use of prefixes), and it works really well with SASS (nesting), but it doesn't make things shorter (though it probably does not make them longer either) and CSS is as verbose as ever. I reread/refactored the SASS file like three times to keep it clean and it took so long each time… and I have to do it again. But, again, CSS is insane. The site is not that big, but the SASS file is already 9497 lines long.
I don't think the new design is perfect, but it's still a big improvement over the old one. The choice of colors might be a bit too bold? I don't know. Some people say it looks beautiful.
When I look at the design now, I keep seeing things that bother me, but it's always a trade-off… time is limited and other things in the business await. I have ideas on how to improve the design and my design skills… It's exciting! But has to come one step at a time.
Picking up new skills, mainly TailwindCSS + TailwindUI, and Vue.js (or possibly Alpine.js instead) is the next exciting project I have in mind as far as front-end is concerned.
I spent a lot of time checking out design systems, it just feels nice:
- GitHub's design system, Primer
- Trello's old design system, from before they merged with Atlassian.
- TailwindCSS. Even without using the library per se, checking out their palettes (color; border radius; shadows…) proved super useful.
Some books I feel are worth mentioning:
- Refactoring UI, mentioned at the top.
- Universal Principles of Design, a classic. It's a collection of concepts about design.
- Don't Make Me Think. It's about how good design makes things obvious, self-explanatory.
- Getting real had some good tips about keeping design or a product simple, especially for makers / small teams.
