What happened?
Remember back when when I said I wasnt getting that Web site I hoped for?
I was only half right. To recap, me and three other interns were in charge of building a Web site. We had a grand scheme for all kind of features that basically boiled down to two catagories: Networking (user profies, comments, etc) and presentation (layout, images, etc).
We sought to build the site on some sort of Content Management System and we evaluated our options which all fell through. This when I made the aforementioned post. After licking our wounds we decided to just suck it up and do it ourselves.
From there I took designs given to me by one of the other interns and hand coded an entire news site from scratch. CMS be damned.
Thus Unami was born
What is so diferent about Unami?
Mainly the article page. Take a look below (you might have to click):
As you can see the article page allows for several layers of digesting the story. The top layer allows the reader to skim just the hed, sub hed, and the story highlights. If that interests the reader they can continue down into the article page.
The box next to the art lists all aspects of the story upfront. The multimedia is listed in bullet points so if the reader is not in the mood to read, they can cherry pick the video. There are also relevant links, because after all, this IS the internet.
The article is separated into tabs so the reader can pick and choose the part of the article they feel is the most interesting/relevant. Of course, at the bottom of each tab there is navigation so if the reader wants to read it in the traditional fashion they can. Within the article we also inked via lightbox the videos and pictures so the reader is not interrupted when they read the story (Warning: the video lightbox seems not to work on Firefox Macs…Im working on it.)
Essentially the crux of the storytelling is choice. The reader can chose what they want to read in a non-linear fashion. We try to visibly separate each aspect of the story much like a newspaper article would with sub heds within the story. We try to be very visual playing heavy on pictures and videos.
Is it perfect? No. But its a testing ground for some of the theories on young readers. Do they read long stories? Do they prefer a video to text? Do they just skim?
The Tech Side
While I have dabbled in HTML and CSS I have never done anything to this scale. I also know absolutely no javascript and only a little bit of Flash. I relied heavily on free tools such as Lightbox, Tabifier, and JS-kit comments. I can’t emphasize enough how grateful I am that these people put out their work for free. I also used the very cheap monoslideshow for the Flash rotator.
I took the easy route and did the whole site in tables. While I did have a working CSS-built article page, it rendered too differently in various browsers (Alas, my CSS skills are still a work in progress).
The worst part about the page is that I have to enter every article in by hand. I have to FTP all of the pictures and copy the URLS. It really makes you miss a Wordpress or a College Publisher.
That’s it!
So, there you have it. Be sure to let me know what you think in the comments. Constructive criticism encouraged! (Sorry for all the spelling errors, I typed this in a hurry)




5 Comments to “World, meet Unami (aka what Sean has been working on for weeks)”
Posted: Jul 20th, 2007 at 4:41 pm
I dig it. Nice job. I like that you’re playing to different ways of slicing into a story.
From this mock-up, I see the photo being very similar to the video. Do you think then the photo is necessary? I’ve seen some TV websites basically transcribe a broadcast as the text story and also provide video. I was disappointed, and almost confused on the “right” way to digest a story.
Posted: Jul 24th, 2007 at 5:12 am
Thanks Rich. We choose to allow the user choice. Want video? Its there. Don’t have time? Pics and text will do.
Posted: Jul 31st, 2007 at 3:44 am
Hey Sean,
Here are my thoughts on how you presented the information on the article page:
It looks clean
I’m a little sad that you gave up on the CSS
The “Story By” creditline and date appears below the photo, which kind of implies that’s who took the photo.
This could be just me, but I’m not used to seeing subheads in tabs. I expect tabs to be labels, and the first time I looked at the subhead I didn’t understand they were the next parts of the article. I don’t know what kind of clicks you get on those tabs, but I do hope you measure them.
[Totally anal] Why are there bullet points for the list items under Multimedia, but not ‘Learn’ or ‘Connect’?
Good luck without the CMS — hope you have the stamina to keep updating the site!
Posted: Jul 31st, 2007 at 2:27 pm
Thanks for the feedback Joe. The tabs were probably the biggest risk we took. But if you look at the bottom of every tab is a link to the next one to keep the “old-school” story flow.
We have have a usability test tomorrow and Ill certainly post the results here.
Posted: Aug 14th, 2007 at 7:19 am
[…] learned a lot about how to get things done due to the nature of my particular situation (I had to create a site). Therefore, I had to jump to various departments and ask/demand that certain things get done […]
Leave a Reply