Crystal's Adventures in Webdev Land

Character Module Design Process: Userflows

Crys — Sat, 21 Apr 2012 02:30:05 +0000

Userflows are the foundation from which the interface takes its form. All later parts of the project hang upon them. So what are they?

The userflow is a map of how the user interacts with the system, and how the system responds. The userflow will define what actions can or cannot be taken within the system, what happens when there’s an error, and how different types of users (for instance, this project uses Guests who aren’t logged in, Users who are logged in as registered users of the forum, and Admins, who belong to the admin group) navigate differently through the system. Note that a userflow will delineate what controls are needed but does NOT specify the form they take 99% of the time. Choosing the format of the control comes later, as part of the interface design, once you look at all the controls that are needed and how you can present them without them getting in the way.

There are a number of super programs out there that you can use to create stunning userflows. I used to use InDesign for them because I was comfortable with it from my print background but Illustrator, Visio, OmniGraffle and probably twenty or thirty other programs all have great features that can streamline your work and give you a polished presentation.

But you know what? I like drawing them in Google Docs. Besides the fact that I can access them from wherever, on my laptop, my pc or my Mac with equal ease, and share them with whoever without having to make a zillion copies, I just find it really easy to work with. Plain single-color boxes and arrows that snap to the anchor points of the boxes so I can move the box without having to reflow if I need to? Yep, that’s all I need. There’s something to be said for having a snazzy presentation for a client, and I get the arguments in favor of “sketchy” styles. I’m not knocking either approach. Personally though, I prefer to keep my flows as bare and simple as I can because when I start focusing on how to make them trendy, I’m diverting attention from making them function.

Flows available after the jump.

Character Module Design Process: Start with paper and pen

Crys — Sun, 01 Apr 2012 21:04:26 +0000

I’ve got two main forms of amusement: coding and gaming. So it’s probably no surprise that most of my best online work gets poured into my WoW/SWTOR guild, Seelund Trading Co. I’m pretty happy with how the site looks and functions, but I’m always looking for new ways to make the site more useful and draw people to it.

My next big project is a combination module that has two parts: an event module, and user-generated character profile/information pages. Because I want to let people post events as their characters, which I can’t do without actually having characters already set up as entities, I decided to start with just the character pages half. This series will walk through my design and development steps as I build the module.

All of my major projects start as pages in a letter-sized legal pad. I’ve got these babies littering my dining room, my library, and scattered across the table I work at. I keep a rainbow collection of gel pens handy to match my mood and when I get an idea I’ll snatch one up and go sit in a corner or at a table trying to get the idea down on paper before it’s gone.

This project was no exception. I holed up for a couple hours with a beer and the tv running in the background and poured out a couple pages of necessary features, details and sketches for the interfaces, first drafts of the database table structure… it all gets mashed together and scribbled over for as long as the inspiration grips me.

Then I put it down and walk away for at least a day. It’s important to come back to it with a fresh eye and a clear perspective. Sometimes what sounds like a great idea at 4am when you’re frantically scrawling out that thing you just dreamed about is kind of crazy in the light of the day. Mind you, crazy’s not always bad. But you have to consider the feasibility of any project, and weigh the work vs the worth of it, so you can assign it a proper level of priority against your other projects.

I deem this one to be of a high priority for a few reasons, not least of which is because the second half of the project depends on getting this one finished.

The next step in a project is taking that brainstorming and sorting it into a project plan. The precise contents will depend on the type of project. Since this is a bottom-up programming project, the Plan includes a database schema, a list of the interfaces (new or changed), userflows, a break-down of what goes into “phase 1″ or can be added later, and a section for miscellany.

The Plan for the character module currently looks like this:

Userflows

CM1 – User views their own list of characters
CM2 – User views their own character (singular, character page)
CM3 – User adds a new character
CM4 – User deletes a character from their profile
CM5 – User/Admin/Guest views all characters
CM6 – User/Admin views someone else’s profile list
Guests do not have access to profiles so there is no userflow for this
CM2 – User views someone else’s character
CM2 – Guest views a character
CM2 – Admin views a character
CM7 – User flags a character for review by Admin
CM8 – Admin reviews moderation queue
CM8 – Admin unflags character from review
CM3 – Admin/User edits existing character from character page
CM9 – Admin/User deletes character from character page

Interfaces

New

Character Pages
Character List
User control panel -> Character Tab (based on Usergroups tab format)
Moderation control panel -> Characters Tab

Changed, Existing

User profile page (add list of characters for that user)
Moderation queue for forum (add a summary queue for characters to main tab)

Database:

Character Table

Future Phases

Hook into event calendar
Allow posting on forum as character instead of user
Linking particular threads (background stories specifically) to Character Page via addition to posting page

Notes

Still have not accounted for orphaned characters, whether caused by program error or deleting a user that had character information

In the next post for this project, I’ll go into more detail about the userflows and how userflow shapes the interface.

Seelund Trading Co Guild Website

Crys — Sun, 18 Mar 2012 21:44:57 +0000

Screenshot | Website

This is the website for my World of Warcraft and Star Wars: The Old Republic guild, Seelund Trading Co. The base site is built on phpbb3 with the index and information pages maintained in the cms MX-Publisher (whose website seems to have vanished as of this posting. Guess it’s a good thing I can update and change the programming as I need to myself). I have made substantial programming changes to my copy of MX, including changing the way news posts (posts in the forums that are designated as “Announcements”) are sorted so that the one that expires soonest rises to the top of the front page.

The biggest amount of work I’ve done on the site though is the custom theme. The current design is the second — the first included only World of Warcraft imagery back when we were a WoW-only guild. I used the default phpbb theme as a foundation and then rewrote the better part of it so that it would properly reflow on a smaller screen or with non-default font sizes. The images are all manipulated/cutout screenshots I took from the two games.

As part of both designs for the site, I created logos for the guild, which are used in promotional items such as videos and recruitment posts:

December 2011

February 2010

Future improvements planned for the theme include a mobile-specific version and having the characters at the top randomly chosen from a pool of images of the current members of the guild on load. Current programming projects in progress on the site include a section for user-controlled character profiles and an event calendar that users can post to as their characters (watch the blog for project updates).

Crew Skills Chart

Crys — Sun, 11 Dec 2011 23:42:38 +0000

I created this chart to show the relationships between the different crew skills in Star Wars: The Old Republic for my guildmates and for fellow players in other online communities.

The background is a screenshot from the game and the icons are game assets; I am responsible for the rest of the graphics and treatments in the chart. I chose to use colors to denote relationships for a quick visual cue, using a gradient for items that had more than one relationship. Headings are in Baumans to keep consistent with other TOR collateral I’ve produced for our guild. Created in InDesign. PDF Version Available.

Redesign: What I Can Do

Crys — Tue, 08 Nov 2011 04:53:53 +0000

In today’s installment of my redesign project, we’ll discuss the second bullet point of content the site needs to contain: “What I can do.”

I can do a lot of things. I can sing bass. I can write fiction. I can do voice acting. But even people looking for a “generalist” really aren’t looking for a laundry list of all the things I am capable of doing well enough to get paid to do.

What potential clients are looking for is a short and succinct list of the skills I can bring to bear to solve their problems. The list of what I can do is long, but the attention span of the average reader is very very short. It’s critical that I focus mainly on the things I do best and/or those things that are going to give me the highest return (from greater demand or from being most efficient uses of time or most effective solutions). As in the target audience discussion, that doesn’t mean I would necessarily turn away a request for something not in my advertised list, only that I’m not focusing on selling it.

So let’s start with some brainstorming of all the things that might go on that list, and then we’ll prioritize and pare it down.

Web design, from initial concept through production.
Search engine optimization and marketing
Web development – this is differentiated from “design” as being more in-depth programming. Ecommerce or a community forum site would fall under “development”
User interface design – specifically on-screen interfaces
Seminars – specifically on web and user interface design
Copywriting – ad, web, script, or otherwise
Print design – newspaper and magazine ads, business cards, posters, etc
Page layout – newspaper, magazine, book layout
Identity work – including logo design and collateral.
Advertising design – banner ads, both static and animated
Fixing bugs in, and making changes to, existing websites
Digital image enhancement (for editorial) and manipulation (for illustration), either with print or screen as end-product
Editing – any sort of writing, technical, non-fiction or fiction. Prefer developmental editing.
Documentation and creation of teaching resources
2d animation
Voice-overs and voice acting
Illustration, either hand-inked or digitally painted. I specialize in hand-inked knotwork.

Some of these things can be dropped immediately. I enjoy voice acting, but any of that I do will be through an agent. I may include some samples in my portfolio, but I won’t be selling my voice directly through the site. So that’s out of the Services page.

I actually have a degree in digital animation, but I have very few professional examples of my 2d animation — nearly all of it is in the form of banner ads, which has its own entry on the list. I will be pursuing animation opportunities, but until I have more professional examples of my animation to include in a reel, it’s unlikely that I will be able to convince random viewers that I’m the animator for them. Therefore, including it now detracts from the professional quality of my offerings. Look for it to make an appearance in the future.

My husband is involved with creating stock 3d models and we’ve been discussing joining forces to sell stock photography, 3d models and textures, illustrations, etc. with an eye toward taking commissions for custom illustration/models as well. I’m going to pare illustration and digital photo enhancement/manipulation out of this list in favor of promoting them through our joint venture. We’ll have enough competition as it is. No need to compete with myself.

Those are the obvious things that can be removed. That leaves a list that is still far too long to catch viewers. I need to group similar items and combine items where possible.

Four categories immediately suggest themselves to me: Online, Offline, Words, and Teaching.

After dividing items into those four categories, I need to start combining them to make the list more succinct. Even though the actual process of fixing bugs or making changes to existing code is often very different from the processes of design or development, it’s unlikely that anyone who is not involved with web production will know the difference, so I’m going to roll all three of those into one item: Web Design and Development. I debated including UI Design in that item, but the principles of on-screen UI Design stretch across all applications, not just websites.

Online:

Web Design and Development
User Interface Design
Search Engine Optimization and Marketing
Banner Ads, both static and animated

Offline:

Graphic Design
Page Layout
Identity Work and Logos

Words

Copywriting
Editing

Teaching

Seminars
Documentation and Training Materials

That’s much better. A shorter list, easy to glance through. In essence I’m creating a menu here, like a restaurant’s menu. You’ve seen cluttered menus that you picked from at random because it took too long to read everything. Shorter, sweeter, is better, and infinitely easier to follow.

Better, but not perfect. Taking into account explanations of each item, the list still feels too long to me. Of these four items, “Teaching” is the least like the other sections. To demonstrate my ability at teaching, I’m going to need to create some video tutorials and supply documentation that I’ve written, but all documentation I’ve written to date is proprietary information belonging to the companies I wrote it for. I need to create a personal project that I can document. That’s going to take some time, so it is perhaps best left for Phase 2 of the redesign. I don’t want to include anything I can’t immediately demonstrate.

I’m also not sold on these category names but they work for the moment and we will revisit them when we get to Search Engine Optimization. I’m also going to leave writing the descriptions until the search optimization stage, as this page promises to be keyword heavy.

Pricing

People like to have some idea what kind of cost they’re looking at before deciding whether or not to consider what’s being offered. Typical user behavior is to look at as many alternatives as possible and quickly prune out as many vendors as possible. Cost is a major factor in the initial pruning and if you don’t supply at least a vague notion of cost, you’re unlikely to survive the pruning process.

I intend to survive the pruning process. Therefore, I need to include pricing information. Big problem: All design, development and writing projects are unique. There really is no such thing as the “average” website design time. Each project requires an individual quote. Creating a five page website might take me five hours or it might take me 500. It all depends on the client’s needs.

There are as many opinions on pricing your design services as there are design blogs on the internet. I don’t intend here to debate my prices, but I do need to delineate them on the services page. There’s such a wide gap of costs — from the college kid charging minimum wage under the table to design agencies that can cost thousands of dollars an hour all told — that the best thing to do is simply figure out what you need to be making and divide by the number of hours of work you expect to work. That’s your minimum, base price. Considering I have to cover my own insurances, taxes, etc etc even before I get to the part where I’m paying my rent and keeping food on the table, I’ve come to a current base of $100/hr.

Some people will look at that and be shocked by how high it is, others by how low (that’s how I know I’ve hit a good middle price!). Every geographical area is different; every type of client has different expectations of cost. Also, that’s on the higher side for editing and writing, and the low side for good quality design, but well within the usual rates for both. By giving them the same rate, I’m simplifying my billing considerably, both in calculating final costs and in making it understandable for clients.

You begin to see, perhaps, why it’s so crucial to provide a fee structure up front in spite of the difficulty caused by the individuality of every project. If a viewer’s entire budget for design is $100, it’s unlikely that I’ll be among their choices for anything but the smallest of projects … and that’s ok. It’s best for both them and for me if we don’t waste each other’s time (and money — time IS money in business). Since I didn’t waste their time making them search for a price, they are more likely to come back to me in the future when their cut-rate designer’s work needs to be fixed.

I don’t want to emphasize the cost, but I do want to make it available. I think a good way to accomplish both is to give it a heading and a single-paragraph blurb that states the hourly rate but makes clear the need for an individualized quote. I’ll need to provide a few average examples, such as “average 1,000 words (4 ms pages)/hr” and “basic site design ~= 10hrs for an initial design and ~= 10 hrs to turn it to html.”

Summary:

Page will include:

Online:

Web Design and Development
User Interface Design
Search Engine Optimization and Marketing
Banner Ads, both static and animated

Offline:

Graphic Design
Page Layout
Identity Work and Logos

Words

Copywriting
Editing

Pricing

Rate $100/hr
Blurb that gives average examples but makes clear the need for an individualized quote

In the next article we’ll look at “What I Have Done,” aka “How to Build a Resume.”

Redesign: Contact Methods

Crys — Mon, 17 Oct 2011 00:40:36 +0000

In this installment of my Redesign series, I’m going to discuss contact methods.

For a services site like mine, contacts from prospective clients are necessary to close a sale. For an ecommerce site, contact will mainly be geared toward support or providing additional information to existing customers after or during the sale process. For informational or brochureware sites, contact is most likely to take the form of a conversation between the author and their readers. There is a great deal of overlap between these three categories of contact, but there is no one single right way to provide contact that applies to every website.

The most common methods of contact are:

Phone
Mailing/street address
Email
Contact form
Social networking sites
Ticketing systems and on-site private messaging
Forums
Individual page comments

Let’s look at each individually.

Phone

Until the relatively recent ascendance of email, the phone was the most common means of communication in the country. It is still the case that many consumers will distrust a business that does not have or does not publish their phone number. There’s a sense that as long as there’s a phone number, you can get through to a real live person.

For that reason, I always suggest that any business website should include a phone number. Personal (non-business) websites usually won’t include a phone contact, but there’s very little excuse for a reputable business refusing to make their phone number available.

That said, especially with the economy the way it is right now, there are more and more home-based or shared-office businesses cropping up. When they’re first starting, it’s unlikely that these businesses will have the capital to purchase a dedicated phone line just for the business. It’s better to leave the number off the site if the phone is likely to be answered casually by other members of the household, to avoid sounding unprofessional to your potential clients.

There are also privacy concerns if you use a home phone number. If you don’t have a dedicated phone line for business, make sure you discuss the number’s use for your business with everyone else who lives there (or shares the space, for a shared office) to be sure they’re comfortable with having their phone number broadcast to everyone who has an internet connection.

Another concern is if your number is a cellphone and in a wildly different area code from your office. Mine, for instance, is a Milwaukee-area exchange, because I’ve had that number for the better part of ten years and used it that long for business. Changing it now would entail a pretty arduous process to update all my past and present clients, family, friends and other contacts. I live in the San Francisco area now, but few here would recognize the 262 area code as being a local business.

Google offers a service where you can reserve a phone number and have it redirect to any other number, Google Voice. This is an easy way to keep an old number active but present a local number on your website. I have a number through Google Voice in the 510 area code that redirects to my cellphone, but using it as my sole number on the site might confuse existing clients who are expecting the old number.

So in my case, I will be putting both numbers on the site. They both go to my personal cellphone, so there is little chance of someone else in the house answering them. As I have a number that only I will answer, there’s not much reason to invest in a second line that only I would answer. Also, my voicemail is incredibly reliable (thank you T-Mobile), so I don’t need a land-line for an answering machine.

One caution for including your cell phone or home number: people will assume they can use that number at any time of day or night, regardless of any working “available” hours you post. You should decide how you will handle that before listing your number. Personally, I don’t answer the phone outside of normal business hours unless I recognize the number. I started doing this to avoid telemarketers, but it also has the effect of keeping my work to my workday. You should find the method that works for you for finding a balance being available to clients and maintaining a personal life.

Mailing/street address

Street addresses are less ubiquitous than phone numbers. If your company works out of a corporate office or has retail locations, you will always want to include those addresses, but for many service-oriented or home-based businesses, the people involved will not have a specific office location, or that location will be a residence, not just an office. Many service oriented workers will, for instance, use their truck/van as their office and their email and phone number as main contact points, so there is no “walk-in” location. These businesses do have mailing addresses (most places that’s a legal requirement to call yourself a business), but they are not locations that they want broadcast to the whole world, and not locations they want clients to drop in at unexpectedly.

As with phone numbers, if the location is shared with anyone else, you need to take their privacy into consideration. My “home office” is literally an office in my home, and there is a child living in the home with me. Because of that, I will not publicize my address, though obviously any clients I do business with will be given my address for non-digital correspondence and shipping. I’m ok with clients having that address because I will have a chance to assess them before accepting them as clients. Anyone I wouldn’t trust with my address is someone I wouldn’t be likely to take on as a client either.

I considered opening a PO Box to use for business but generally anything I’m going to need to ship will require large padded envelopes or boxes to protect the materials, and the most common mail I receive from clients is CDs of images. Dealing with these materials at a PO Box is generally a hassle and the last time I tried it, I found I actually lost money from all the time I was spending waiting in line to get packages at the counter that I could have been spending on client projects.

Email

Email is quite possibly the most common method of communication in the world today. Nearly everyone has one, many people have several. I have five, and I use each for a different aspect of my life (it also cuts down on getting spam at the addresses I use for business because those email addresses never get used for registering on websites). If you have a website but not an email contact address, don’t be surprised if consumers think you’re probably behind the times — a sentiment they will carry over and expect from your service as well, whether true or not.

There are a number of free email services out there if you don’t get an email address with your web hosting. These days if you’re going to use a free service, you should probably choose Gmail strictly based on the perception of the domain your email is attached to. Hotmail and Yahoo are also popular choices but the general perception is that their email services are less “professional” or “reliable,” because they are more commonly hacked than Gmail. That perception may be exaggerated when compared to the reality of those services, but what really matters is how your clients will perceive your email address.

That being the case, it’s best to have an email address that matches your domain name, rather than matching one of the free services. For instance, I use crys at crysodenkirk dot com (that’s Crys, short for Crystal).

info@, admin@ and webmaster@ are all common email addresses that people will use when they don’t know your email address, but they’re also the most common recipients of spam, since they’re set up on most domains. For a larger company, or one with higher turnover, the utility of a generic email address will outweigh the spam and indiscriminate and unfocussed queries that will come to those addresses. However, my service is me and only me, so using my own name, crys@, has the double benefit of making emailing me feel more like you’re reaching a real person, while cutting down on the spam I receive to my work address.

Contact form

A contact form is a portion of a web page where viewers can type information into the page and then perform an action (usually clicking a button) to send that information to someone at the business.

The main benefit of a contact form over email is that you can set it up so that viewers can’t send you the form without including all the information you require from them. It’s less uncommon than you might think to get a phone message that says “email me a quote for X” without giving you either an email address or a return phone number. You can require either or both fields to be filled in before allowing a user to submit the form, however, making that scenario less likely. That doesn’t guarantee they’ll give you correct information, but they will at least have to stop and think about providing it.

Contact forms also have the benefit of potentially being the customer-side interface for an internal support structure by routing that information into a database instead of an email. I’ll touch on that a little more under “ticketing systems.”

The downside of a contact form is that they’re spam and hack magnets. They require more work to make secure than a page that viewers don’t input information to and you will always get some spam through a contact form. You can do things to obscure the form and disrupt the standard sorts of attacks, but there’s no foolproof way to eliminate all spam.

You also have to make sure that you’re only requiring information that you actually require in order to help them. If you don’t truly, absolutely, require a home address in order to respond, don’t require it! When you require more information than you actually need, it turns users off and they are unlikely to finish filling out the form because you’re slowing them down in their goal (sending you a message) and it can feel invasive.

I’m going to make so many other methods of contact available that I don’t think I need a form immediately with this redesign and reconfiguration. However, it would be very useful to include a way for clients to easily request quotes from me, and to make sure that when they do request a quote, they include all the information I need to be accurate. So as a future project, I will be creating a “Request A Quote” contact form that requires certain information from the user before allowing them to send it to me. I’ll file this under “Phase 2″ of the redesign.

Social networking sites

These days, it seems like you have to have a twitter and facebook account for your business. That’s where consumers are, the theory goes, so you have to have a presence there.

That’s true, to a point. But social sites move quickly and people expect instant responses from them. Whether or not you branch out into social media depends on your ability to engage with it. It does you no good to have a facebook page if you don’t ever answer questions on it or if you’re going to censor what people say on it. You can’t control your brand appearance as tightly in a free-for-all environment, so if that’s going to be a problem, you’re better off finding different ways to connect.

This is a complex topic that would entirely side-track this series if I let it, so I’m going to say here that there are serious decisions to be made about which social sites you participate in or if you get involved with them at all, and how you interact with them. When it’s done well, it can really give customers a sense of community and give them a buy-in on your product and on getting more consumers involved with your product. The best social media use I’ve ever seen is HBO’s Game of Thrones social campaign from Campfire in New York (that could be yet another series of articles in its own right). Your social presence doesn’t have to be as elaborate as that one, but it must be as engaged with the people who interact with it. You must be willing and capable of generating and maintaining a sense of community. That’s the secret to effective social marketing.

Which social media sites you get involved with will depend on your industry and who you’re trying to reach. The big four general sites are Facebook, LinkedIn, Twitter, and the newest “must have,” Google+. In addition to those, there will likely be industry-specific and niche sites that cater to your target audience.

For my initial redesign, I’m going to include the Big Four, in the form of links to my profile on each site. For Phase 2 of the Redesign I will be writing a bit on niche and web development/design communities, and how I’m going to integrate those into the site along with different ways you can integrate with social media beyond just links. This is about ways to contact me, and clients are unlikely to be on those niche and industry sites, so including them does not directly benefit our primary goal with the site, so off to Phase 2 they go.

Ticketing systems and on-site private messaging

These are both examples of “threaded” messaging. That involves keeping every exchange in a single conversation in the order its made and displaying them sequentially, usually on one page, but possibly broken over several pages if the conversation is very long.

Threaded messaging has all the advantages of email, plus a few more. Some systems can keep all messages associated with a certain client bundled together so that you don’t have to dig through a year’s worth of email. With ticketing, it’s easy for a client to log in and see an updated status on their question whenever they want.

The downside is that you have to assign someone to answer and maintain the messages, and you have to have a program on your site that collects and displays the messages. The cost of that can outweigh the utility.

I would like to have a ticketing system that I can use with clients to help my workflow and to help them feel like they’re a bigger part of the process. It would be very useful to me to have a workflow that involves a system of delivering proofs and getting a digital signature ok on the proof, without having to maintain the records in different places.

However, I don’t already have that written and it is not a base necessity for meeting the goal of the site. Since programming a custom ticketing system is such a big project, I’m going to set that aside as its own phase of the redesign.

Forums

Forums are a form of threaded messaging where each thread is available to an entire community rather than being between just two people, where anyone in the community can comment on it.

Forums are about creating community. Most of what I wrote above about social media applies to forums. At a bare minimum you need community managers and moderators to maintain the forum and keep conversations going, or to step in when the inevitable fight happens.

Forums are not appropriate to this site. If I get a large number of other designers coming here because of my project articles and tutorials, I will revisit my decision not to include a forum.

Individual page comments

This is, like a forum, a community-based threaded messaging format. The difference between page comments and a forum is that anyone can start a thread on just about anything in a forum, but page comments are meant to be remarks on the content of just one page’s subject. They’re mostly confined to news or blog style pages.

I’ll be leaving comments open on most of my pages. I welcome feedback on my writing and work.

Location, location, location!

You can put contact information anywhere, but it’s best to make it prominent. I prefer to have contact information on every page, and the footer is a good place to make it clear and available without making it the focus of every page. I will include my cell numbers, my email address, and my social networking links in the footer.

The other methods of contact I discussed implementing will all need their own page or subsection. Comments will be on the page they’re referring to, but that means each page will have its own thread of comments. A quote form will require enough information to merit its own page, and of course a client hub with ticketing would be behind password protection in its own subsite.

In summary, I am including:

My cellphone number
My Google Voice number with Bay Area area code
The email address attached to this domain
A “Request a Quote” form, in Phase 2.
Facebook, LinkedIn, Twitter, Google+ profiles with niche and industry sites to be discussed and added in Phase 2 along with integrations with social media
Ticketing system and client hub, implemented in Phase 3
Comments on articles

In the next article in this series, I’ll be discussing “What I Can Do” and how to best convey that to potential clients.

Design Is About Communication

Crys — Sat, 08 Oct 2011 03:48:49 +0000

Now that we’ve defined the problem for the redesign of this site and summarized the solution to the problem, it’s time to build out and implement that solution.

The first part of implementation is the content. The appearance is important, but content is critical. If your viewers don’t find what they’re looking for, and quickly, they won’t stick around to hunt for it.

This aspect of website construction is called “Information Architecture.” Information architecture is the structure of your website, and how you get from one piece of information to another. This includes the content itself, how you chunk out the content for display, what each chunk (generally, though not always, a page or section) is labelled, and how you reach each chunk from any other chunk.

For this site, first we’ll be looking at the types of information that I need to include in the site. Keeping in mind that the purpose of the site is to meet the design needs of potential contract clients and potential employers by selling my design-related problem solving skills to them, I need to focus on what information they need up front and how that information can best persuade them that I’m the right answer to their problem.

The obvious thing is that they need to be able to contact me. So I need to include some way to reach me. I want to make it easy for people to contact me quickly, because if there are any barriers to that contact, I drastically reduce the number who will follow through and actually contact me. One barrier that you absolutely must take into account is personal bias against certain forms of communication. Some people hate making calls on the phone. Some people can’t stand email, etc. So the best way to deal with contact information is to provide several different avenues of communication. Balancing this is the recognition that this is a personal site and therefore the phone number is my personal number; the address is also my family’s address. There are certain ways around this, such as opening a PO box or buying a second line just for business, but that may not always be practical (for instance, you can’t take deliveries at a PO address so if you plan to do that regularly, you’ll need a physical address). It’s best to discuss which methods to use with anyone attached to that information.

Next up, viewers need to see what I can do, and proof that I can do what I say I can do. This is best shown by breaking it up into discrete units. One easy division is to list what I can do in one section, and what I have already done, in another. “What I have done” is still a pretty big chunk of information. After all, I’ve been at it for a couple decades, all told. So I’m going to divide “What I have done” into the traditional resume and portfolio — the resume is a relatively brief text gloss of the high points, where a portfolio becomes the proof that I have experience doing what I say I can do.

This is still a pretty big blob of information and alone does not show that I can necessarily do all the things I say I can. After all, you can’t tell from a screenshot in a portfolio how a site resizes or how it looks on a mobile device (for instance). So there needs to be something more. One way that suggests itself is to create walk-throughs that follow my work on individual projects (like the article you’re reading right now). I could write opinion pieces on certain aspects of design. I can start providing links to my personal experiments, where I’m the only person doing any work on them so you know that whatever you’re seeing there was actually done by me and me alone. A series of articles on these topics suggests something in either a blog or library format. Given that opinion pieces and experiments are usually more timely than strict articles, I’m currently leaning toward blog format. Regardless, for now we’ll call it “articles of proof.”

It’s usually a good idea to let people know a bit about you if you want to do business with them. This is true whether you’re a large company or an individual contractor. No one cares what you had for breakfast yesterday, but they want to have some idea what you’ll be like to work with. You have to make them feel like they can trust you, and that you will mesh well with them if they ever have to contact you directly. That last is more important for a site like this one than, say, an ecommerce site, but it’s still important to make your consumers feel that if they have to contact customer support they’ll be valued and they can trust your support people and talk to them easily. Failure to do so can be a major barrier to making a sale. The opinion articles I mentioned above can contribute to this. I will also include links to many of the major social networking sites so people can get a sense of me in a less formal way; these double as alternate contact methods. I’ll have to include some basic autobiographical information as it pertains to the services I’m offering, either as an about page or an about blurb.

Last, there are a few constructions that pertain to the site itself. Decisions need to be made about what information to show on the home page. There needs to be navigation to all the chunks of information that result from the above, and for most sites, you’ll want to include a sitemap, which spells out all the information available on the site with links to every page/section. Sitemaps provide users with a quick way to get anywhere in your site, and they’re also useful for search engine optimization.

To sum up:

Contact methods, several different avenues. Balance my family’s privacy against my business interests when choosing exact methods.
What I can do: services I am offering
Text gloss of what I have done, in the form of a resume
Proof that I can do what I say I can do because I’ve done it before, a portfolio of previous work
Articles of proof to show that I continue to do what I say I can do, and to show it by explaining how to do it
Information about myself so that potential clients are comfortable contacting me
Links to social networking sites and “about” information as pertains to working with me
Homepage content decisions
Navigation
Sitemap

Starting with the next entry, we’ll look at each of these sections in depth.

Cicadas everywhere…

Crys — Mon, 03 Oct 2011 05:10:02 +0000

My Cicada Technique experiments, aka How a Geek Spends Their Sunday Evening: http://crysodenkirk.com/exp/exp_cicada.html

Site Redesign Part 1

Google Webfonts

Crys — Thu, 29 Sep 2011 23:23:02 +0000

I am such a geek. A font geek! I’m not sure when Google upgraded the webfonts interface or when they went from “alot” of fonts to “hundreds”, but the new interface looks great! Some girls swoon over rock stars and famous actors, but I’d rather ogle sexy font samples, any day of the week. You can view samples of just one word, a full sentence or, best of all, as a paragraph, which will make it a lot easier to decide on a main font without having to try them all out on your website to see how well they paragraph first.

Yes, I just turned paragraph into a verb. I do these things when I’m fangirling.

The Kafka’s a nice touch. I hated that story — because he accomplished what he was trying to do with it, not because it was poorly written. But yes…

Picking just two of these is going to be tough…

No related posts.

Design Is About Problem Solving

Crys — Sun, 25 Sep 2011 20:36:35 +0000

Every good design is created to solve a problem.

So the first step in any design is to define what problem you’re trying to solve. There are many potential problems a website might solve, and every good site has its own unique take on the problem and solution.

Define The Problem

For this site, the main problem is a common one among young web-related professionals, and there are two prongs to it. I need a vehicle for selling my design and development skills to two different main audiences: potential contract clients and potential long-term, full-time employers.

This is a condensed final problem that actually starts with “I need to pay my rent,” and progresses through “My most marketable skills are my graphic design and coding skills.” When working with a client, you may need to work backwards from the problem they present you to discover the actual root problem. Never be afraid to ask a client “why do you need that?” You may not be able to design directly from the root problem (as here), but it’s an important consideration in how the final solution shapes up.

Notice that the problem is phrased in terms of a need and a connection. These are both important points to consider in how you define the problem for any design.

The Need: Problems in general stem from a need or desire that has gone unanswered in some way. The person whose need has gone unfulfilled is the subject of the sentence and the verb should accurately convey the strength of the need. “The client needs” is much stronger than “the client wants.” Choosing the right level of need is especially important when you have many problems to solve and you’re not initially certain which is the most important to focus on. Anything that you “need” becomes the initial problem, while “wants” can be easily pared off into “secondary uses,” removed to another site, or dropped entirely.

The Connection: The connection is your target audience. Who are you looking to reach with your design? It pays to be specific in your description. It is simply not possible to appeal to everyone, or even to get your name out to everyone. Picking a specific, very narrow audience lets you focus on what appeals to just those people, giving you a more useful and more natural connection to them. That’s important because you must know them well enough to understand their motivations and give them a reason to come to you.

“Employers and clients” is a pretty broad category. Now, I’m open to working with all kinds of clients and I like variety in projects. I’ve got quite a bit of experience with industrial and manufacturing clients, for instance, and I’d be happy to work with more of them. Right now I’m working full-time as a web developer at a financial company and I’d be just fine with taking a position with another one next time I’m on the market. I am good in both, but neither is really a field that I’m planning to pursue as a main focus.

Instead, I choose for this site to focus more on the things I love and the things that are prevalent in my geographic area, because this site should reflect my personality. I live in the San Francisco area, home to the high tech and the cutting edge, the ocean and the environment, the progressive and the geeky. I live here, and I love it here.

That suggests two natural directions: Green and geek. Melding them together into a single demographic isn’t too hard, since there tends to be a lot of overlap between the two groups, especially locally. This focus is true to who I am, and it’s something that will inspire me because it taps into my passions.

Draft the Solution

“I need” is an inherently selfish statement. No one else is obligated to give a damn about what you need. There are millions of websites out there that never see a visitor, because no attention was paid to the most critical aspect of this equation: Why does your target audience care that you have a need? Why will they come to your site? Why will they buy your products or look at your portfolio?

There is only one successful answer to any of those questions. You must find a way to make fulfilling your need the easiest way for them to fulfill their own needs and wants. If you fail at this step, no amount of crazy awesome graphical genius and cunning copywriting will create site conversions.

Many designers will start at this point, with the target’s need, but I think that’s short-sighted. The client isn’t filling the target audience’s need out of the kindness of their heart. If you don’t know what the client really needs to get out of the exchange, it’s far too easy to start with the wrong audience need. When that happens, you may create a very wonderful design that perfectly reaches your target audience and perfectly fills some need of theirs, while failing utterly to get the client the return that was the whole point of the project.

The need I am filling for my demographic is one of design. I can help my clients solve the very same problems I’m discussing here. I can help them discover what needs their service or product fulfills among their target audience, and I can craft a design solution to bring the two together.

Differentiation

As meta as this sounds, given the point of this series, design service websites are like any other service-oriented offering. There are people out there who need things designed. The website design needs to convince those people that the designer can solve their problem in a “better” way than other designers. There are different choices for what constitutes “better”: Faster, cheaper, better quality, better customer service, etc. Part of crafting the solution is understanding what way the client is differentiated from others who might seek to fulfill the same need for the same target audience.

Some of my main differences include:

I have a lot of experience with what is commonly called legacy code. That’s code that has been written previously, generally by more than one team of people, and that has grown and become ever more complex with each change. I am exceptional at tracing threads back through the code for debugging, and the bulk of my projects have involved meshing my new code into the legacy code in a way that doesn’t break anything.
I’m familiar with the quirks of various browsers and versions. There are a number of ways to deal with cross-browser compliance, and not all of them are appropriate for every project. It’s good to have a number of different possible solutions to match the problem at hand.
I like new toys as much as the next person, but I’m going to use what works for what I’m doing, whether it’s the latest html5 and css3 and jquery-based dynamic interactions, or simple basic html 4 with a little styling. There are many different and equally valid approaches to design and I would characterize mine as, above all, “practical.”
I have a very wide skillset. I’m as comfortable doing interface design and Photoshop mockups as I am with hand coding markup and programming, and just as comfortable with pre-press and color separations (which I have also done by hand). Many designers will specialize in just one aspect of design, but I believe that if you’re going to design for code, you have to understand how the code works. You have to intimately understand its limitations, and where the rules can bend and where they break. If you don’t, you are basically leaving many of the core questions about implementation of the design in the hands of someone who may have specialized in the code and not understand the design itself well enough to know the best overall answer. Same for print. If you’re going to design for a particular press, you better know the capabilities of that press and how to actually achieve your design on it. Otherwise all you’re doing is throwing suggestions at the folks running the press and letting them make the most critical decisions.
I’m comfortable working with clients at all levels of computer literacy. I’ve done a fair amount of teaching clients and co-workers about the concepts behind the work I’m doing, both one-on-one and in seminar settings.
My design experience started in print. If you include organized amateur pieces (mainly school publications), I’ve been working with print since 1989. I made my first fully-fledged website in 1997 and began doing serious web design work for other people in 1999. It’s good to see tried and true concepts from print design, such as designing to a grid, finally making their way into the world of web design in a big way. But the two are not the same thing. In many ways, designing for one is the antithesis of designing for the other. Because of my years of experience with both, I understand where they diverge. You can’t simply take a logo designed in rgb for the web and expect it to work in your print collateral.
I hand code. That means you get charged for less time debugging and you get less of the obnoxious and hard-to-trace errors that come from other methods. Don’t be fooled by companies trying to sell you programs that claim to write the code for you. You may be able to get away with that for a simple one-page information-only site, but there’s not a program on the market that doesn’t write clunky, bloated, dare I say, crappy code. The people who write those programs are trying to write for every possible way someone might use their program. When I code, I’m only coding to your project’s specifications. No bloat required.

These things can be summarized into one short statement: I approach design first and foremost as a practical craftsman with a wealth of experience, skills and tools at my disposal, who takes pride in meeting technical challenges and in being easy for even the least technically savvy person to work with.

Summary

Now we have all the components we need to jump into the meat of the redesign. We have defined the client’s problem. We have chosen a target audience and focused on how the client can fulfill the needs of their target audience. We have delineated how the client’s offering is better than their competitor’s offering. The next step in the process is explaining the solution to the target audience and convincing them of the differentiation. That will include both content and graphic work. We will look at the content next in this series and the graphical treatments following that.