Web Strategists, I wanted to thank you all for being so involved in the comments, reading, and sharing the Web Strategy blog over the past years. As you often hear me discuss how orginizations must involve their own customers and marketplace involved in their feedback loops, I want to also live that as best as I can. I’m embarking on yet another blog redesign, working with Engage Sciences (Design), and Mitch from StudioNashVegas (Development, in the next phase), to build the next generation of this website. As I’ve done in the past, I always want to involve you, the customers, as part of the feedback loop.
I’d love your feedback in the following three comps, using discussion points loosely around the required JJG’s Five Elements of UX which I’ve adopted many times:
- Look and feel: Branding. Out of the three comps, which one best fits my brand and that of the community?
- Interface and Interaction design: Does it look easy to use some of the interactive pieces to find and navigate to information?
- Information Design: In the classical IA sense, is the information displayed in a way that makes it easy to read, find, and consume?
The other 2 elements (content and strategy) remain constant from previous posts, but you can see the below comps have a greater focus on the content assets (speeches, reports, webinars, slides, infographics) beyond just text.
Here’s three distinct comps for your review:
(note: I updated so when clicking on thumbnail you are advanced to full size image)
Wireframe 1: Professional personal brand. This design would feature more of the ‘personal brand’ or ‘career brand’ as I prefer to say, and could have more pictures of me. While I’m a bit bashful to push that too hard (as I’d rather have the focus be on content, not me) it’s a concept the team wanted to try. You can see this variation that has images as the BG, but I worry about sending the wrong message (larger than life ego) and of course readability.
Wireframe 2: Corporate Ready: True to my business focus, and those I serve in the world’s largest corporations. The navigation elements are easier to use and centralized, and there’s dedicated features for reviewing content assets towards the bottom. Also notice the decreasing ‘content funnel’ with the latest post in largest form, then they reduce in size as older content decrescendos.
Wireframe 3: Fresh and Friendly. This one is a real departure from the others shown, or anything done to date. While the color palette can easily be changed, the goal is to really allow fresher perspective that’s warmer and inviting, and using a different layout. Assume the ‘colored fan’ would be replaced by a graphical element suitable for the overall brand, that’s just a placeholder.
You can see all the wireframes here in the full flickr set, provided by Engage Sciences team.
I really look forward to your feedback below, I’ll read and respond to as many comments as possible, as well as the design and development team. We’ll make some final tweaks based on your feedback then move into development cycles and prepare for dev testing then production launch.
I like them all, but the one that suits you and your audience the best is the most professional looking one and that is Wireframe 2.
The only thing that is missing in Wireframe 2 is the “upcoming event” news feature of the top of “Wireframe 3”. With that Wireframe 2 would be perfect.
I like them all, but the one that suits you and your audience the best is the most professional looking one and that is Wireframe 2.
The only thing that is missing in Wireframe 2 is the “upcoming event” news feature of the top of “Wireframe 3”. With that Wireframe 2 would be perfect.
I like them all, but the one that suits you and your audience the best is the most professional looking one and that is Wireframe 2.
The only thing that is missing in Wireframe 2 is the “upcoming event” news feature of the top of “Wireframe 3”. With that Wireframe 2 would be perfect.
I like them all, but the one that suits you and your audience the best is the most professional looking one and that is Wireframe 2.
The only thing that is missing in Wireframe 2 is the “upcoming event” news feature of the top of “Wireframe 3”. With that Wireframe 2 would be perfect.
Thanks, really appreciate the feedback. Noted on surfacing “upcoming events”
Thanks, really appreciate the feedback. Noted on surfacing “upcoming events”
I updated my comment. There is more that might be noted 😉
I updated my comment. There is more that might be noted 😉
Here’s a few tweets
JD_Anderson JD Anderson
@
.@jowyang: Wireframe 2 is best -allows for a personalized yet intimate feeling for your blog. Agree with you about too many personal photos.
Tips4Tech Allan Pratt, MBA
@
@jowyang Three options for new web design: wireframe 3 is best with bursts of color & white space. http://bit.ly/lHirT0 thx @TimMoore
denisdoeland Denis Doeland
@
@jowyang your personal and friendly theme is my favorite …
17 minutes ago
Here’s a few tweets
JD_Anderson JD Anderson
@
.@jowyang: Wireframe 2 is best -allows for a personalized yet intimate feeling for your blog. Agree with you about too many personal photos.
Tips4Tech Allan Pratt, MBA
@
@jowyang Three options for new web design: wireframe 3 is best with bursts of color & white space. http://bit.ly/lHirT0 thx @TimMoore
denisdoeland Denis Doeland
@
@jowyang your personal and friendly theme is my favorite …
17 minutes ago
None!
Seriously, None!
First and second suck on IA. There is no thought given to what should go with main body and what not. Though they are clutter free visually but not in terms of the interface.
3rd Works better in case of the main article, but rest everything is very noisy.
No offence but looks like it was done by a web-designer. Please get a UX or UI designer. What I mean by that is, someone who will actually think about why for every-part of the site not just include it because it is there on every blog.
Also: Those were mock-ups, right? Couldn’t find the wireframes =/
Do whatever Fred Wilson’s AVC does. Great site, little clutter and readable via mobile.
My guess is that will matter most to your audience. The other items can be links, no need for it to be on the main, readable pages.
Definitely #3. More readable plus it indicates you are part of the future and not just the past. I’d make the “rainbow” near the header a bit more subtle
Strange. For me Wireframe 3 is the design, where I have the most difficulties to read the headlines of the text (and because of the many colors Wireframe 3 is the most noisy design).
I really liked the first and the third wireframes, the first one is really “nice” to the eyes and looks easy to use and find what I´m looking for. The image in the background breaks the serious appearance and makes me feel more comfortable to interact and read the blog. The “upcoming event” and the “search article” in the top of the page would be nice adds.
The third is more about the colours, and the way it highlights the important information, it claims for your attention and I really like that way of showing information.
That´s it, regards from Brazil.
I agree that #3 looks the coolest. But it does look more like a personal blog, not like a professional blog design. Maybe in social media thinking – slow and big corporations are the past… if that’s true #3 is the perfect pick 😀
I really on your blog for information; 2C provides the cleanest approach to that; I am more likely to spend time here than in the graphically busy, other versions.
I say less colors and complex design and more functions that allow fast navigation in your previous posts, sharing and so on.
Thanks very much for the constructive feedback. (I’m one of the UX folk working on the new designs for Jeremiah). Definitely note your point about upcoming events and the preference for research report visual style.
Thanks for the feedback Michael. While we definitely wanted to try some design alternatives and options, very much agree that it’s all about the information…especially considering the detailed and rich content Jeremiah outputs.
If I simply had to choose, I’d pick number 3, based on a warmer, more inviting feeling I receive from it. Ultimately whatever you decide, you should keep this in mind.
Select a design that is fast, customer centric and flexible.
If I had to download 2.5 MB of home page over 14 seconds, no flavor of design would keep me there very long. If the design was not centered around the site visitors, I’d personally feel unwelcome, and be pushed away, seeking a more lively community to participate in.
I’d find the site more enjoyable if I had the ability to hide page elements that I was not interested in viewing or downloading every time I loaded the page.
Building for speed, on a customer centric platform, that offers flexibility is appealing to most and paramount to me. If one of your goals in the re-design is to encourage your visitors to become advocates for you work or choices, then everything I described will help lead them there.
Thanks for taking the time to provide some feedback. (I’m one of the UX folk working on the redesign for Jeremiah). While not wanting to come across as defensive, I have worked on UX and UI design for just over 10 years, but perhaps not to everyone’s taste 🙂
Our challenge was to try to surface the very rich and detailed content that Jeremiah creates. There’s a lot more than just blog posts to cater for and we need to find ways to best expose the library of reports and info-graphics that many of the readers find incredible useful. Not to mention try and surface the large numbers of upcoming events and webinars…I don’t know how Jeremiah travels this much.
Right now on the current blog, a lot of this information is hidden behind other pages behind standard navigation and one thing we were trying to do was to surface more of the popular or most interacted with reports, info-graphics and events in the sidebar and home page. So with these designs we’ve introduced a proposed new structure giving each and quick access to the information types in the sidebar…while automatically displaying upcoming events and recent reports…things that readers may not know about unless they went hunting.
Any and all feedback is much appreciated, so if you have any further ideas or ways you think the information could be structured we’ll do our best to incorporate.
I think you should go with Wireframe 1: professional personal brand. Color looks consistient, font is modern, business card avatar-thingy in the top right with social links, topics are easy to navigate. Second place goes to Wireframe 2.
First and foremost, I think your content has always been spot on! From a branding perspective, I think 1C is the freshest look and still in keeping with the “credibility” factor. The large background picture gives it a “publication” feel. You could change it up periodically too. I have to say I’m not crazy about the right-hand callouts (lighter blue boxes with white text) though. I think starting from “Upcoming” and down the column, it would be interesting to see what the page would look like using 3C’s right-hand nav. *my2cents*
Thanks for giving us an option to weigh in!
~Kathy
It takes longer to interpret letters than graphics and colors. That’s why a picture is worth a thousand words. We can learn a lot from environmental graphics. Exceptional environmental graphic designers make very few assumptions. How do you navigate your way through a city where you don’t speak or read the language? Shapes and colors. Red = stop Green = go. More important is to be mindful of individuals who are colorblind. I like all of these wireframes and I may be a dissenting vote to recommend focusing on a color legend (like USA today) to help us easily navigate our way through voluminous and meaningful content you publish.
Design 3 has the most modern feel, which is obviously good when talking about the web. It’s fresh and takes things in a new direction. 3B is the better colour scheme. If it incorporated the larger headings from Design 2 then win win!
the same about me) i already ko that here i can gat really useful and trustful (that is even more important) information) so i visit this site quite often) thanks for what you do!)
3C – easy access to all types of information in your blog (both reports and posts) and the most friendly layout.
Great points Stella, noted on the right images.
Lovely thoughts, appreciated!
What are your concerns Kathy on the right hand callouts? What should be done better?
Great thoughts Lon, noted on fast consumption.
Thanks Caio from Brazil, noted on the ‘easy on the eyes’ on comp 1
I agree, comp 3 is nosiest. I’m not convinced it’ll be the easiest to navigate, although it looks the most fresh.
King
Thanks for the honest and open feedback, I’m all for it. Noted on the clutter comments and making sure the interfaces need to be clean. I’m confident the folks working on this have the right skillset.
Yes you’re right, these are mockups or comps, not wireframes (which we did in last round) my mistake.
I read way too many blogs trying to get the “warm” fresh friendly feeling. They usually don’t get it right (I count one of mine here as well). Part of the appeal here is the Fortune 500 look. It reassures me someone is taking the content seriously.
Maybe you need a content strategist? I have a half-million of my own words to serve, and I’ve pretty well ground to a halt because it’s too much content. Which is why I’m currently immersed in Kissane, Halvorson & friends to teach myself the art of content strategy.
Maybe you need a content strategist? I have a half-million of my own words to serve, and I’ve pretty well ground to a halt because it’s too much content. Which is why I’m currently immersed in Kissane, Halvorson & friends to teach myself the art of content strategy.
Noted regarded the colours and fast navigation. We need to achieve as simple and fast as possible.
Very much agree with the sentiment around fast and customer centric. We will be looking to make best use of the latest CSS3 and HTML5 techniques to have the double benefits of achieving a fast and lightweight design that is still aesthetically pleasing.
Very much agree with the sentiment around fast and customer centric. We will be looking to make best use of the latest CSS3 and HTML5 techniques to have the double benefits of achieving a fast and lightweight design that is still aesthetically pleasing.
Thanks for getting back here!
I think when there is so much to present, the best way is to hint, not serve. If you know what I mean. I agree with Jeremiah’s rich content, then why come in between? Let the content do it’s job. best user interface is subtle. While what I saw was not at all subtle. Don’t compete with his content for attention, that’d be counterproductive.
I don’t have all the facts and data to purpose a better way out but if you’re using DISQUS they have this small notification below this comment box about using @mentions:disqus here. Those work best for notifying about something new. Also agree with @doolin:disqus about content strategy.
PS: I’ve less experience in field than you, but I am that user who’s experience is being created. Thus so flamed.
Thanks for getting back here!
I think when there is so much to present, the best way is to hint, not serve. If you know what I mean. I agree with Jeremiah’s rich content, then why come in between? Let the content do it’s job. best user interface is subtle. While what I saw was not at all subtle. Don’t compete with his content for attention, that’d be counterproductive.
I don’t have all the facts and data to purpose a better way out but if you’re using DISQUS they have this small notification below this comment box about using @mentions:disqus here. Those work best for notifying about something new. Also agree with @doolin:disqus about content strategy.
PS: I’ve less experience in field than you, but I am that user who’s experience is being created. Thus so flamed.
Somehow I feel (personal feeling) swiss style design manages information, aesthetics and neat-ness very well. Might want to look into that.
Hi Jeremiah!
Suggest to scrap 2C as it looks too similar to a LinkedIn profile page/identity.
I prefer the banner design concept in 3C to that in 1C – the 3C graphic concept in the upper banner relates to some of the modelling frameworks you employ and create in your IP. The graphic in 1C is not evident in its meaning/concept and relation to your subject matter expertise (and is less sophisticated).
I also prefer a multi-color pallet as in 3C to a single color (blue) pallet in 1C. The colors can be employed to denote your distinct themes/topics or areas of content. My only comment for improvement is to stick to the color pallet in the graphic employed in the upper banner – as is now the graphic employs colors that are not in the pallet.
Net – 3C is my recommendation with refinements to the colors in the graphic on upper banner.
Best Regards Always – you are brilliant!
Michelle Corsano
@mcorsano:twitter
I was going to say 3 to get rid of all the blue, but agree 2 would better suit.. with a change of colour(s)
Sharing clutter & size concerns too.
@jowyang:disqus First and foremost what messaging and tone are you looking to achieve through the blog? 3A and 3B are similar in style and tone e.g. corporate and authoritative
3C has a more rounded and dare I say it more ‘social’ angle to it
My advice is to put a creative brief together detailing what the blog conveys to the audience, get another round of mocks ups produced and let users decide which mock ups aligns with the creative brief
Only 2 comments. #1, what’s wrong with what you have. #2, where’s the mobile design?
I like 3C
I like 3C
Design 3 has to be the one. Definitely the most inviting of the set
Either 1 or- even better- 3.
Good point about being friendly vs projecting that the content is taken seriously and looking professional. One needs to find the right balance.
Seems like a popular theme has been to combine elements of #2 and #3.
Well, two things come to mind. It’s hard to read the small white text against a fairly light colored blue background. And secondly, it looses that “white space” (I can breath) feeling as opposed everything looking heavily boxed in. Which is why I’d be curious to see what 3C’s right-nav design/style would look like with the main content area of design 1C. Again, *my2centsworth*! ~Kathy
Been reading all the comments. Many like 3. The most recent discussion is interesting. But for me, a simple direct answer is I like Wireframe2. Thanks for getting your readers get involved on this.
THanks Jim, I do a redesign every 2 years as the technology features change. Also the way I distribute content and aggregate needs to evolve.
THanks Jim, I do a redesign every 2 years as the technology features change. Also the way I distribute content and aggregate needs to evolve.
Sans serif is hard to read, this is a fact. And compact text blocks, too.
Sans serif is hard to read, this is a fact. And compact text blocks, too.
My vote is for #2, I like the bottom section of #1 as others have shared – 2’s bottom part is a little too corporate, and each one looks the same. 3 is just wrong, with so many colors and images conflicting, I don’t see the brand as much as notice the clutter of colors. Even 1 has the background image which is unclear and doesn’t really connect me to your brand, and since a picture tells a thousand words, it sort of conflicts with your message, which is really you, your posts and ideas, your connections, events…so much going on, yet the content and you dominate the top.
Part of what is missing on all 3 is the social graph and conversations, which are sort of buried on each, and with a sampling of 5 folks, they don’t really seem to serve the purpose of the showing the dialogue that is going on. Graphically they stand out, but you get 5, and it is a text based medium that you are trying to make more interesting and visual, yet I could see this being more threaded towards conversations – which one of your posts really generated dialogue, as opposed to scattered comments from people with no real connection to the content.
I’ve seen this done by focusing on the richer conversations, rather than a collection of comments, because part of your brand is the intelligent consideration and discussion you promote; I want to find what really sparked your audience, not just a random collection of thoughts related to different posts. While it looks pretty, functionally it doesnt’ do it for me.
Lastly, your job board is pretty much buried on all of these, which won’t benefit your advertisers, it’s sort of lost on the side there, not necessarily a negative, just noticed how much it got pushed down, to the point of wondering if it is delivering value to your visitors and your advertisers, that just the marketing guy looking at it. Pushing it up would interrupt what you have going on…
My vote is for #2, I like the bottom section of #1 as others have shared – 2’s bottom part is a little too corporate, and each one looks the same. 3 is just wrong, with so many colors and images conflicting, I don’t see the brand as much as notice the clutter of colors. Even 1 has the background image which is unclear and doesn’t really connect me to your brand, and since a picture tells a thousand words, it sort of conflicts with your message, which is really you, your posts and ideas, your connections, events…so much going on, yet the content and you dominate the top.
Part of what is missing on all 3 is the social graph and conversations, which are sort of buried on each, and with a sampling of 5 folks, they don’t really seem to serve the purpose of the showing the dialogue that is going on. Graphically they stand out, but you get 5, and it is a text based medium that you are trying to make more interesting and visual, yet I could see this being more threaded towards conversations – which one of your posts really generated dialogue, as opposed to scattered comments from people with no real connection to the content.
I’ve seen this done by focusing on the richer conversations, rather than a collection of comments, because part of your brand is the intelligent consideration and discussion you promote; I want to find what really sparked your audience, not just a random collection of thoughts related to different posts. While it looks pretty, functionally it doesnt’ do it for me.
Lastly, your job board is pretty much buried on all of these, which won’t benefit your advertisers, it’s sort of lost on the side there, not necessarily a negative, just noticed how much it got pushed down, to the point of wondering if it is delivering value to your visitors and your advertisers, that just the marketing guy looking at it. Pushing it up would interrupt what you have going on…
Declan, thank you for the thoughtful response! I agree with the colors, I’m not sure that’s the direction I want to head. noted on social conversation…
Noted on the job board, glad you brought that up. Your points are great, I’m factoring these in for the next iteration.
Declan, thank you for the thoughtful response! I agree with the colors, I’m not sure that’s the direction I want to head. noted on social conversation…
Noted on the job board, glad you brought that up. Your points are great, I’m factoring these in for the next iteration.
Declan, thank you for the thoughtful response! I agree with the colors, I’m not sure that’s the direction I want to head. noted on social conversation…
Noted on the job board, glad you brought that up. Your points are great, I’m factoring these in for the next iteration.
Declan, thank you for the thoughtful response! I agree with the colors, I’m not sure that’s the direction I want to head. noted on social conversation…
Noted on the job board, glad you brought that up. Your points are great, I’m factoring these in for the next iteration.
Thanks Liza!
Thanks Liza!
Thanks Liza!
Thanks Liza!
Thanks, noted on clutter
Thanks, noted on clutter
Thanks, noted on clutter
Thanks, noted on clutter
Great question, we’ve already gone through that process and have documented findings, found other similar examples I was seeking an identified the audience and purpose.
Hi Jeremiah
I am maybe coming to this late and maybe my two comments were considered and moved on from:-
1/. Why show the entire content of the latest post? It uses 80% of your real estate. Surely you could write a version that gives a synopsis
2/. In my humble opinion ( I’ve been in digital one way or another since 92) there are way to many repeated start points for the same user journey.  Â
I just never have got myself involve much with Wireframe but after reading this I think I’m going to grt familiar with it. Thanks Jeremiah.
I just never have got myself involve much with Wireframe but after reading this I think I’m going to grt familiar with it. Thanks Jeremiah.
I am very new with this thing thanks to you to share this information with me. All feedbacks and tips are like more knowledgable thing for me.
Design 3 has the most modern sense, which is obviously good at the site. It’s fresh, and in a new direction of things. 3B is a better color scheme. If it is incorporated into a larger title from “Design” 2.