It was time. Over a year in the making but for the most part not being made at all. Until now.
This site was overdue for a makeover, and what you're looking at is the fresh coat of paint. I made a few changes while taking my break after the holiday shopping rush. Here's what I changed and why I did it:
Why the Change?
When I moved to Shopify in November 2016, I needed to get something up. Quickly. I picked the pre-made template that most closely suited my needs, added products, tidied up some settings, and launched the Shopify site without veering far from the template I chose. For the most part everything was working great, but seeing that I'm a UX designer by trade, and as they say this shoemaker's shoes needed a better fitting, I had some work to do.
Let's run with the shoemaker metaphor for a second: I was using a pair of roomy and cozy slippers every day, indoors and out. It was comfortable, but not right for where I wanted to go. What I really needed was a great pair of sneakers, shoes that could take me farther and fit my feet just so. But I didn't make a new pair from scratch. Shoes and websites aren't apples-to-apples after all. Instead I shaped, cut, sewed, and retooled my pair of slippers, turning them into the right shoes for me.
A New Typeface
The first thing I changed was the font. At first there were two typefaces being used: a serif for headlines and body text, and a sans-serif for buttons and menu links. I liked those fonts just fine, but they never felt quite right. Plus: this website contains both Hebrew and English and when Hebrew was displayed, the previous fonts showed a fallback typeface that looked so different it was jarring (see photo below).
Over the holiday season at work, a co-worker of mine turned me on to a lovely font family hosted by Google (always a plus for websites) called Rubik. It's a robust typeface with many weights, works great on headlines and body text, and best of all fully supports Hebrew characters. When I discovered that last part, I tested Rubik on the site and was hooked.
Making the switch was a no brainer. Everything on the site now uses the Rubik family, with a 900 weight for headlines, 500 for buttons and subtitles, and 400 for everything else.
Design and Character
When it comes to ecommerce, there are defined design patterns that have taken shape over the years and are now the de-facto experience on the web. Try opening up the last three websites you bought something on, and you'll notice how certain things always fall into the same place and page position. This makes sense, of course - when people are used to seeing something in a certain position, that's where you should place it.
It might sound like innovation is lost, but the opposite holds true. There's always something that can make a site unique, like using stylistic touches to bring a visual voice to a brand, and that's exactly what I did. I won't list every little design tweak I've made, but one feature of note is the rounded product photos on all item listings.
A Better Way to Explore
First impressions matter. What a revelation, I know, but the previous homepage of this site was a wreck. All I had was basically a long list of mixed items from all product categories, and it wasn't easy to tell what this site was about, and what you'd find on it.
The new homepage not only has highlights on the top, but now includes a better description of what the site is about (with a direct link to read more), smaller product listings grouped by category(!), and the latest posts from my journal.
Beyond the homepage I also updated the main navigation links and reorganized all of the typographic items into new categories, giving as clear an impression as I can on what you'll find on this site.
Mobile Interactions that Work
In the last year, over 50% of visitors that came to the site were using a mobile device. Sure, the design was always made to be responsive (resizing content for all screens), but the mobile version was plain terrible.
The main menu was hard to open, and once you did, you'd have to tap this tiny plus/minus area to get to specific pages. To address that, the very first thing I did was change the [controversial] hamburger icon to the word "menu," and expose all of the categories inside right away, making mobile exploration a breeze.
Phone screens are pretty small, and the difference between using space well and a free-for-all layout will make or break an experience. Previously there was a TON of white-space and unnecessary padding. Opening up any page on your phone meant way more scrolling than necessary; everything just felt a wee bit...sloppy. So I dug into the stylesheets, and tightened up the spacing on every single page to make the site feel just right.
Better, Faster Performance
Many years ago a big online retailer discovered that when their pages loaded 100 milliseconds faster, people were less likely to leave by a significant margin. The web took note, and faster-loading pages have since become a primary concern for people developing websites. I'm lucky to be using the Shopify platform, where sites are always up and load super fast. But there's always room for improvement.
You probably won't notice it, and that's exactly the idea. If you're on a smaller screen, you'll be seeing a smaller version of every product image, and of course larger screens load a much bigger one. This matters because the larger the image, the slower it is to load. Smaller screens don't need the biggest size possible, so I made the pages a bit smarter, and as a byproduct faster too.
Taking this idea further, every product image that isn't the main one on the page will now load a few milliseconds later. This effect is known as "lazyloading," whereby things wait in a queue until the page shows all of the important stuff, and only then brings in the rest. I won't bore you with technical detail, but the idea is that everything that isn't on your screen space right away can wait a second behind the scenes, letting the important stuff show up faster for you.
A Spotlight for the Bookhead Club
One of the two main categories of items you'll find here is Dapper Notes, my handmade notebooks. Every other month I make a new batch with a new design, which is available for sale but also automatically delivered for members of the Bookhead Club. Up until now, the page for the Bookhead Club looked like any other item listing. But it's so much more than just an item, and deserved a much better presentation.
Which is exactly what I did with a completely revised page. The Bookhead Club listing no longer looks like all the other product pages, it clearly describes what the subscription is all about, has better information about Dapper Notes, and finally got the treatment it deserves.
Thanks for Reading!
TL;DR The website was ok, and I made it better.
If you spot anything on the site out of line or have ideas for improvements, I'm always up for a chat. I'm also happy to go into detail on anything here that might interest you.
Special thanks to the Forefathers Group and Mark Brickey from Adventures in Design for being an inspiration to finally put that U in my URL (listen to this episode for an explanation).
