Wednesday, October 31, 2012

Case Study: Design Conspirato Website



The artistic director of Conspriato Chamber Singers, Liska, contacted me in August 2011 and expressed the interest of update their website http://www.conspirato.ca/

Analysis Phase
- Meeting with stakeholders (meeting, conference calls)
I met with Liska in September to discuss the objective and the content she wishes for the new site.
She wants the website to have a fresh new look.

- Develop usability goals and objectives
The choir's main objective is to perform concert for audience.
The website should serve the audience and the choir artist:
For the audience (public):
They needs to know the upcoming event, ticket information, concert program (what each pieces in the concert), background of the choir, the artist
For the artist (private):
They needs to know how to audition, when to rehearse, what music pieces to sing

- Conduct field studies (visit work environment, watch how users work)

- Look at competitive product
Soweto Gospel Choir
http://www.sowetogospelchoir.com/
Home: Welcome, Our Story, Choir News
Performance: current, past, future
The Choir: Gallery, History, Charities, Choir Members
Press: Blog, Reviews, Images, Press Release,  Awards
Discography: CDs & DVDs,  CD Reviews
Video:
Songs: Audio Samples, Lyrics, Collaborations
Presenters:
Links:
Contacts:

Monteverdi Choir
http://www.monteverdi.co.uk/
Home:
Concerts:
About us:
News: News, Concert Reviews, CD Reviews
Education: Apprenticeship Program, School Project
Media:
Support us:
Shop:
Contact us: Vacancies

The Cardinal's Musick
http://www.cardinallsmusick.com/


Home:
Recordings: our music
Performance: upcoming events
Latest News: what's happening
About us: the group
Promoters: how to hire us
Workshops: education
Friends: join us
Reviews: what people say

Toronto Chamber Choir
http://www.torontochamberchoir.ca/index.php


- Create user profiles (Persona)
Fan of the choir:  being to the concert, fall in love with the choir
Potential employer: looking for a talented artist
Artist: member of the choir

- Develop a task analysis (Mental Model)

Fan of the choir:  upcoming concerts, buying tickets, music pieces
Employer who is looking for the artist: choir information, artist, sample music
Artist: join the choir, upcoming events, rehearsal, music pieces

- Document scenario

Design Phase
- Brainstorm concepts and ideas
Chamber Choir : A chamber choir or group of chamber singers is the choral equivalent of a chamber ensemble, using voices instead of instruments.

Conspirato: con spirito means with sprite, with feeling

- Develop screen flow
- Walkthrough the screen flow with the team
- Create low-fidelity wireframe (Balsamiq)
- Walkthrough the low-fidelity wireframe with the team / user
- Create high-fidelity wireframe (Photoshop)
- Walkthrough the high-fidelity wireframe with the team / user
- Document design specification

Implementation Phase
- Conduct usability testing as soon as possible

Deployment Phase
- Gather user feedbacks (Surveys, Field studies)
- Check usability objectives

Wednesday, October 24, 2012

Research: Design For Android

Design Principle
http://developer.android.com/design/get-started/principles.html

Real objects are more fun than buttons and menus

Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.

Get to know me

Learn peoples' preferences over time. Rather than asking them to make the same choices over and over, place previous choices within easy reach.

Keep it brief

Use short phrases with simple words. 

Pictures are faster than words

Consider using pictures to explain ideas.

Never lose my stuff

Save what people took time to create and let them access it from anywhere. Remember settings, personal touches, and creations across phones, tablets, and computers. It makes upgrading the easiest thing in the world.

Sprinkle encouragement

Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions, even if it's just a subtle glow.

Supporting Multiple Screens
http://developer.android.com/guide/practices/screens_support.html

Themes
Holo Light
Holo Dark
Holo Light with dark action bar

Touch Feedback
http://developer.android.com/design/style/touch-feedback.html

Density
http://developer.android.com/about/dashboards/index.html
ldpi (low), mdpi (medium), hdpi (high), and xhdpi (extra high)

Touchable UI components are generally laid out along 48dp units (=9mm)
This is comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users will be able to reliably and accurately target them with their fingers.

Spacing between each UI element is 8dp.

Design for Android
http://mobile.smashingmagazine.com/2012/07/26/android-design-tips/

http://coding.smashingmagazine.com/2011/06/30/designing-for-android/


Glossary
DPI (Dots Per Inch): Screen Density
DP (Density-independent Pixels)