EffectiveUI Blog

I wanted to highlight two of the really cool (of many) features of Herff Jones’ eDesign.

The ability to manipulate photos. Keeping in mind that eDesign is a yearbook app and not a Photoshop Express clone (we’ve got too many of those already), what it’s good at isn’t photo correction, but in manipulating the image for best results in a yearbook; no gamma correction or red eye tools, or blurs or other image tools I’ve never understood … just straight up masking with shapes and objects.

You can mask an image in a shape, which is cool since no one wants an entire book of square photos.
The current set of objects includes your basic shapes: circle, square, star, polygon, but any shape is possible (not promising anything, mind you, just saying). Being able to mask photos is awesome. Not only do you not run the risk of cropping the original digital copy, but you can adjust the mask right up until you commit the layout, so changing things to make more room, etc, are easy and require no additional work on the media.
When I did yearbook it was measure 2-3x then cut once, of course we were working with actual physical photos, so once cropped, it was done, there was no undo, and the only way to reuse was to crop smaller.

You can also turn text into an object, allowing for some cool text/photo effects. Taking text, and allowing an image to fill it, allows for some creative page headers. It’s a one way process, so changing text once it’s converted to an object isn’t an option, which could be inconvenient, but eDesign just launched so give it some time :)

eDesign packs in a ton of features, the ability to fully produce a school yearbook, entirely online is no small feat.

Tired of your current job? Not challanged? Email us!

Posted in Design, RIA, user experience | 1 Comment »

I was gonna post this on my personal blog, but then got to thinking, “self” I said.

“Yes, me, what’s up?”

“This should be on the EUI blog, since it’s more about UX and features, you can post something pithy and random on your blog, maybe the latest A-Team movie rumor”

“You know, you’re right!”

That was pretty much the exchange, so here it is. With the launch of Aviary, and Pixlr, recently, and Photoshop Express a while back, I was wondering why we need three online Photoshops.

I set out to test a few simple tasks. Simple because I’m not a designer and not very good with Photoshop in general, so the adv stuff I’ve never known how to use.

The test items were: Using a photo from my computer, Using the eraser, doing any kind of effects on the image, adding text, and just general getting around the UI.

For ease of reading and not typing the product name each time,

1 = Aviary

2 = Pixly

3 = Photoshop Express

Using a photo from my desktop

1. No trouble at all. The new dialog offers, blank or upload.

2. No functionality for uploading from computer. I could edit the image from URL. I’m guessing it still uploaded the image though, kinda lame, since my mom would have no way to get an image up on a site.

3. Not only upload, but a full media library type experience, so you can upload several and then work with more than one image. You can also pull in from online photo sharing sites, like Flickr, picasa, etc.

Winner: Photoshop Express.

Eraser Tool

1. pretty self explanatory, lots of shapes.

2. easy to find, lots of shapes.

3. Strangely, I couldn’t find it. If there’s an eraser in Photoshop Express, it’s well hidden

Winner: Pixlr and Aviary for the tie.

Effects

1. lots of filters and photo tweaking tools. The types of things I don’t understand or know how to use. Nothing “built in” like Red eye or pixelize.

2. Includes some cool built ins. Probably the most useful ones that some one editing photos would want. posterize, pixelate, water swirl, etc. Very handy and easy to apply.

3. Comes with a few basic operations; red eye, blue, pop color (the best one IMO)

Winner: Pixlr

Text

Who doesn’t put text in a photo when editing it? The test photo I used was of the Obama rally in Denver this past weekend, 100,000 people attended. I was one of them. I wanted to add “This is me”

1. Two font choices, but what’s cool is you can rotate, resize text, and then edit in place. Editing in place uses the text in it’s transformed state, which is cool.

2. Lots of fonts to choose from, including some asian scripts. No resize or rotation control. More intuitive look and feel. Like photoshop desktop, with font properties in a top menu bar.

3. No text controls at all, unless they were hiding with the eraser tool.

Winner: Aviary

Overall UI and UX

1. Very open office, X11 feeling. Controls are floating buttons over the image so that’s a bit weird. You can’t move them or anything.

2. Very clean UI, even if it is a Vista theme :) The top menu bar matches, very polished.

3. Since controls are a minimum, they’re just in a single bar along the side. I guess it’s a side bar, it doesn’t overlap the image or anything, it’s essentially part of the chrome of the app. When you’re tweaking something like pop color or saturation, another bar appears along the top of the image area.

The live preview of these types of changes is pretty nice.

Winner overall UI: Pixlr

So from a standpoint of usability, and features, I’d have to say, Pixlr is the winner. The only real problem is not being able to upload a photo directly from the desktop.

Posted in Design, RIA | 5 Comments »

If you’re at all aware of the class ring, yearbook, cap/gown industry, you know there’s two main players. Herff Jones, and Jostens.

Herff Jones came to us, to help solve their online yearbook problem. They had two goals; provide an incredible experience to their users, leapfrog their competitors. We thought we could do that :)

Herf Jones’ old application was truly… well… let’s just say, not so hot. It took literally minutes to move around throughout the app, the experience was truly not good. It wasn’t a very viable product.

Enter us :)

We worked very closely with the Herff Jones team, figuring out exactly what their application needed to do. The leading offline competitors were InDesign, Quark Xpress, tools like that. So our app had to compete with offline apps, even more than the existing online ones (Not really much to compete against there) offering from Jostens. I’ve covered some of the ways we compete on features here. The other upshot of eDesign, is that it allows  yearbook staffs to work whenever, where ever they want or need to. The old model required everyone to be on campus in the classroom, that’s where the licensed computers were, that’s where the work had to be done. eDesigh, an RIA in the browser, can be accessed anywhere!

We spent 3 months doingbuilding a Proof of Concept functional demo, before even starting the project. That demo was so compelling (even though all parties new it was vaporware at that point) that the sales force at Herff Jones, was able to take the demo video out and sell eDesign, to customers.

Of course we won’t see the real ROI story for a while, school just started after all, and yearbooks don’t go to print until much closer to the end of the school year, but seeing just a sales increase of that magnitude, on essentially vaporware, shows how much the industry and its customers were ready for something new and better, than what they had. This application, will likely revolutionize yearbook production for years to come, cuz of course it’s never ‘finished’ :). (added: 10/13) The yearbook sales cycle takes place in around the middle of the school year for the next school year, so sales based on the released application, not a functional demo will begin to materialize in the next few months.

It’s pretty amazing to work on something that has such a dramatic impact on a company, and even it’s customers.

We’re doing great things, we’ve got a great team that keeps on growing. Why not join us?

Posted in Business, Design, Development | No Comments »

To follow up on my post announcing eDesign, I wanted to talk about some of the specifics. This app is way more than one, or even two blog posts. I mean really, it’s a full fledged desktop publishing GUI, built in Flex.

This post will focus on some of the cool image stuff this app is capable of.

The main challenge was that the existing offline solutions were pretty well established applications; InDesign, Quark Xpress, etc. The online products… well we’ll pretend there wasn’t one before this :)

eDesign had to do enough of what the leading offline tools could do InDesign does to be on equal footing. To that end, image manipulation was a big one. Not just in the “compete with inDesign offline tools” category, but also in the “be useful for yearbook staffs”

The first cool feature is masking off an image in a shape. Cropping it to fit.

By dragging an image over into a shape (circle, square, star, etc), you’re telling that app that the shape will be the crop of the image. Now you can position the image or the

shape, to frame just what you want. You can resize and move the two elements independantly, getting it all lined up just right. each shape, image, text field, etc has scaling and rotation controls, allowing for complete layout control.

I remember having to bust out my red pencil and ruler when cropping an image, and we had no fancy stars or circles! It’s crazy easy to drop a photo into a shape, get it all lined up right, and move on. No pencils, no tagging the image, you’re done, move on.

Another pretty cool, ok really cool, feature is taking text, and turning it into a shape, that can be an image mask. “School Daze!” with a class photo behind it. You start with whatever text you’d like to use, as plain ol’ everyday text. eDesign will then take that text, and convert it into a shape object, just like the circle, star, square, etc.

From there, you just select a photo, and drop it onto the shape, and BAM, as Emeril would say, you’ve got a really cool photo backed text

block, that you can resize and scale as you’d like.

That’s it.

What’s really cool, is that this app was about 8 12 months in the making. 8 12 months, for a pretty much full blown desktop publishing platform. Image, layout control, project status, assignment of pages to individual, even check out tracking, so everyone knows who is working on any given spread at a time.

I’ve got a few more posts on this app, since it’s got way more features than I want to try to cover in a single post, so stay tuned. The next one, will likely be the business side of the story, which is really interesting, IMO, though I suppose there’s a bit of bias there :)

Stay tuned.

Stuck on projects you don’t find interesting? Want to work on projects that make a difference, and change lives? Email us.

Posted in Design, Development | 2 Comments »