Rather than just let the pretty stuff show, we thought it would be interesting to readers to give a ‘behind the scenes’ on why various decisions were made during the recent //Startup News redesign.
Marcus has already written about the changes in a general sense, in his recent article, //Startup News Revamped. So, in this article, we’ll stick more to why we did what we did, from a designer perspective.
Usually, at Bam Creative, we follow a plan when it comes to website redesigns with our clients, based on years of similar work. The plan typically goes through the following stages;
- Mood board
- Wireframes & Recommendations
- Concept delivery
- Feedback & Adjustments
- Design delivery
We made a number of shortcuts for this redesign, given that Marcus is tech-savvy, and we were doing this as lean as we could (hey, //Startup News isn’t a media giant…quite yet ;)).
So the revised, leaner workflow came down to;
- Discuss what’s wrong with site
- Give suggestions on how to fix this
- Fix the issues
- Have a team high five
Yep, that’s a pretty pretty lean workflow. We already know the audience, because, hey we’re avid readers here as well, and we felt that since there was already a strong colour palette, we just needed to tweak the actual files, and not create mood boards, audience profiles, etc.
So this is how we achieved a super-lean redesign in just four steps, and why.
Discuss what’s wrong
The main interface complaints we uncovered in our initial discussions, were;
- Confusing to navigate
- No visual hierarchy
- Too much old content being shown
- No clear direction for the user
- Website was slow to load
Give suggestions on how to fix
These issues, from a visual perspective, come mainly from;
- Homepage way too busy (so many columns and sliding effects)
- Too many categories
- No emphasis on any one area
- 366 links on the homepage (!!!)
Because each category had its own area on the homepage, old content was being shown too regularly (for example, the sponsored section highlighted a post from January 2015, over a year ago).
Go on, click the below image to see how //Startup News used to look. We dare you.
Go ahead, risk your eyes, and take a look at an example of the old design, by clicking on the image below…
Fix the issues
So, to get //Startup News back on track visually, this is what we did;
We simplified the navigation, by combining a number of categories, and make the remaining categories the primary navigation at the top of each screen.
Reformat the sidebar, so it has less overall prominence. The readers eye was too focused on the two sidebars, instead of actual content in the old design. There were a bunch of wasted areas there, which we tidied up, and made just one simpler sidebar, with the order of prominence based on user actions we want readers to undertake (subscribe to the newsletter, click on advertising banners, etc). This sidebar now stays with the reader, regardless of what page they are on.
Move the secondary menu (which is now About Us, Write for Us, etc) down to the lower part of the right hand side column. Whilst this houses interesting information, readers tend to only want to see it once, and it shouldn’t battle with the business of delivering actual content.
Remove most of the visual clutter, by adopting a two column approach, with the main column showing articles in a timeline order, from the most recently published, back. The balance of wide content column, versus thinner side column gives the reader a sense of importance to the content, rather than the sidebar.
We set the number of articles on the homepage to 10, assuming there is a new post each weekday, that means at any time, a new reader can access the last two weeks worth of articles. They can also use the primary navigation, to read back through categories.
Hide the monthly archives side panel; who wants to dig back to 2013 anyway, that’s like 900 pivots ago for the average startup. If readers have arrived at the website from a very early article, it is likely they want to move on to get to the freshest, not the oldest, anyway.
We reduced all the animation and scrolling down to a single, prominent sliding banner on homepage, which shows the latest four articles published. This really helps with the order in which a users eye is drawn around the screen.
We simplified the subscription form, from a number of fields, down to one, and add explanation content to show the benefit of signing up. Every time you create a form, you really have to ask yourself ‘Do I absolutely need to collect this information?’. We found that outside of email address, nothing else was being used anyway.
Generally tidy up the typeface, so both headlines and articles are easier to consume. We tried a few typefaces, both serif and sans-serif, yet settled on this one as visually easier to read longer paragraphs.
We also made a really minor tweak to the masthead logo; adding blue to the N, so it matches for the shorthand version of //SN. Picky designers, we know, but hey.
Technically, we also did a few things;
Tidied everything up, so it works nicely on mobile and tablet devices.
We migrated the hosting to Bam Creative collocated servers, based in Australia
We migrated the DNS to our favorite CDN, Cloudflare, which means we can now gracefully handle traffic bursts and any short period server outages.
Have a team high five
This is always an important step. We like to celebrate achievements, no matter how small, and we feel like the super quick overhaul of //Startup News has brought a new cleanliness to this great local resource.
If you have any doubts on how to achieve a great high five (it takes practice), we encourage you to watch the following video.
In an article coming soon, Miles will take us through what the growth rationale behind the revamp means, and how we are going to be measuring success with //Startup News in the future.
About the Authors
Jessica Kaitse is one of the talented design team at WA based digital agency, Bam Creative. Miles Burke is Managing Director of Bam Creative, who took an art direction role in this redesign project. More about Bam Creative generally, can be found at their website.