Balikbayan: The Return of the Traveller.
Case Study: Reimagining a responsive web design for a blog.
For the final individual UI project at RED Academy, I created a responsive web design for a blog site showcasing the Philippines.
Project Goals
- Build an engaging and impactful brand campaign
- Create a strong visual brand identity and a responsive website
- Establish a consistent visual identity
- Create a logo
Scope: One Campaign. Three Weeks. One Designer.
Tools || Adobe Illustrator, Adobe Photoshop, Principle, Sketch
Balikbayan
A “Balikbayan” is someone who has been away from Philippines for a long time and is now returning. My target market is anyone who has encountered Phillippines before, but is only now starting to fall in love with the place and culture. I wanted to draw visual language from an excited mood driven by an insatiable desire to learn about cultures in general.
To further limit and constrain myself, I imagined that a client would want to pay homage to the Filipino flag. So the colours I would play with were red, blue, and yellow. Filipino Christmases are absolutely huge in the culture. So I drew a lot of inspiration from the stars and fireworks of that event too. I’ll come back to this. There was a lot of reworking and many iterations, so bear with me.
Campaign Idea: Its-a Blog!~
There were many things I wanted to talk about and explore, and a blog was the perfect platform to do so.
The main influences to doing a blog were:
- The way Tofugu presents Japan on their blog;
- Tofugu’s responsive web design #mobilefirst;
- and Phillipines’ lore, heavily family-oriented culture, and the lost language/calligraphy.
The project goal was to promote tourism, but I couldn’t find a good and proper why that I wanted to flesh out for tourism. I had to step back.
Why would people want to embrace the Filipino culture?
Many second generation Filipinos I knew cast aside their own heritage for a time in their life for whatever reason. They eventually started to appreciate it again, but I want to combat against that initial hatred.
Campaign Alternative: Words “Pambahay” or Words in the Home.
What if I could show how the Philippines could assimilate into the Western world? Maybe I could make a microsite outlining tagalog words that aren’t completely translatable into English.
This idea took inspiration from:
- Buzzfeed listicles;
- Words that have no direct translation in English;
- and The Dictionary of Obscure Sorrows
The time of rejection is usually in teenage years, when they assimilate into other cultures and adopt Western ideals. How do we find love in other cultures, but not our own?
I couldn’t sell tourism to the teenage target market because they have neither the autonomy nor the means to travel back Philippines. This provided further support to do a blog site. Readers could experience the Philippines and its culture without actually having to go there.
Knocking Out A Deliverable
One of our deliverables was to provide a logo. I wanted to make something that drew from the sun on the flag.
It was perfect, because in a way it’s also like a nautical compass helping travellers back.
I wanted to get the above splash screen out of my head and into the world in the same day that we learned Principle. I’m happy to have found a sunset photo from Christ Deluvio on Unsplash that matched the constraints that I gave myself. See the full image in his gallery here.
This want to play with the new technology brought me a bit out of my flow. I should have finalized my target market and general mood at this point, but I was overcome with the want to explore and try new things.
I forced this direction to a tumblr dream girl direction. Something boho, soft, yet still energetic.
This direction would still allow me to have a tangible measure of success because people could literally buy into the culture by buying corresponding merchandise. I could apply these boho-esque symbols to corresponding words and try to sell them.
Tagalog words that kept recurring in lists all over the internet were:
“Pambahay”:
A comfy set of clothes worn at home away from judging eyes“Tambay”:
To hang out and just be“Torpe”:
Someone too shy to pursue amorous desires“Lambing”:
Tremendous desire to be caressed/embraced“Kilig”:
Trembling from happiness, so happy could burst“Tampo”:
Not angry, not disappointed, but slightly peeved (think an annoyed girlfriend)
It was a cute and pastel idea, so I wanted to try it out. My cousin and her boyfriend are Filipino, so I thought it would be fun to do a photoshoot with them for my project.
It was great fun, and I definitely will be using these photos in the future, but the thing is - the landscape is so clearly not Philippines. Also, after talking to many second generation Canadians (Filipino and otherwise), every language and culture is either going rebrand or die in North America eventually.
Back to the drawing board with only one week left, and I really wanted to try reimagining the blog site. So that’s what I did. They say blogs are a dying site-type in this modern day and age… but, with the right upkeep they can be the best sources of information. The perfect platform for someone to get lost in a culture if executed right.
The Final Iteration: Balikbayan
I stepped back and wanted to revisit my first iteration.
A “Balikbayan” is someone who has been away from Philippines for a long time and is now returning. My target market is anyone who has encountered Phillippines before, but is only now starting to fall in love with the place and culture. I wanted to draw visual language from an excited mood driven by an insatiable desire to learn about cultures in general.
Site Mapping & Info Architect
The main blog topics that I wanted to highlight and focus on were:
- Surrounding land inspiring our myth
- Games, culture, and family is huge
- Our love of playing with language
So much of our culture is rooted in history and myths and all the times we interacted with other cultures, but none of that was really passed down. One of our most used phrases “Bahala ka na” has origins in a pre-Spanish tagalog myth, but no one who uses it now could tell you that. I wanted to create a platform where people could get absolutely lost in the history and culture of the Philippines.
A blog site allows there to be a lot of collaboration, series and topics. It has the potential to grow in the future — and the best thing for anything is word of mouth. I wanted to create an energetic template in case I wanted to pick it up as a full project later in the future.
Wireframes
…and on I went. Creating mobile first, and then translating it into a desktop version.
Applying the Viz Lang
From the mid-fi wireframes, I applied the chosen colours, shapes and graphics. (See Abigail L. Dela Cruz and Pascal Campion). I wanted to add a little bit of navigation animation, to emphasize language, discovery, and transformations. The initial navigation system would be in Tagalog, but then transform into the English translations.
Mobile does not have hover states, but there are long press capabilities, and when a user clicks into a series or topic, the landing page would be in English. Each topic would have a corresponding colour, so a repeating visitor wouldn’t have to relearn all over again.
User Flow
The prototype was made in Principle and the free trial has since expired.