UX, Visual Design, Frontend, WordPress
When I moved to Mobile, a small town on the coast of Alabama, I quickly realized that the tech and design community I loved was nowhere to be found.
To keep in touch I started doing Skype sessions with friends. Eventually that expanded to others in the community. One day I had the idea to start recording these sessions. If they were helpful to me, I figured they might be helpful to someone else.
I’ve spent the last year and a half conducting interviews with brilliant entrepreneurs, designers, developers and writers from all over the world. The interviews themselves were incredible, but the site they were on was not. It was time to make a worthy home for those interviews.
PROJECT GOALS
When I set out to recreate Signal Tower my primary goal was to build a site that was distraction-free as possible. Signal Tower is about people and their stories, everything else needed to get out of the way.
I had other goals for the project. One was to improve newsletter signups without resorting to popups and other methods that degrade the user experience. The other was to simply learn as much about WordPress development as I could.
PROCESS
The site started with some rough wireframes. I knew there would be three core pages on the site—the homepage, the archive and most importantly the individual interviews.
As you can see, the wireframes included a homepage that was similar to the previous iteration of Signal Tower, which featured the twelve most recent interviews in a grid formation. I’ll talk about why I discarded interviews from the homepage later.
I felt like the site should be monochrome, or as close as possible to it. I’m not against color, but felt like the images in the interview should take most of the attention. It’s one thing that has stuck, and is one thing
I did the visual design work in Sketch. I’m a huge fan of the tool. It takes the relevant interface design parts from Photoshop, Illustrator and InDesign and combines them into one tool, while getting rid of everything else. Plus, Sketch makes it easy to export designs or pieces of a design.
There were several design problems with interviews on the previous site. Guests don’t always provide a large variety of photos. Also, a good portion of the audience are designers, who probably have Thunderbolt displays or other large screens. Hero images needed to be positioned just right, otherwise text would cover their face, or worse stretch until the guests head was cut off. Full-width images are a bad idea when pictures are important. Lesson learned.
The headlines and subheadings are set in Proxima Nova. You’ll notice in the Sketch design that the paragraph font is PT Serif. Picking fonts for the site was incredibly difficult. Because of the interview lengths, I wanted the paragraph font to have a large x-height, which I find improves legibility. I considered Adelle and Chaparral Pro, but in the end I chose Freight Text Pro. It is my favorite font by a mile and was the only one that felt right.
When it was time to start development the interview pages took most of my time. Inspired by sites like The Verge, The Bitter Southerner and The Great Discontent, I wanted to build a site with variable layouts. Initially, I started working with Advanced Custom Fields to create a set of modules that I could reuse, but quickly realized that this made adding the content unwieldy. I thought about creating a set of template pages that I could alternate, but it didn’t have the flexibility I wanted.
Finally, I discovered the SiteOrigin Page Builder. It gave me complete flexibility to rearrange all content within the sites container and added relatively little complexity to the CMS. It made it simple to add and manipulate elements within the container, and was the perfect tool.
There were other considerations. You know that feeling when you’re in the middle of reading a great article, and then the screen turns dark, and you’re presented with an opportunity to provide your email?
I wanted to increase my subscriber base. Email subscription popups work incredibly well, but I absolutely despise them. Some sites create annoying and deceptive experiences to push numbers a bit higher. And it makes an otherwise experience feel slimy, doesn’t it? I’ve never seen a site that has one that feels authentic. It creates that uncomfortable feeling where everyone knows someone is trying to sell them something.
I’ve spent so much time crafting these interviews to be engaging, it would be a crime to interrupt somebody 2,000 words into an interview with a “Don’t miss out! Subscribe now!” popup.
As I mentioned earlier, I canned the original design for the homepage. Gaining subscribers became the sole focus.
Noah Kagan has recently put out an article about how how he increased signups my making design changes to his blog’s homepage. I decided to take some of his advice into account—working on copy about how signing up can benefit the reader, as well as focusing on the signup field. On the other hand, I decided not to hide the navigation or footer. Doing things like that is on the same level as adding popup modals.
What was the final result? In large lettering it says “Longform Interviews You Can Learn From” with a signup form directly below that. Then I set expectations—one or two emails per month, and give examples of the types of stories they can expect.
Shortcomings
I’d like to think this project was perfect, but in reality there are several shortcomings.
My primary concern is SEO. No, I don’t design sites for search engines. I even wrote a piece called Websites Are for Humans. However, I changed the structure of the site significantly and it did have a negative effect on rankings.
My first SEO mistake was to force the guests names to be the H1 tags on the page. Titles like How Jennifer Dewalt Built 180 Websites in 180 Days turned into Jennifer Dewalt. Don’t get me wrong, visually I think the guest’s name is the most important thing, but I should have found a way to work the old H1 tags into the posts. As a result, my search visibility fell by 30 percent.
For future iterations of Signal Tower, and other online magazines I build, I’ll include a search friendly H1 tag, with a larger piece of text that allows for a more creativity. If you’re looking for a good example this feature from The Intercept uses Watch Commander in the hero picture with a more descriptive H1 below it.
Results and FINAL THOUGHTS
As a whole, I couldn’t be happier with the outcome. I received dozens of enthusiastic emails from designers and readers after the launch. This was my favorite.
Hey Sam,
I just discovered Signal Tower and it has ruined my whole morning. It’s been really hard to get back to work since I discovered your interviews!
Seriously, very cool stuff!
I was going to submit it to Product Hunt, but someone already beat me to it, and congratulations on all the upvotes.
Out of curiosity, how do you go about finding and picking folks to interview? I saw there was a Google Doc to submit names (and already did!) but was wondering about your process beyond that.
And I joined your newsletter, so I won’t miss out on your posts!
Thanks!
John
Aside from the fantastic emails, take a look at this screenshot of the site’s analytics. Note that the annotation on August 11 is the launch date of the new design. The bounce rate drops from the upper 80s down to about 55 percent—quite an improvement.
The other goal I had was to improve newsletter signups without implementing popups or other annoying antics. It’s still early to tell, but the results have been fantastic so far. As I write, approximately 2.8 percent of visitors to the site convert to a subscriber. I expect that may drop a bit, once traffic from Product Hunt dies down. It is still a substantial improvement.
The other goal was to simply learn as much about WordPress development as I could. I’m definitely no wizard, but the more I work on WordPress sites the more I understand how it works. This is my largest WordPress project to date, but I don’t expect that to last long.
As for the interviews—I’ve got some incredible ones in post production with a few more awesome guests lined up. If you’re interested in hearing from me the next time I publish, I’d encourage you to subscribe!
The post Signal Tower appeared first on Sam Solomon.