Create Default Sitemap & Template Wireframes

First pass at a sitemap.

Home

- Toolbar
-- Archive
-- Search
-- New...(track, photo, blog)
-- Admin
--- Content overview
--- Account
--- Statistics
--- Design
--- Settings

- Blog
-- by date
-- by tag

- Photos
-- Gallery overview
--- Single gallery
---- Photo

- About
- Contact

- All Releases
-- Individual Album
-- Individual Track

2nd Draft, clearer split between Admin side. Still not sure about a lot of the terminology...

Simplifying the sitemap and removing a bunch of pages that don't make any sense at the moment (Import/Export, Widgets, etc)

Here are two sorta generic block diagrams for interior page layouts (excluding admin pages). NEW ... FORM is a quickpost form for creating new content (think Facebook or Tumblr).

[1] INTERIOR PAGE LAYOUT, ADMIN LINKS ANCHORED AT THE TOP

[1a] INTERIOR PAGE LAYOUT, ADMIN LINKS MORE INTERTWINED WITH CONTENT

[1c] ANOTHER VARIATION. ALL NAV LOCATED AT THE TOP OF THE PAGE.

Getting back on task here to the sitemap. Here is a concrete default sitemap, showing navigation structure as well as tying individual pages to template pages that need to be designed. It is pretty final, although I might make some minor adjustments. The next step is to design wireframes for each template listed. Strategies for creating the wireframes: evaluate personas, do pre-wireframe exercises on paper, decide key content blocks and rank their importance for each template.

I made up 3 personas (Kip, Cindy, and Liam), I really encourage other people to create more personas following this format. It helps prioritize functionality on the site which helps the design process.

PERSONA 1

Name: Kip Wilkinson
Age: 20
Lives in: Austin, TX
Occupation: Bassist. Works part-time at a grocery store, and also takes 5 credits at a local college. Plays in a band called the "Kingstone Flappers" made up of 3 members: Kip, Luke (drums), and Tom (guitar & vocals).

What type of activities does he do online:

1. Twitter, Facebook
2. Email
3. Youtube videos, Netflix movies
4. Reads music blogs and websites
5. Writes a Tumblr blog about music he likes

What types of activities compete for his time?

1. Going to see shows
2. Booking shows and organizing his band
3. Band rehearsal twice a week
4. Work
5. Going to class
6. Doing homework
7. Spending time with girlfriend
8. Hanging out with friends
9. Playing video games

What activity does he perform on your site?

1. Let people know about upcoming shows, works in progress, and other announcements
2. Personalize and customize the way the site looks
3. Manage discography
4. Upload audio files or link to audio on Bandcamp, Youtube, etc
5. Share news about other bands/friends and local music
6. Link to other sites/media (youtube, facebook, twitter, etc)

How did he hear about your business?

1. He was googling about free website tools for his bands website

General notes:

1. Interested in licensing and selling music
2. Does not have much disposable income that can be spent on this site
3. Does not like to problem solve tech-y stuff, very little patience and quick to switch platforms

Persona 2

Name: Cindy Beckman
Age: 33
Lives in: San Francisco, CA
Occupation: Works at a design firm. Does web and video editing gigs on the side. Plays drums, guitar, synthesizer, performs as a solo artist at local clubs under her own name.

What type of activities does she do online:

1. Twitter, Facebook
2. Email
3. Netflix movies
4. Buys music online from iTunes, etc
5. Reads music blogs
6. Reads tech and design blogs
7. Likes to try out new services and sites
8. Writes for an online zine, manages their website
9. Planning trips

What types of activities compete for her time?

1. Work
2. Hanging out with friends
3. Photography
4. Video editing
5. Writing for the zine, attending meetings
6. Managing and updating zine website
7. Traveling

What activity does she perform on your site?

1. Personalize the design of the site
2. Modifies the functionality of the site (she has some advanced tech knowledge)
3. Uploads music every week (she records a lot of demos and records her live gigs)
4. Upload photos
5. Tell people about upcoming events
6. Writes her thoughts about the music industry
7. Promotes her music and her friends' music
8. Checking statistics
9. Shares interesting or favorite links related to music

How did she hear about your business?

1. She does web gigs on the side and was looking for a Drupal solution since she is familiar with it.

General notes:

1. Willing to contribute back design, themes or code to the project
2. Has disposable income, can afford to pay for extra features or managed hosting

PERSONA 3

Name: Liam Fullerton
Age: 45
Lives in: Chicago, CA
Occupation: Works at a record shop and a music venue. Manages a few bands and plays guitar in an experimental electronic group called "ThunderSplat" - they don't perform out very often but spend a lot of time in the recording studio.

What type of activities does he do online:

1. Email
2. Facebook
3. Music news sites
4. Planning trips
5. Ebay (buying and selling)
6. Craigslist
7. Business research
8. Looks for gluten free recipes to cook for his kids

What types of activities compete for his time?

1. Family (divorced, 2 kids)
2. Work
3. Travel
4. Sports (rugby)
5. Woodworking hobby
6. Booking gigs for bands he manages
7. Engineering recording sessions for his group and other bands

What activity does he perform on your site?

1. Upload music, manage discography
2. Upload band photos, presskit photos
3. Notify people about upcoming new releases and shows
4. Tell people how to purchase music
5. Does all of the above for 2 other bands he manages

How did he hear about your business?

1. A friend in another band recommended he check it out and use it as an EPK alternative to help book shows.

General notes:

1. Limited free time
2. Uses an iPhone or iPad for 99% of web browsing
3. Never built a website before, not a computer person, but is willing to problem solve
4. Has disposable income, willing to pay for more features, themes, automation and managed hosting if it will save time
5. Looking for an easy way to sell music and merchandise online
6. Looking for good marketing opportunities / ways to connect and build a solid fan base

Prioritizing all the Personas I have (a couple were e-mailed to me) and ranking importance of each activity, I got this list.

1. Upload music + 5
2. News & Events + 5
3. Upload Photos + 3
4. Personalize the design of the site + 2
5. Share, link or promote others + 2
6. Manage discography + 1
7. Add or create new modules
8. Upload videos [not in 1.0]
9. Embedding widgets on other sites [not in 1.0]
10. Sharing files with collaborators
11. Statistics [not in 1.0]
12. E-Commerce [not in 1.0]

@discipolo

1. these personas are (will be) site owners, each with their own pushtape instance? (as opposed to visitors on a site)

Correct - in this scenario each persona is the site owner and single user of a Pushtape instance. Things would change if visitors were expected to login (something to explore in the future, for sure).

2.business in this context is the pushtape distribution?

Yes. Just adding more background info about how this person came to use the software.

I may have misinterpreted what you meant by visitors - it could be useful to do this again for anonymous visitors of a site, i.e. fans visiting a site too. But for now just focusing on the main user and what they are trying to do with their site.

I'm not sure I understand the question, how would HTML 5 / Canvas change the strategy?

Here are the wireframes [PDF] done in pencil. It was too big to attach to this thread. Also sorry for the messiness as I used pencil & eraser. There are probably some wireframes missing but 80% of things are shown here and should get things started. It would probably be helpful to create HTML wireframes from these that demonstrate responsive behavior and to help iterate through styles. I could use some help with creating HTML wireframes.

Notes:

1) The simplified admin dashboard and interface here is for USER 2 (the main user). USER 1 login is for experts and drupal developers ONLY. The admin interface is the #1 most important part of this whole project. Distro audiences should expect and receive a full non-developer product experience, as if they were logging into a regular site. (Except it is THEIR site.)

2) Toolbar + messages are "sticky" at the top of each page. When you scroll the page, they stay at the top. The authoring workflow all stems from the upper left corner Tumblr/Facebook style area. The "quick post" form is a fast way to create short news posts. The idea behind this is the author should ALWAYS be one click away from creating new content.

3) The Tracklist view needs to support progressive enhancement using SoundManager, HTML 5 etc for playback. But it should still work fine as a discography list. I tried to make the tracklist + artwork look like one unit, but this could use some more thinking.

4) The music dashboard is still a work in progress.

5) Theming / personalization is a big question mark right now. Part of me wants to just restrict this to developers for now, letting the design rely more on uploaded images and some CSS settings for colors and fonts. The default theme should be stable and functional above all else. Adding new themes later is easy, getting a good default theme out-of-the-box is hard.

Please keep in mind the context of these wireframes - the goal is to satisfy the needs of the Personas as listed above.

This is not meant for technical review, so no tech discussion, please! Keep it about the design & user experience.

Moving forward with PDF Comps...

See: http://drupal.org/node/1398280#comment-6119206