LinkSquares

Homepage, customer case studies, and custom icons

The time had come for LinkSquares to bring their outdated homepage into 2018. They've had a killer product for over a year and wanted the logged out site to wow visitors just the same.

Vishal and I worked hand in hand almost every day for 2 months figuring out the best possible solution for the new design. I was fortunate to not have many content changes from the existing site so this was mostly a reskin with some minor experience improvements to boot. We also worked closely with my developer buddy Bryan to work on the front end development at the same time as my design work.

Vishal Sunak CEO, Co-Founder

I've worked with Fred on multiple projects over the last few years. He is a highly skilled designer that creates beautiful, functional and usable designs. Fred is easy to work with and takes feedback/direction well to create a design we both love (minus the headache).

I love the work he did for our website. Our bounce rate was reduced by 50% and increased conversions significantly. I'd hire Fred for another project in a second.

My process almost always begins with very rough pencil sketches of possible layouts. These are typically for my benefit only as there's not much worth seeing here but it helps me visualize what we can do. From there I moved to simple wireframes of gray boxes and labels. I passed these by Vishal and we agreed on the general layout with the concession that it could and likely would change some as we moved forward.

Once the foundation is set, the fun begins. I started playing with basic visual styles and drew on inspiration from examples Vishal had given me. You can see the progress in the view below but in reality there's a dozen or so other artboards I didn't have room to show. Over the course of the project we continued to tweak the design but the one thing we were never 100% happy with was the header graphic. I tried a few options, other designers took a few whacks at it, but in the end we found the wonderfully talented Nuria Madrid and commissioned her to make the stellar graphics you see on the live site now.

Most homepage projects are very similar and the designs can often suffer the same problem. To combat this I love focusing on the little things and really making a few standout interactions. You'll find details like this scattered around the site but I'll share two of my favorites here with you.

There were a lot of spots that were just large blocks of text and without some kind of visual interest, the design wouldn't be any differen than the next site. I spent a few days playing with ideas for icons and eventually settled on this set of custom ones for use in different places around the site and other marketing materials. I wanted to keep them on brand with the rest of the LinkSquares updated design and also future proof them to be compatible with updates LinkSquares might make in the years to come.

The Common Use Cases page was one of the biggest challenges for me. The content I was delivered was nothing more than a few dozen paragraphs. I had to come up with an interesting way to display the information we wanted to get across to the visitors and give them a reason to stay on the page for a while. Instead of just making a bulleted list, I divided the content into two distinct sections and used a click to reveal card flip interaction on the top section. Hopefully this added a little bit of surprise and delight to the experience, while showcasing some fun design.

There are a few types of pages on LinkSquares that need to be repeatable. First there are a handful of form pages, all pretty similar but with slight differences. Then there are Customer Stories, basically case studies of work that LinkSquares did with certain customers of theirs. These are built on an ongoing basis as work with new customers is done. Finally there are consolidated PDFs to download from each of the Customer Stories. I knew I had to make some simple design systems for all three of these pages.

When thinking about the design for the form pages and Customer Stories, I paid extra attention to creating a design with repeatable, scalable blocks. The goal was to make sure LinkSquares could take what I started with and build their own pages with what I gave them long after our engagement together was over. Once we figured out a reusable design system, Bryan turned them into front end components empowering LinkSquares to reuse them when new pages needed to be created.

The last templated design was for the Customer Story downloadable PDF. I turned one real Customer Study into a PDF and while doing so, built a blank template side by side. This blank template including paragaph text styles, header styles, proper spacing and alignment rules, preset colors, and a customizable header. With these guidelines at their disposal, new PDFs will be a breeze to make moving forward.

This is one of my favorite projects to date because I got to see the entire thing through from start to finish. It was really a blast to explore so many different aspects of design here from user experience to visual design to custom iconography. I get a ton of satisfaction when happy clients tell me I've improved their bouncerate by 50% and that they personally love the results. If you want a baseline for the quality I expect of myself, the level of communication I have with the client, and the end results for a project I work on look no further than LinkSquares.