Portal Design
(
155)
Wed 2008/08/20 16:48
Folks who read the RSS feed instead may want to pop over to have a look at the new Gateway redesign.
Thank you to all members who provided input for the new design exactly one month ago today.
There are many reasons for a redesign and I will go through some of them. The first reason is that attempting to design a top page to convert new visitors and also cater for current readers at the same time is not possible. The place ends up being a mess for both new visitors and current readers.
I've seen your feedback in the Puchi Blurbs - some of you love it, hate it and some of you even think its more messy than before! Well at least its not messy for the first time visitor too ^^;
Its difficult to please all and I will fail miserably if I set out to do so (Bill Cosby).
I spend much time working with other site owners to drive traffic to this site but if the first run experience sucks then conversion is going to be low. My task is to convert new visitors into regular users buy cutting out as much irrelevant information as possible. For example, I want new visitors to note the quality of the articles - figure releases before they are announced, Japanese office tours, life in Japan etc. But New visitors don't necessarily need to know about the member articles or puchi blurbs as soon as they arrive - they can get to that later if they decide to stay on.
On the other hand, I need to make sure that regular visitors don't see the marketing blurbs or elements that clutter up the experience even more. Many blogs in particular are stuffed with so much stuff in the side columns that users get desensitized to those areas and completely ignore them.
This is the first iteration of the design and I will be making changes based on user behavior. I want to make the Gateway for regular users more configurable.
Another site where you will see constant changes to the layout based on user behavior is iknow.co.jp - keep your eye on it if you are into the usability thing too.
Thank you to all members who provided input for the new design exactly one month ago today.
There are many reasons for a redesign and I will go through some of them. The first reason is that attempting to design a top page to convert new visitors and also cater for current readers at the same time is not possible. The place ends up being a mess for both new visitors and current readers.
I've seen your feedback in the Puchi Blurbs - some of you love it, hate it and some of you even think its more messy than before! Well at least its not messy for the first time visitor too ^^;
Its difficult to please all and I will fail miserably if I set out to do so (Bill Cosby).
I spend much time working with other site owners to drive traffic to this site but if the first run experience sucks then conversion is going to be low. My task is to convert new visitors into regular users buy cutting out as much irrelevant information as possible. For example, I want new visitors to note the quality of the articles - figure releases before they are announced, Japanese office tours, life in Japan etc. But New visitors don't necessarily need to know about the member articles or puchi blurbs as soon as they arrive - they can get to that later if they decide to stay on.
On the other hand, I need to make sure that regular visitors don't see the marketing blurbs or elements that clutter up the experience even more. Many blogs in particular are stuffed with so much stuff in the side columns that users get desensitized to those areas and completely ignore them.
This is the first iteration of the design and I will be making changes based on user behavior. I want to make the Gateway for regular users more configurable.
Another site where you will see constant changes to the layout based on user behavior is iknow.co.jp - keep your eye on it if you are into the usability thing too.
Below is what you will see the first time you arrive. Its basically whats known in the web industry as a Landing Page. Here I have only 3-7 seconds to convince the user to explore more.
With help from your definition of DC Com, The catch phrase I use sums up what the site is about - "Your portal to Japan."
The slides show strong articles from the Japan and Figure categories.
Below the top band are figure articles on the left and Japan articles in the center. The bottom of the center column is blurb to let folks know what this site about and who runs it.
This is a similar approach to what first time users see at Flickr. The first time user will see a photo with a simple blurb. Users who are logged in see something completely different - items which they care about.
With help from your definition of DC Com, The catch phrase I use sums up what the site is about - "Your portal to Japan."
The slides show strong articles from the Japan and Figure categories.
Below the top band are figure articles on the left and Japan articles in the center. The bottom of the center column is blurb to let folks know what this site about and who runs it.
This is a similar approach to what first time users see at Flickr. The first time user will see a photo with a simple blurb. Users who are logged in see something completely different - items which they care about.
First time visitors click on the "New Visitor?" button and arrive in the welcome page where I give them the nitty gritty about the site. People who have already clicked through to this page show some interest and will invest more time to read but I still need to keep the blurb short.
From here, users jump into the Figure or Japan portal or dive straight in to see what regular users see by setting their Gateway to show content for regular users.
From here, users jump into the Figure or Japan portal or dive straight in to see what regular users see by setting their Gateway to show content for regular users.
Below is the regular user Gateway. The only main difference is the header bit. The loading time for the previous thumbnailed header is now used more efficiently for my news items instead. They are updated more frequently than Articles so I thought it would make more sense to stick them at the top.
Member news has been extended to 6 items. I'm quietly pleased with the images for articles. The original designs had a black band with transparency at the top and bottom for the text - quite common on many web2.0 designs these days. The black band looked quite bad and tried out a gradient instead - really liked the look of it ^^;
For those who are into CSS, just make two PNG gradients and span the background across two divs - one at the top and one at the bottom of another div which holds the image. If you want this to work in ie6, you will need to use something like jQuery ifixpng.
Member news has been extended to 6 items. I'm quietly pleased with the images for articles. The original designs had a black band with transparency at the top and bottom for the text - quite common on many web2.0 designs these days. The black band looked quite bad and tried out a gradient instead - really liked the look of it ^^;
For those who are into CSS, just make two PNG gradients and span the background across two divs - one at the top and one at the bottom of another div which holds the image. If you want this to work in ie6, you will need to use something like jQuery ifixpng.
After launching the portals and studying user behavior, I realized that portals are not really used by regular readers. Most regular readers want to catch most of the content which is why they hit the top Gateway instead.
Thus I have made the portals into Landing Page type designs - still needs improving though.
The top band shows the most popular articles and gives the new user a taster of the goodies inside. This is the Figure Portal
Thus I have made the portals into Landing Page type designs - still needs improving though.
The top band shows the most popular articles and gives the new user a taster of the goodies inside. This is the Figure Portal
The Japan portal is the same - popular articles at the top and arranged in a way to convince new visitors to stay on.
And this is the Japanese Gateway for the first time user.
There is still much work to do around the site and will be migrating to the new design step by step starting with my profile page, detail pages for articles and News Items and then onto pagination pages and gallery slides etc.
Items on my immediate to-do list are add more images of Haruka and Mirai to the header rotation pool and display categories for News Items.
Adsense users will know that Google dropped the referral program. As a result, I got mail from them asking me to end the Google DC Rewards - this is another reason for the redesign as I needed to remove a bunch of code. The DCReward feed should be replaced with the standard feed that you have registered on your site. I still want you to make money and will be announcing another way for you to easily do so soon.
There is still much work to do around the site and will be migrating to the new design step by step starting with my profile page, detail pages for articles and News Items and then onto pagination pages and gallery slides etc.
Items on my immediate to-do list are add more images of Haruka and Mirai to the header rotation pool and display categories for News Items.
Adsense users will know that Google dropped the referral program. As a result, I got mail from them asking me to end the Google DC Rewards - this is another reason for the redesign as I needed to remove a bunch of code. The DCReward feed should be replaced with the standard feed that you have registered on your site. I still want you to make money and will be announcing another way for you to easily do so soon.
All items that were available in the previous header menu are available in the new orange band. The Secret Menu contains a way for you to reset your browser cookies so that you can see what I am up to in terms of trying to convert new users.
The Secret Menu also contains a new section called Nekkid 2D girls for the 2D girl fan (aren't we all?)
The Secret Menu also contains a new section called Nekkid 2D girls for the 2D girl fan (aren't we all?)
From now on I will put all items in Your Menu. If you are not logged in then you wont see this.
A form is now above the Puchi Blurbs and includes a counter. Any URL you enter is enabled with snapshots too. let us know what you are looking at, any interesting discoveries etc. The next step is to integrate into twitter too.
And just to recap from the history of dannychoo.com article where you will see more - this is what the website looked like back in the year 2000.
Changes for the better are good. Its like introducing a new work flow into your life - can be difficult to get accustomed to at first but will be beneficial in the long run - until its time for other changes for the better. And thus the cycle continues. Embracing change is good - its the only way forward.
Changes for the better are good. Its like introducing a new work flow into your life - can be difficult to get accustomed to at first but will be beneficial in the long run - until its time for other changes for the better. And thus the cycle continues. Embracing change is good - its the only way forward.
This is what dannychoo.com looked like in 2002.
Through each design iteration, I've always been analyzing user behavior so that I can add/remove/change what was necessary to improve the user experience. At Amazon, we had internal tools that enabled us to set up intricate tests to see what users clicked on etc. Now Google offers Google Web Optimizer. Its a new tool that enables you to try out different designs of your website. Google will show different layouts to different visitors of the same page. Google will also handle the sessions involved. The tool will generate a report to show you which design was the most effective in converting your users. The video below explains more about Web Optimizer.
Through each design iteration, I've always been analyzing user behavior so that I can add/remove/change what was necessary to improve the user experience. At Amazon, we had internal tools that enabled us to set up intricate tests to see what users clicked on etc. Now Google offers Google Web Optimizer. Its a new tool that enables you to try out different designs of your website. Google will show different layouts to different visitors of the same page. Google will also handle the sessions involved. The tool will generate a report to show you which design was the most effective in converting your users. The video below explains more about Web Optimizer.
The hexagonal theme continues with this orange look n feel in 2006.
I will be using Google Web Optimizer to test out different messages/graphics/layout on the first time user Gateway and use those results to increase conversion of first time visitors.
I will be using Google Web Optimizer to test out different messages/graphics/layout on the first time user Gateway and use those results to increase conversion of first time visitors.
And this is what the site looked like just over a year ago. Time certainly flies.
Ah, nearly forgot to mention that some layout and navigational features have been left out of IE6 and IE7 - Both browsers contain too many CSS bugs. Firefox and Safari work well but iPod Touch/iPhone look a bit odd.
Folks who have wide screens will enjoy both of Haruka-chans twin tails ^^;
Let me know if you have any issues viewing the site and state your browser and OS type.
And thanks to all members who have been helping me fix bugs in the Puchi Blurbs ^^
Ah, nearly forgot to mention that some layout and navigational features have been left out of IE6 and IE7 - Both browsers contain too many CSS bugs. Firefox and Safari work well but iPod Touch/iPhone look a bit odd.
Folks who have wide screens will enjoy both of Haruka-chans twin tails ^^;
Let me know if you have any issues viewing the site and state your browser and OS type.
And thanks to all members who have been helping me fix bugs in the Puchi Blurbs ^^
Its that time of month again when we take a look at the previous month stats, most po...(more)
Tue 09/04 00:50 comments (38)
Student & Authorized Chicken Slapper
I do like your new Design Danny. Its interesting to see the photos you posted on the changes you have made over the years. I only joined in July so I have only seen the previous layout design. The hexagonal one reminds me of those old Street Fighter Arcade games lol.
(ID #271272) Posted on 2008/08/20 17:10
Student & Authorized Chicken Slapper
Oh and Nice touch on the little brief summary being integrated into the picture.
(ID #271273) Posted on 2008/08/20 17:11
I think the brief summary needs a bit of outline or shadow to make it stand out more.
(ID #271788) Posted on 2008/08/21 02:20
I like the new design, although got confused first time I saw it.
(ID #271291) Posted on 2008/08/20 17:23
Lol I was abit shocked and lost for awhile. But I like it! Love the design, and it looks like DannyChoo's copyrighted color is orange ^^
(ID #271618) Posted on 2008/08/20 23:37
Admin in the egg
I have to agree, just like how ppl should use vista a little more before go ranting about it to damnation. Anyway, after a little confusion at first glance. I took a closer look and the design is well thought-out and have better accessibility IMO. Great work danny and who ever contributed ideas.
(ID #271653) Posted on 2008/08/21 00:23
Dyslexic Social Studies student, struggling gundam modeler and gamer
I like the new layout very much Danny, nice work! You really do work hard for your readers. I also liked the fact that the member news on the top page has gone up to a capacity of six articles, saves me time from clicking on "MORE"
(ID #271292) Posted on 2008/08/20 17:24
Love your new awesome site design! lol, it's nice to put up a history of the site layout since I just registered recently so I only saw the previous layout ^w^
(ID #271296) Posted on 2008/08/20 17:25
Really liking the new layout. From a quick once-over, there isn't anything wrong, but I assume there are little things (there always are, with anything) to fix/tweak. It's really interesting to see how the design has progressed. I personally am of the opinion that you have one of the best/most usable designs around, so it's always interesting to see what you do next.
(ID #271297) Posted on 2008/08/20 17:26
Actually, when viewing an article, it's the same layout as previous, albeit with a now-broken left-sidebar as you have moved the Danny's News and such up to the top on the main page. Unless this is somehow just me, but I doubt it...
(ID #271299) Posted on 2008/08/20 17:28
Director/代表取締役
Yeah that was a technical issue ^^; When that page gets migrated to the new design then it will be fixed.
(ID #271331) Posted on 2008/08/20 17:45
Student Engineer
oh yeah- load times were agonizing before- now the page loads in under two seconds. I loved the landing page when I came here tonight- it was an explosion of vibrant information, then my eyes redirected and all was great. Fantastic work, Danny.
(ID #271300) Posted on 2008/08/20 17:28
marvin (Registered on 2006/12/25 00:30)
time flies indeed, I miss those orange hexagons. ^^ love the new design. btw checking out your 2002 design... DC OS, looks like they used the same standard on your sigma lens. ^^
(ID #271304) Posted on 2008/08/20 17:30
duncanmc (Registered on 2008/06/13 05:55)
hexagons were cool.
(ID #343808) Posted on 2008/10/23 21:04
Programmer, otaku, shinigami
Resistance to change...really hate the gateway...
(ID #271307) Posted on 2008/08/20 17:32
Director/代表取締役
lol
(ID #271332) Posted on 2008/08/20 17:45
http://animenlife.blogspot.com
You are not alone here.... lol.. but I dont *hate* the portal.
(ID #271778) Posted on 2008/08/21 02:09
Student/Part-timer
yea load times seem to be a bit better for me at least... I'm really not picking when it comes to layouts, as long as I can cntrl+f things Im happy lol I do wish the "Your menu" was still somewhere on the front page though...
(ID #271319) Posted on 2008/08/20 17:37
Student/Part-timer
that would be "picky" not "picking" (^_^ ')
(ID #271323) Posted on 2008/08/20 17:38
gotta admit, takes a while getting used to the new layout say danny, i think you should add some padding to your articles, the articles look rather cramped. eg the page with strike witches and kanu oh and the excerpt on the text? i do believe it's better to have a background for it, the contrast would look so much better... hope you don't mind me nitpicking haha
(ID #271338) Posted on 2008/08/20 17:49
Director/代表取締役
Thanks - padding added.
(ID #271347) Posted on 2008/08/20 17:55
Liking the new layout, can see more of mirai-chan at the header^^. Nekkid 2D Girls... :p
(ID #271341) Posted on 2008/08/20 17:51
Hard to believe that's what DC looked like a year ago. I wasn't even around for that, and I've seen the site go thru at least a couple of revisions. DC is ever evolving. Liking the extended mem news post. Was always disappointed when posts got pushed down too fast. Site looks clean and loads fast, and while they are meant to be subtle I can appreciate the details of layering and priority to popular DC features. I'm sure in a few months when DC evolves again people will say they like this format better. ^^;
(ID #271345) Posted on 2008/08/20 17:53
JR. College Student
I don't like how the article headers and beginning text are integrated into pictures. It really threw me off and it feels weird being able to only read on after clicking an image. Everything else is fine, but I prefer the articles be displayed the way they were previously, or a hybrid of some kind. That's just me though...
(ID #271359) Posted on 2008/08/20 18:05
JR. College Student
Oh and are there any plans for an edit button? That would be nice.
(ID #271360) Posted on 2008/08/20 18:08
Professional Tennis Court Cleaner/Haruhiist
Any "Friends" app for the site???
(ID #271377) Posted on 2008/08/20 18:24
Engineering research
Many blogs in particular are stuffed with so much stuff in the side columns that users get desensitized to those areas and completely ignore them. *nods* so true. request: can we have some basic format control in the comments? eg. bold, highlights etc. =x
(ID #271386) Posted on 2008/08/20 18:29
Student and full-time otaku
Jup, the new design looks good, and feels fresh. I do hope you're also going to encorporate the main page theme into the article pages, because that would really make if feel like one 'whole' site. As always: good job Danny, and keep it up!
(ID #271395) Posted on 2008/08/20 18:34
I wouldn't say it's better than slice bread, but something that came out of nowhere after wanting to check news updates. I've already gotten used to it pretty quick, so I think it's doing a bang of a job.
(ID #271398) Posted on 2008/08/20 18:40
Wonderful site design Danny. I want to add some thing here. If i click on the comment button and change my mind and dont want to add any comments, there is no cancel button to hide the comment box. Then only refresh of the page removes the box. Can you add a cancel button to the posts? please? Also, thanks to Danny, i learnt something about jquery today. Till now, i was wondering how he managed to load an image in the background of the black gradients and with the text on top. Should try that in my blog now or sometime in future ;)
(ID #271399) Posted on 2008/08/20 18:41
Wonderful new design Danny...you've outdone yourself again...Um the only thing that bothers me a bit is the front page...I mean since I'm already logged in and not new, I would rather see a 'Welcome Back!' rather than 'New or Regular' and keep having to click regular...but other than that every is straight forward and easy on the eyes...and I see you've kept your promise about the Nekkid 2D girls for the regulars ;)...
(ID #271416) Posted on 2008/08/20 18:55
Director/代表取締役
Unless you keep deleting your cookies you should not see that over and over again.
(ID #271428) Posted on 2008/08/20 19:09
Oh ok, well I guess there is no problems then...thanks!...
(ID #271433) Posted on 2008/08/20 19:12
Engineering research
^First spam? O.o
(ID #271452) Posted on 2008/08/20 19:44
The new design looks very nice. GJ!
(ID #271455) Posted on 2008/08/20 19:48
I like the new design a lot - for a portal site, it's pretty awesome. :)
(ID #271456) Posted on 2008/08/20 19:48
Pretty neat organization of informations :D i like it~ Orange is definitely a nice colour to use. You have just make something good to be even better :D ganbatte~!
(ID #271461) Posted on 2008/08/20 19:58
Director/代表取締役
Love your avatar!
(ID #271523) Posted on 2008/08/20 21:16
I prefer this new portal I guess. Great job! whoa, looking at the designs from previous, you've come a long way, moving on with web design trends, hehe. *Thumbs up* but still the 'Post Comment' links in each article doesn't allow me to login!!!!!! Or is it only me? I'm able to fill up my id and password but once I click login nothing happens. I'm using Firefox 3 on my XP and OS X, both didn't work for me.
(ID #271464) Posted on 2008/08/20 20:09
Director/代表取締役
Sorry about that - its a bug on this end.
(ID #271522) Posted on 2008/08/20 21:15
TK-8316 / 宅男 Otaku / 工程师 Engineer
it happens to my workplace PC too. mine PC at home is fine. both using firefox 3.
(ID #271697) Posted on 2008/08/21 01:16
IT TechGuy
Looks pretty good, i have to say. more easier to navigate your site every time you upgrade your layout. But still think, there should be a room improvement in the comments post.
(ID #271465) Posted on 2008/08/20 20:13
Otaku/Computer tech/Student
I'm loving it, Danny. (Bala-ba-ba-ba) xD I'm really trying to study what you do and how you do it very closely, as I'm still learning CSS myself and I have high expectations for my site within a few years.
(ID #271483) Posted on 2008/08/20 20:39
Sorry but i prefer the "old" page of welcome, the new one disturb me but it's perhaps a question of use.
(ID #271485) Posted on 2008/08/20 20:41
I'm sure we'll all get used to it. 8D It always looks fantastic through my eyes :]
(ID #272371) Posted on 2008/08/21 11:59
This site is an ADVENTURE! for serious... *thumbs up*
(ID #271490) Posted on 2008/08/20 20:42
Love the new design, eps the "Secret" Menu lol
(ID #271495) Posted on 2008/08/20 20:46
Student, Freelance Figure Review Writer
you've outdone yourself yet again! nice look on the new layout, Danny! ah, does your site still support IE6?
(ID #271512) Posted on 2008/08/20 21:04
Director/代表取締役
not really. You using ie6?
(ID #271521) Posted on 2008/08/20 21:13
marvin (Registered on 2006/12/25 00:30)
I do, only at the office, works fine on IE6.
(ID #271567) Posted on 2008/08/20 22:30
Student, Freelance Figure Review Writer
Not at home, but in college. I'm okay with it cos I'm using Portable Firefox on my USB Thummy. But some of my friends who wants to visit your site can't since they are using IE..
(ID #271570) Posted on 2008/08/20 22:34
Student, Freelance Figure Review Writer
more like rendering issues... T~T
(ID #271628) Posted on 2008/08/20 23:52
I liked the hexagonal theme with this orange look very much The new one,is also very nice
(ID #271516) Posted on 2008/08/20 21:06
http://animenlife.blogspot.com
Yeahh... Wow,.. a lot of history involved in here...
(ID #271777) Posted on 2008/08/21 02:07
Dropping computers, starting all over again at Journalism
I've been following the redesigns, and I think this one is great! Best so far, and it's really an eye catcher. Envy... wish I had a portal like that. :P Just started migrating from wordpress.com to self-host, but I realised now it'll take months to complete... I'll pretty much have to change all posts, and it's almost over 1000 by now. No pain no gain. :P
(ID #271531) Posted on 2008/08/20 21:28
Director/代表取締役
can you write a script or find one that does an import for you?
(ID #271559) Posted on 2008/08/20 22:15
Software Engineer
Nice work Danny and obviously lots of thought has gone in to it. Good to see even with the MASSIVE amounts of traffic you get each month you're still driven for improvement .... either that or your just a pain in the arse perfectionist!
(ID #271534) Posted on 2008/08/20 21:30
Director/代表取締役
definitely don't aim to be perfect (not possible) - but always want to improve.
(ID #271561) Posted on 2008/08/20 22:16
nice evolution over the years.
(ID #271535) Posted on 2008/08/20 21:32
Meimi132 in Leicester of Leicestershire of England of Europe of THE WORLD!! (Registered on 2007/12/04 05:05)
(University)Student
I actually love the new layout now. Not sure quite why... but it's really cool! And I was iffy about it at first!!!
(ID #271555) Posted on 2008/08/20 22:10
Love the portal, it looks great and its got a good flow. The only suggestions (very small) I have are that the javascript slideshow moves kinda fast (especially for the articles with 3 line exerpts) and the footer could use some more padding. The "more" link at the bottom of the "about" section is very close to the "secret menu" headline. I'm on Firefox 3 and OSX. :)
(ID #271580) Posted on 2008/08/20 22:44
Receptionist/ Accountant/ Junior Designer/ Illustrator
I love it! Very user-friendly, well.. after you end up being a tad confused for a few seconds XD It's clean, smart, organised and gets right to the point. Even now, it is amazing to see how the site has evolved... (b^o^)7 Omedetou Danny!
(ID #271606) Posted on 2008/08/20 23:17