Bhangra.meP R O C E S S B O O K

PANSY HUI · SOPHIE LUNDSTRÖM HALBER T · DAWEI YANG

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

introduction

Quoting Museum of Vancouver, “Bhangra is a Punjabi folk dance and music that combines lyrical couplets, a strong dhol drum beat, and flowing, graceful movements. What we call Bhangra dance today is really a collection of different folk dances that originated in the Punjab region of Pakistan and India.”

This ebook design is a group project in collaboration with the Museum of Vancouver to create an ebook for its Bhangra.me exhibit that runs from May 5th, 2011 until January 1st, 2012.

Celebrating and narrating Bhangra music, dance, and politics in Vancouver, Bhangra.me attempts to educate citizens of Van-couver and tourists the cultural significance it brings towards South Asians residing in Vancouver. Bhangra.me is the first Bhangra museum exhibition in Canada and the MOV hopes to promote this vivid and contemporary East-meets-West culture that unites music, dance, and politics. As an extension to the exhibit, the MOV hopes to prolong the life of this exhibition through the format of an ebook so that Bhangra culture could be absorbed anywhere and anytime by anyone.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

design objectives

TO HONOUR THE EXHIBIT

TO INCORPORATE INTERACTIVE & FUN ELEMENTS

TO SHOWCASE BEHIND THE SCENES

· Prolonging life of exhibition by extending it onto an ebook

· Celebrating and narrating Bhangra music, dance, and politics in Vancouver

· Further educating Vancouver citizens the cultural significance it bringstowards South Asians residing in Vancouver

· Presenting new and interactive ways in viewing and digesting the content

· Showcasing the exhibit’s content and to reflect the interactive nature of the exhibit in an ebook

· Showcasing coherently the themes of: timeline, transnationalism, femi- nism, multiculturalism, unity, access, and open-knowledge

· To bring new social aspects

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

team strengths

Having never met, our team identified each other’s strengths in order to delegate the project accordingly.

Sophie - typography, photography, layout, collage, logos, graphic design, public speaking

Pansy - typography, interaction design, exhibition design, layout, user-task flow, ebooks and websites, writing

Dawei - technical, flash, html 5, CSS, blogs, photography, presen-tations, public speaking

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

keeping in touch

We created a facebook group in order to stay in touch and in sync, despite living in different areas and having busy sched-ules. We updated regularly with photos, meetings, ideas and inspiration sharing.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

what is bhangra?

None of us had ever heard of bhangra before, so we did some research and went through the material that was given to us from Museum of Vancouver to discover what Bhangra is all about.

“Bhangra is a Punjabi folk dance and music that combines lyri-cal couplets, a strong dhol drum beat, and flowing, graceful movements.

What we call Bhangra dance today is really a collection of dif-ferent folk dances that originated in the Punjab region of Paki-stan and India. These dances have developed and changed over time. The evolution of Bhangra music flowed in a similar way. Today, worldwide musicians, DJs, and singers embrace the global genre of Bhangra which incorporates many different musical styles and influences, varying from traditional beats and lyrics to Electronica, Bollywood, Hip-Hop, and R&B sounds.

At its heart, Bhangra is more than a particular beat or a standardized movement. It is an emotion: an expression of celebration manifested through music and dance. Vancouver’s Bhangra is a mash-up of South Asian music and dance traditions, pop culture influences, and global Bhangra beats. Bhangra was

saag + maakhi di roti, and ballads sung by bonfire. In Vancouver, Bhangra has grown to reflect diverse immigrant communities. For over 40 years, Bhangra has been at the centre of celebrations: at community events, weddings, culture shows, club nights, and dance competitions. Its role in our collective identity and civic history has yet to be recognized. Bhangra.me is a space where the cultural, social, political, and artistic stories of Bhangra inter-sect, connect, and are shared.”

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

audience

During our first meeting with Viviane, one of our first questions about the Bhangra.me exhibit was, “Who is the audience for the ebook?” It was important to keep the target market in mind when creating this ebook. Vivane mentioned the Bhangra com-munity and Bhangra enthusiats as the main audience, visitors of the exhibit who were intrigued, as well as people who are interested in cultural performance or design, people of South Asian heritage, as well as museum curators who are more inter-ested in the execution of the exhibit.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

existing designs

We began to look into previous ebooks made for museums, tak-ing note of navigation, content display and unique features. The MoMA ebook was quite successful with navigation and de-sign. However, our exhibit does not just feature fine art, it is mroe multi-media based and interactive.

Here are some examples we looked at from the American Mu-seum of Natural History, the Art Gallery of Ontario, and the Melbourne Museum. We took note of their fun and interactive aspects, and creative photo displays.

Formal display Interactive display

At first when we met with Viviane, she had the idea that we would create a virtual version of the exhibition. Here are some examples from the Guggenheim ebook, the Royal Ontario Muse-um ebook, and the Art Authority Ipad app, using this method to showcase artwork. We realized that this approach would not nec-essarily be the best way to showcase the content of the bhangra exhibit, as the space itself was not integral to the experience of the exhibition. We realized that we wanted to translate and interpret the experience onto the ipad platform, as opposed to replicating it.

Floor layout

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

our trip to the exhibit

KEYWORDS FROM EXHIBIT :

· bold, warm, spicy

· dazzling, intimate

· circular theme & imageries

· modern x traditional

· exotic, familiar

· musical

· interactive, multimedia

· sense of community

· sharing memories

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

content breakdown

With the large amount of content provided to us from the exhi-bition, it was crucial for us to break down all of the information into sections, in the same order and flow as the actual exhibit. Doing this made the project less overwhelming, and made it easier to divide up pages to the appropriate members of our team. We also found some sections where there was an overlap, and so we took note of these so that there could be more than one way to get to those pages throughout the ebook.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

workshop with client

Having a workshop day with Hannah was a fun and helpful ex-perience to pinpoint what the client wanted the user to ide-ally: Feel, Learn, Create, Interact with, and See when using the bhangra ebook. We used basic materials of poster board and post-its to jot down key words for each category.

Under the “Feel” category, we came up with: Inclusivity, discov-ery, relatable, wonder, happy, bright

For “Learn”, we jotted down: Process, recognition, tutorials, mu-sic, instruments, dance, social, political, historical, transnation-al bhangra

For “Create”, we came up with: Community, Memories, Photos, Music

And lastly, under the “Interactivity” category, we came up with: Drums, video, audio, and geography

FEEL LEARN LOOK

CREATE

INTERACT

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

moodboardF O R C O N T E N T X

Modern India interior design

Creative calligraphy

Bhangra as a very lively form of dance

Drum app for iPhone

Stamps/prints

Showcasing art (MoMA)

The star of BhangraThe star of Bhangra

Showcasing art in grid layout (MoMA)

Interactive 360-degree tour of museum

1

2

3

4

5

6

7

8

9

Content Moodboard 1 2 3

4 5 6

7 8 9

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

moodboardF O R E X H I B I T X

Some text necessary for descriptions -but not alot

Bhangra as a very lively form of dance

Interactivity - Map shows Bhangra’spresence spread into different regions

Colourful sequins as a symbol of South Colourful sequins as a symbol of South Asian culture and vividness of the Bhangra dance

Gold lettering and red wallpaper

Grid layout

Modern twist - Bhangra as a Modern twist - Bhangra as a mix between its traditional South Asian roots and modern Western influence

Timeline layout

The star of Bhangra

1

2

3

4

5

6

7

8

9

1 2 3

4 5 6

7 8 9

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

visual researchT Y P E F A C E

In addition to designing the Bhangra exhibit for the Museum of Vancouver, Propellor Design also came up with the colour scheme and the typefaces that would accompany the exhibit, in which they call it the “graphic standards.”

The choice of typeface at the Bhangra exhibit is Frutiger, which they have mainly used for the body text. As for the wordmark, they used Bentwood.

For our ebook, however, we used Myriad Web as the main type-face because we could not get access to Frutiger and Bentwood - they are purchased fonts. As an alternative, we decided upon Myriad Web simply being one of the closest typefaces resem-bling Frutiger and for its ledgibility on the screen. BHANGRA

Museum of Vancouverexhibition

Myriad Web REGULAR

Myriad Web SEMIBOLD

Myriad Web ITALIC

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

visual researchC O L O U R S C H E M E

The colour scheme is provided by the Museum of Vancouver, created by Propellor Design. The colours are warm and inviting; the vibrance reflects the vivid Bhangra dance.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

sketches

For ideating, we started off drawing really rough sketches de-scribing the general sense of some major interactive features we have envisioned for the ebook design. The spinning main menu, for instance, is one of the highlights of our ebook design and we have all agreed that it would create a less linear presen-tation as opposed to the typical ebook.

We, then, moved into sketching wireframes to depict user task flow and to start envisioning screen transitions. It is essential during this stage to decide where the screen transitions should be and how the user would move from one screen to the next. We have spent the most time during this process figuring out screen transitions partly because there is so much content.

sketchesW I R E F R A M E S

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

prototyping

As we sketched, we have also done some prototyping to get a more tangible sense of the interactive elements of the ebook.

During the initial stages of sketching, we have developed pa-per prototypes of the interactive elements that would fit inside a mock iPad frame. Because we were able to move around these elements, it allowed us to see the scale.

As we moved on to designing the pages of our ebook on our laptops, we would constantly transfer our design files back and forth, from our laptops to an iPad and vice versa. Not only did that helped us see the scale, we could also see the differences in colour. Most importantly, though, it helped us get a better sense of screen transitions.

P A P E R P R O T O T Y P E S

i P A D T E S T I N G

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

solution

Through multiple iterations, weekend group meetings, and keeping in mind our keywords and design objectives, we came up with a final prototype. The home page with the wheel navi-gation took several iterations and refinement to ensure that it was intuitive, and easy to use. We wanted the rotary navigation wheel to be accessible at any point in the ebook, so that the user can jump to different sections with ease and confidence. Therefore, instead of going all the way back to the home page, we came up with a mini wheel, which at point, with one tap, will dim the current page, and reveal the wheel, as well as commu-nity and behind the scenes tabs. These tabs were very impor-tant to the clients, as they wanted the user to be able to share their thoughts, photos and bhangra experiences throughout the ebook. As for the behind the scenes tab, we wanted to show how the exhibit was created, and all of the work and research that went into its conception. The exhibition was created from original interviews, archival footage, personal photo albums, and community consultations, taking over 2 years to complete. Viviane mentioned that other museum curators or museum afi-cionados will really appreciate seeing the documentation of what went on behind the scenes.

Another key component which also needed to be accessible throughout the ebook, was music, because it is so integral to bhangra. In the centre of the mini-wheel, we have a play but-ton, so that music can be playing in the background. There is also a playlist icon, which leads the user to a music library con-sisting of several playlists: Vancouver Bhangra, UK Bhangra, In-dia Bhangra, Essentials, and Electronic.

In terms of the small paragraphs of text for certain sections, we decided to open these sections with full screen images, to in-trigue the reader to want to read more about the specific topic. With a slice of a circle peeking out on the right hand side, the user is invited to slide the circle outwards, revealing the textual information (and embedded video for some) associated with the photograph. At the end of each sub section, there is a link to go ahead to the next sub section, to provide the option to move through the ebook in a linear fashion as well as having the wheel.

Certain sections of the ebook, such as costumes, and transna-tional, involve a more exact interpretation from the actual ex-hibit, but translated to fit for the ipad. In the transnational “its a world wide thing” sub section, the same brightly coloured map

ngra beats from three continents around the globe. For the cos-tumes section, high definition photographs of the costumes are displayed and by touching and holding, a magnifying glass is able to reveal the tiniest details of every sequin.

Of course, we wanted to incorporate fun, interactivity and mu-sic in our ebook. So we have a bhangra lab section, where the user can play simulated dhol drums, with the option to record their beat on the community page. Tutorials are available for first time users and drummers to learn basic bhangra beats.

thank you!Special thanks to

Museum of Vancouver for giving us this wonderful opportunity,and for providing us with so much resources and material for this project!