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.