Tag Archives: small packages

Update: February 2013

23 Feb

On another note, it’s extremely comforting to listen to one of the best StarCraft players in the world curse and panic when you yourself are working on frustrating things.  Yes, I finished the “Small Packages” project and am studying to take the GRE.

Writing Process and Rant/Rave: The “Basic” Website

4 Jan

So now that the demographics half of the report is fully drafted, I can move on to drafting the analysis of the website.  Which presents its own challenges.  (Yes, challenges – not a euphemism for “headaches”.)

When I’m writing a report, I typically need to use the most direct and graphic language on the first draft.  All the details need to come out, in often excruciating detail.  This is doubly true when the report, like this one, does something I’ve never done before, because injecting tact at the beginning muddies my thinking.  It’s time-consuming to write and trim so much, but so far it works better than to outline and try to hit bullet points.  So dumping out my thoughts about this website is the first step in an inevitable process.


The problem with critiquing the website is that there’s nothing wrong with it.  It’s handsome, it includes working links to everything the clients want to offer the public, and it loads fast on every browser.  But as a user experience designer, or even a user who’s played around with it a bit, it doesn’t perform its function.  How do you a tell a perfectly nice client that just had their website revamped by a probably (paid) web designer and is evidently happy with the new look, that it doesn’t work?

I consider this a problem of the times, the fact that we’re still in the early days of the Internet.  Several years ago, big companies started having websites and this year we seem to have crested the wave started by LinkedIn and Google+ profiles.  To be someone, to be up-to-date and savvy and competitive, you has to have a website.  But there’s not a lot of thought about what it does and how it attracts consumers. And this is what upsets me about the “basic” website: pretty graphics and all of the expected elements (name, CV, portfolio, contact information), but no thought about how they’re put together.

Big companies needed sites for two big reasons: disseminating information (databases) and selling products (stores).  Their consumers are largely searching for them directly: you want a Dell computer, go to Dell.com.  But if you’re an individual or a small company, particularly one in an industry with tons of alternatives like entertainment, consumer don’t find you by searching, but by stumbling.  Your website is your flying shingle, a hand in the air saying that you exist and “Ooo, ooo, pick me!”  If a consumer finds you, your site’s front page has under five  seconds to convince them to probe further.  Dell.com does not need ease-of-use at every step to convince its users to stay.

My dear clients’ website is lacking in every basic usability affordance.  The front page is cut in half by a normal web browser, and it’s designed so that you need to look at both halves to make the content function.  Links look like graphics.  Graphics look like links.  Text (a catchphrase that appears nowhere else in the series or the site) is turned into a graphic  that looks like the only clickable link.  The most important material is tiny, and the minutiae is huge, and in one place the Most Important Thing is visually linked to two bits of minutiae in order to balance the composition.  The contact information is written out (so spammers can grab it), but it’s also a link, so you don’t know whether to copy and paste it or click it.  Basically, you go to the site, it looks pretty, but then you have no damn clue, as a new user, how to interact with it.  And even looking at it, there’s no way to positively state what product it’s advertising.

People pay other people to do the things they maybe could do but can’t be bothered with, so it doesn’t really surprise me that the clients skimmed over the page, said “Looks great!” and went on with what they want and need to do, which is make a fantastic series.  And at this point I make my living in other ways, so it doesn’t make me angry that the demand for graphic web designers is so high that not all of them will bother to make sure their work functions as well as fits.  But it kills me to have to state the obvious: your beautiful new site doesn’t work.  It wasted money.  What good is a shingle if you can’t open the door?

Mistakes: Lack of Defined Scope (Part II)

30 Dec

Still working on the report problem, but it’s starting to take on a finishable shape.  As nerve-wracking as deadlines are by definition, the good thing about setting one is the way they force your mind to focus on essentials.  This project will get done, and then I’ll be moving on to another thing or two.

The big thing I’ve discovered (which, again, shouldn’t be a surprise) is the extent to which both the usefulness and the pleasure of a project like this is curtailed when your clients are not as attached to the project’s success as you are.  In this case, it was an obvious hazard because I volunteered the project for my own experience and for free.  Usually when I’ve worked for free the client is either 1.) psyched and extremely cooperative (yea!), or 2.) apathetic, which means more work but not a real problem.  But I did not realize that in this case, the client’s decisions have created a real obstacle to completion because there are major sources of data I had to discount because halfway through the project I was not allowed access to them.  The final report is probably going to be of some use to the client: it provides more information than they had at the beginning.  But, really, being able to say “This is what 60% of your clientele is doing” doesn’t tell you  anything that’s worth building a strategy on.  My inner statistician is not happy.

So, my evolving solution to this dilemma is focus on 1.) what will be useful to the client, and 2.) what will be useful to my portfolio.  In that order, because the report is “due” before the portfolio.  To the client, the most useful parts of the report are:

  1. A list of viewers with as much contact information as I could find, and suggestions for ways to supplement that list, and
  2. A set of alternative layouts for the website.

My own portfolio needs wireframes, site maps, and task flows: those which are finished in time for the report will be going in there, too.

Next time, I’ll have to say at the beginning, “These are the kinds of information I’m going to need in order to successfully complete this report.  I understand that you might have concerns about sharing your database with a contractor, and it is perfectly fine if you would prefer to copy and send that information or to create a temporary passcode so you can track my activity.  But without that information, I’m afraid it’s not possible to provide the analysis you’re looking for.”  Etc.

Mistakes: Lack of Defined Scope (Part I)

21 Dec

Yes, that was more than a couple of days: the nastiest cold short of flu season knocked me out for about a week. If any freelance UX folk have suggestions on how to incorporate the unexpected into project timelines, please let me know in the comments.


Today I’m going to talk about the first of what I’m sure will be many errors that come with becoming a UX professional. In interviews, you’re taught to spin these as “learning experiences”, as if we’re all too delicate to admit to screwing up. (Gen X/Y, “everyone gets a trophy”, anyone?)  It’s actually kind of glorious to write and print in public “Yes, I messed up royally”.

The mistake I’m talking about today is a failure to establish a finite scope at the start of the project. One of my weaknesses, in any type of project, is the tendency to want to be comprehensive. I LOVE research, and (B)ig (I)deas, and it’s hard at times to accept that the assignment in question is not as weighty and meaningful, and that given the context, a small project can be as valuable as a big one. But then, of course, you get to the point where a deadline is looming and there’s not enough on paper. It’s a particular problem when the project has a really long timeline. This is not unpredictable, and it’s a common type of error for me, but like a cold, exposure to one error seems to have no effect on my resistance to its cousin :).

As I mentioned, this is a known problem, and over time I’ve learned to offset it by 1.) setting a series of hard stops for research, first draft, second draft, and citations, 2.) questioning the client or professor extensively to understand exactly what the project requires and then working from that outline, or 3.) picking a topic that’s so boring that I want to complete it as efficiently as possible. But as a not-for-profit job that I volunteered to do with no set deliverables and minimal requirements, the “Small Packages” project fell right into the gaps between those strategies.

With three to four weeks left on the project, I’m actually in pretty good shape in terms of submit-level material, in the form of wireframes, site maps, and user statistics. But the two pieces of the project that I expected to flow nicely into one another (the demographics and the website layout) are becoming more disparate.  Essentially, they’re dealing with two different user bases.

The demographics, collected from social media and YouTube statistics, are both shallower and more complicated than I ever expected. An earlier post spoke about the likely fans of this type of show, and to some extent the stats bear that out. But the redundancy of fans under multiple avatars means there aren’t enough data points to draw strong conclusions. Moreover, the relationship between those statistics and the behavior of those users cannot be extrapolated without surveys and testing, antithetical to the relationship this company wants with its fans. Oy.

The website layout has been easier to grapple with. The site has remained mostly static since I began work. However, without fitting into one of the rough demographic groups that make up the site’s main users (personas would require more access to data than this project has scope for), records of my own interactions with the site are not adequate indications of how the typical user experiences it. I do see a lot of simple opportunities to enhance the site’s playfulness, in a way that would be fun and appropriate to the company’s “brand values”. But I realized that would involve bringing in a different viewership, the kind that would be interested but not automatically gravitate to this show without being beckoned, and I get the sense that’s not where the company wants to go right now.

I have visions from “Project Runway” when the bodice and the skirt are both beautiful but they do not go together, and the designer (usually) has to ditch one half to preserve the whole.  Perhaps tomorrow I’ll have figured out how to combine the two.

(SP) Initial Site Map

6 Dec

The initial site map for the central parts of the site.

Shows the organization of the front page's body, plus the global header and footer.

Shows the organization of the front page’s body, plus the global header and footer.

If a wireframe resembles a blueprint of a building, the site map works similarly to the organizational chart for a business.  Both give you insight into the “bones” of the website, but with different emphases.  By shrinking each page to an equally-weighted symbol, we can see how much content is actually available through a page, and whether the grouping of that information makes logical sense.  Each page gets a unique identifier, so it’s easier to see where access points to the same page recur.

This site flow follows the symbolism laid out in A Project Guide to UX Design (2012; 2nd edition).  A page is represented by a box; a link that leads to multiple pages on one page from a single template (like a blog) is represented by a “stack” of boxes.  A link that leads to an external page (ex. the production site’s e-mail address opens the user’s own Outlook account) has a curly edge.  For multiple pages of a type that that have different templates (ex. a season’s worth of episodes), the labeling gives each single page a sub-label system.

(SP) Initial Wireframe

5 Dec

Wireframe of the front page for “Small Packages” at the beginning of the project:

The front page, at the start of the project.

The front page, pre-UX.

At first impression, this is a visually-appealing front page.  (Obviously, it looks even better with all the graphics and non-clickable text that make up the interface.)  It has a clean and symmetrical design, it avoids gimmicky Flash and animated GIFs, the header and footer include the correct information, and the central image block draws your attention to the site’s body.  But even just looking at the wireframe, a few areas of potential improvement pop up immediately:

  1. There’s a mismatch between the webseries the site is designed to advertise and the emphasis that content is given on the page.  (ex. In the header, the buttons for “Season 1” and “Season 2” are the same size as the buttons for everything else.  The main image block in the body emphasizes the “Latest Episode” with a HUGE image.  But then it undermines that emphasis by creating equally huge images for “Latest News” and “Latest About Series”.)
  2. Half of the site falls below the fold.  That’s prime real estate, under-used.
  3. Buttons leading to the same content appear in multiple places.  In and of itself, not a bad thing.  But in this case, it feels like the intent is to make the front page look fuller than it actually is.  Meanwhile, each season full of episodes is squished into a small drop-down menu at the top of the page.

Preliminary diagnosis: A more streamlined organization of the elements will get  more content into the area above that fold, while replacing some of the images will put the visual emphasis squarely on the webseries videos.

(SP) Defining the Client in a Mom-and-Pop Shop

4 Dec

One of the benefits of blogging about a project as it happens is that it enables you to talk out the major problems that will end up having a minor place (or none at all) in the final report.  In this case, I need to answer an incredibly stupid-sounding question in order to obviate a cascade of smaller problems later in the rest of the project.  The question is, “Who is the client?”

[Silence as “Is this a trick question?” begins to sink in.]

No, this is not a trick question.

I am given to understand, by real UX designers, that establishing the client as an entity is something that’s done… by the client.  (It’s also, if you’re smart, something you do BEFORE you sign up for the project.)  Good to know.  But when you’ve volunteered to work gratis, essentially unsupervised, it’s the sort of question you have to puzzle out yourself.

“Small Packages” is the main output of Ninja Camel Productions. Like an increasing number of actors, “Mom” and “Pop” incorporated Ninja Camel years ago so that the pair of them would have the option to write and produce their own content between paid gigs.  The company has produced a couple of small projects, but “Small Packages” is the first major initiative to take off (go Camels!).

As a tiny store, Mom and Pop are not only the main actors and writers of the series, but they’re the producers, business and marketing department, and doing all the major behind-the-scenes part of running a company, with the help of some friends and volunteers.  To the best I can tell, there is no one “running the shop” on a day-to-day basis.  When the series is in production, the production company becomes the series because that’s where the owners is completely involved.

You can see the conundrum, can’t you?  There’s no division between the show, the production company, and the owners as entities.  As the legally-inclined know, no matter how similar their interests, every entity in a court case needs a different advocate to represent them.  In this case, what’s best for the series or the production company is not necessarily what’s best for Mom and Pop.  It’s a Russian doll or a collapsible cup scenario.

Collapsible Cup

No, it’s not an onion.

To complicate things further, “Small Packages” was created by Ninja Camel, which was essentially designed to enhance the acting careers of Mom and Pop.  How do you differentiate between the different entities when they’re all represented by the same people?

Given the time and human resources available for this project, I decided to focus on the widest ring of that cup, the webseries itself.  But if this project leads to future work for the client, doing that preliminary groundwork will put me in a better position to discuss overall content strategy.

First Project: “Small Packages” (SP)

2 Dec

My first client is a YouTube webseries and its production company.  The series is called “Small Packages”, and it follows the shenanigans of a set of superheroes that are the same size as their action figures. The show spoofs classic comic teams like the Justice League and the X-Men, but also comments on gender politics and current events.

Think Sesame Street’s “Teeny Little Super Guy“, but with a PG-13 rating:

Oh yeah...

Oh yeah…

The series held a successful Kickstarter fundraiser, and along with recent award nominations for its latest season, the time seemed ripe to create a focused web strategy.  With minimal graphic experience and less time, I offered to analyze the site and its parent (the production company) and got ten weeks to write a report explaining issues and offering solutions.