Our Blog
TheStar.com Redesign
The anticipation of a site launch can be somewhat nerve-racking. We take our clients from strategy through to front-end code.The process takes months to work through. Stakeholders on both sides of table make decisions. Then, when everyone is agreed and code is delivered you wait. You wait for real people to marry deep technology to your design.
Today, “The Toronto Star”:http://www.thestar.com/ launched their new site. It was about 7am when I saw the Toronto Star redesign tweet on my phone. I couldn’t wait to get to the office and give it a thorough walkthrough. On the drive in I wondered how or if they had implemented the various news views and topic pages. I thought about the fit and finish – would it be polished?
<blockquote>”Determining the point at which you need to stop developing and get something live isn’t exactly a science”</blockquote>
Before I grabbed my coffee or took off my coat I opened a browser. It looked great. Of course, there are still quite a few differences from what we delivered, but that’s common in a release of this magnitude. It’s one thing to deliver a few dozen static templates but an entirely different one to bring it to life in a single release. Determining the point at which you need to stop developing and get something live isn’t exactly a science. There is risk on both sides of the equation and I think their decision to go live was a sound one.
Big congrats to the fine people at Torstar for pushing it live knowing it’s not finished (they say so themselves) “The new star.com is not a finished product – it will change as we go”. Now the focus shifts from getting it live to continually improving it. They can now analyze usage, collect feedback and most importantly, use it themselves to inform new releases. Working through issues in strategy decks, wireframes, static designs, working prototypes and development environments will never come close to using the real thing. I think it’s one hell of a good start and I look forward to seeing the new platform evolve.
h3. A few highlights of the redesign
The optional news views remove much of the noise that gets presented on a traditional view.
h3. Visual News
“Visual News”:http://www.thestar.com/visualview looks stunning. It allows users to scan the news via images and small headlines. Try it out, I think it provides a refreshing perspective on the day’s events.
h3. Grid View
The “Grid View”:http://www.thestar.com/gridview let’s you see not only the homepage news in a uniformed way but also the main level categories of news like “Business”:http://www.thestar.com/gridview/business or “Entertainment”:http://www.thestar.com/gridview/entertainment.
h3. Timeline View
The last news view of this initial release is the “Timeline View”:http://www.thestar.com/timelineview. It shows you every story published, in order, since you were last on the site.
h3. Topics
This is far and away the best new feature of the site. I don’t always have time to follow every story as it unfolds. Topics offer deep coverage of stories and subjects. They aggregate stories, photos, videos and interactive pieces about people, sports teams, places and issues. Want to see what’s new with the Letterman story? Check out the “David Letterman topic page”:http://www.thestar.com/topic/DavidLetterman for all the related material and milestones. The “main topics page”:http://www.thestar.com/topics is also a nice place to start your experience.
h3. Before & After Homepage
Excellent work guys. As a daily reader and knowing what was coming, I’m glad this is finally live. I especially love the concept and execution of Topics Looking forward to it evolving toward what was originally envisioned.
[…] on our latest: TheStar.com Redesign. http://www.teehanlax.com/blog/?p=2043 #thestar (via […]
Awesome re-design… very impressive. Would love to know how the navigation bar on grid view performs; interesting move keeping it anchored to the top of the browser window.
Very valuable re-design. Congrats.
Overall, the new site looks great. The topic pages are a fantastic addition, and the individual section pages are also great.
I have a couple things to critique though :)
1 Visual hierarchy of content on home page
Newspapers use a strong visual hierarchy in their content, especially on the front page. It helps readers see the top stories first, and allows access to smaller stories by looking closer. I would have loved to see some of this carried through on the Star website. The new home page gives equal weight to every story below the main one.
2 Multiple cover page views
I like the idea of multiple ways of viewing the news, and I really like the timeline view. However, presenting them as options like “Grid View” doesn’t tell me why it will help me. As a reader of The Star, what is my incentive for using the other views? How do they fit into my reading habits and needs? It would be worth considering how to “sell” the new views in a way that fits into the user’s mental model of the site. As they are presented now they seem like novelties… “hey, that’s cool! now back to the regular home page”
3 Breadcrumbs
I really like the presentation of the breadcrumbs on interior content pages, but on the topic pages it sort of falls apart. On the regular content pages it clearly shows you your place in the hierarchy and navigation path.. but on the topic pages it’s more like a list of tags associated with that topic. That’s valuable info, but the UI used is the same in both contexts and can be confusing.
Anyway.. critique is always a good exercise. Overall, great job. It will be interested to see where newspaper sites go in the near future. I’d love have more open critiques and discussions around our public work as a community.
Thanks for listening!
Nice design! I love how simple it is and yet it has all the information. I also love the different views. Its nice to see someone willing to change it up and do something new. Great job!
It seems from checking out your blog post / checking out the site today that there is a much larger banner ad today. It’s not a big deal, but as shown in the mockup above, it should be in a horizontally darker section to isolate it from the content.
Nice work, Viusal view is great.
Nice job. Fixing the spacing issues alone is well worth whatever they paid you… The old site hurt my eyeballs… :)
Now put vaseline on your glasses, don kitchen mitts, and try to navigate.
Where is the blind settings?
Where is the old text view of all stories : headlines + bylines in a single page for the entire paper?
You don’t devour the paper nor drill down. We want the old comprehensiveness.
The Triffids are coming.
Amazing overhaul.
Now please get them to put some activity indicators for the comments AJAX calls. Staring at a blank white space while I try to page through comments with 0 browser activity indicators (save in Firebug) makes me think the site is broken.
Sorry to be out of step with all the admirers, but I’ve just spent more time on the Globe and Mail’s website than I have in ages because I can’t stand groping my way around the newly revamped Star.com any longer.
All that white space means more scrolling, more clicking, more searching—there’s just no news above the fold. And don’t get me started on the counter-intuitiveness of the navigation tools! I’m devastated that my main source of news about my hometown has become well nigh unusable.
@Gerry, I’m sorry you feel that way. We worked very hard to try to design a site that readers would find an improvement over the old site. While some people prefer the old design overall people think the new site is an improvement.
When you redesign something as wide read as The Star you are bound to have people who like the redesign and people who don’t. I would ask you give it a chance. Hopefully as TorStar continues to evolve the design (it’s out of our hands now), your issues will be addressed.
I totally agree with Gerry.
Hey Matt, thanks for your thoughtful and constructive feedback. Let me try and respond to your points, which were all well-taken.
1. Visual hierarchy—we agree that enhancements here could improve the news consumption experience for readers (and in fact, our template system does allow for this). However, there are significant workflow constraints on the editorial side that make this tough to deliver on. We gave the online editors a lot to chew on in terms of new tools and mechanisms for crafting the news. We hope that over time they can take advantage of the full scope of what’s available to them in the new design system. That said, having become familiar with the behind the scenes of what they do every day—these folks are our heros…we’re more than willing to cut them some slack ;)
2. Selling the news views. Point taken. As an academic matter, the intent behind each of these views is as follows: Visual = foreground visual interest inherent in news + facilitate passive consumption; Timeline = convey how news evolves over time + give users a way to catch up on stories published since their last visit; Grid = present news in pure, undiluted interface + facilitate skimming through sections (in the future, ideally in a dynamic, ajax-enabled way). I think the point you make—that none of this is very self-evident—is a sound one. I agree: the “sell” is definitely missing.
3. Multipurpose breadcrumbs. I’m afraid this is one of those instances where either functional requirements got lost in translation or, perhaps more likely, accommodations were made in mapping a new design system onto existing backend technology. So this one’s a bit of a casualty of war.
It’s very natural to develop a proprietary feel for the sources we go to for news and information. They’re our window to the world—they affect how we relate to and forge our own identities within that world. They become very intimate to us.
But the fact is, these sources—whether we or they like it or not—are being forced to change. The industry and institution of news is being rocked to its core.
For these reasons, redesigning thestar.com was both an exhilarating and humbling experience. We understood that every choice and tradeoff, from high-level strategy down to individual pixels was, for better or worse, going to have an impact.
We’re grateful to the folks at The Star for giving us this opportunity, and we’re truly thankful to everyone for the feedback. One thing’s for sure: defining the future of news is going to require an honest and open conversation that involves as many people as possible. We see this project as our small contribution to that conversation.
What was the design intent? i.e. When The Toronto Star came to you guys, why did they want a redesign.
The redesign is great. You guys yanked everything that is unnecessary, simplified it to a degree (3 column to 2) where your eye moves to the large “chunky” links.
There were a few things that The Star was looking to do specifically—like rationalize the overall IA, make it easier for readers to find related content, develop a richer, more media-enhanced experience, etc.—but to be honest, the ask was fairly open-ended.
We were limited in scope to a handful of key templates and there were a few things about the business, technology, etc. we couldn’t affect, but within those constraints we were encouraged to explore options and pursue innovation (so long as there was sound evidence to base our decisions on).
[…] Shared TheStar.com Redesign. […]
T+L does news. Nice.
I think you guys should stop transforming every website into an Apple.com-inspired website.
Martin – We looked at many sites when designing The Star. We drew inspiration from a lot of them. Apple was not one of them.
You can see some of our moodboards we used for inspiration here…
http://www.imgspark.com/moodboard/view/1078
http://www.imgspark.com/moodboard/view/475
[…] TheStar.com Redesign […]
[…] Originally Posted by alexd Step 1: Star sells ad to local condom store. Step 2: Star salesperson & store owner sketch ad on back of envelope. Step 3: envelope is scanned and sent to India over Internets. Step 4: Finished ad comes back over internets. Total design cost 221 ruppees ($5) Step 5: Sent back to India for revision. Step 6: Sent back to Toronto for approval, rinse and repeat. Step 7: Press deadline, time runs out Step 8: Voila! That, OR… the real story. […]
That’s awesome but how many people are going to lose their jobs as a byproduct of their migration to digital…
http://www.tribemagazine.com/board/tribe-main-forum/157332-star-firing-everyone.html
Very interesting. I love how different people can have completely different reactions to such things.
Who else wants to chime in on the Toronto Star web redesign?
[…] take a look at a real life example. Slides 29-48 provide a glimpse behind the scenes of our work on thestar.com redesign. We start by going wide and essentially scavenge for as many design inputs as possible. These vary […]