Infinite scrolling and giving value

Content is queen.
Producing value is the now thing to do.
Infinite scrolling is addicting. I’ve been consuming more content than I should be — without giving back.

 

Curated content is king.
Producing a bit of that and a bit of this — things that aren’t totally related is bad.
People get confused what I am all about.
Unless I can separate them into categories.

 

Branding is good.
Building a personal brand is also the now thing to do.

 

But give value. Always give value.
That way, people can relate.

Tone and Voice list

Freelancing at a start-up right now. I miss the feeling of everyone in the team being passionately involved in the product.

Again, I’m obsessively writing and re-writing micro-copy for the app, and I love it. Too bad I can’t do the Chinese version.

Here’s a list of Tone and Voice style guides that I picked up in the internet:

  1. Mail Chimp: http://styleguide.mailchimp.com/writing-principles/
  2. Duolingo: https://incubator.duolingo.com/resources/localization-style-guide.pdf
  3. The Economist: http://www.economist.com/styleguide/introduction
  4. Slack: https://api.slack.com/best-practices/voice-and-tone
  5. Design thinking exercise in finding your product’s voice: https://clearleft.com/posts/401

Review: Flinto vs Adobe XD, Invision, Origami

Just discovered Flinto for prototyping interactions that integrates well with Sketch.
And so far I think this is the best one for doing a whole app experience, or just going down to detailed interactions.
https://www.flinto.com

Tldr;

Adobe XD, Invision, and Flinto are great tools for when you want to show how screens are related to one another.
Origami and Flinto are great for how mobile components interact.

Flinto
– It integrates super well with Sketch — I can export artboards from Sketch to Flinto and it will appear the same except when I have Nested Symbols.
– No shareable link, but has an app and can record screens.
– Great for web and even better for mobile.
– US$99 per license

versus Adobe XD —
– Flinto has the same drag & drop linking as XD, but Flinto allows you to draw a hotspot around components, while XD does not.
– XD is easier for sharing via its Shareable Link.
– XD is great if you create your prototype in XD, but if you use Sketch more, I think Flinto has more value.
– Adobe XD is great for web and mobile.
– Has shareable link, and an app.
– HK$388/month.

versus Invision —
– The Craft plugin Sync function is buggy, not so seamless integration to Sketch.
– Invision’s Build Mode is same to Flinto’s draw link, but Invision is limited and slow as a web app.
– That said, Invision has Comment Mode and is better for sharing prototypes and collaborating and getting comments screen by screen.
– Invision is good for web and mobile.
– Shareable link!
– US$22/mo.

versus Origami —
– Origami is great for doing very flexible animation, eg when you scroll the font size becomes smaller.
– It feels almost like doing code.
– It’s not good for prototyping a whole app experience.
– Flinto does have Scroll groups like Origami does so you can do horizontal scrolling.
– Origami is great for mobile interactions/gestures.
– No shareable link, but an app and screen recording.
– FREE!!

Thoughts on Agile and Iterative Design

Didn’t have the luxury of doing user research before jumping right in to the project 😔 So now, I’ve been doing the research and the design simultaneously, and there’s so many things that needs to be changed in the already coded design! And all this because the user research is telling me something else. I’m super itching to just wipe clean the design and restart again.

I guess this is the pain of agile too. I’m agonising whether to do just that and mess up the dev timeline, or just to proceed with what we have and test and reiterate with the test results and this new insight.

I guess agile is also about giving up control of being perfect, of accepting the process is not 1 – 2 – 3 – 4, but can also be 2 – 3 – 1 – 4.

Interaction Design Analysis of Hong Kong Wetland Park

The Hong Kong Wetland Park was built to compensate for wetlands lost due to new development, and to educate the public about Hong Kong’s diverse wetland ecosystem and highlight wetland conservation.

I was quite thrilled with how they designed the park, specifically:

  1. how the themed-gallery provides meaningful interactions that educate the visitors, especially the kids;
  2. how they use the public space to build relationships between parents and children, between humans and the environment; and,
  3. how this project is a legacy to this generation’s commitment to responsible urban planning and how they then entrust it to the future generations.

The park is divided into the indoor and outdoor area. The indoor area houses a themed exhibition area that uses games to educate and interact with visitors. For this blog post, I’d like to loo closer at the games used, the game mechanics and interaction.

 

Theme: Educate the public about the consequences of environmental decision, stress proper farming, logging methods.

FarmSimulation game screen shots. 

Mechanics: They used a simulation game wherein the player decides what kinds of crops to plant and where, and what kinds of added infrastructure were needed a la The SIMS. The game would then simulate crop growth, yield and environmental consequences of the agricultural plan. After, it will suggest proper farming techniques to the player, and the player gets to play again.

Thoughts: I think this is a good way of testing player’s knowledge in certain areas like farming and logging without overwhelming them with information. If they are unsuccessful on their first try, the player will feel challenged to do better on the next around. The game will then tell the player how to win the game through educational information. Next round, the player will naturally gravitate towards correct farming, logging practices to win.

Theme: Challenge assumptions on our daily consumption and present data

image
Interactive “infographics.”

Mechanics: Multiple choice type of game wherein displays light up when the player hits the correct answer.

Thoughts: I especially like how data is presented as opposed to infographics or just using plain numbers. The water bottles light up to indicate how much water is used up by washing machines, by using the shower, etc. And because the bottles used are the actual size, it is easier for the players to get a feel of just how much is wasted.

 

Theme: Save the wetlands.

Personal Screen of the Game Show - HK Wetland Park
One of the personal screens uploading results to the main screen.

Mechanics: For this one, game-show type mechanics was followed. There are four players per session, and each of these players participate using personal screens that surround the big, main screen at the middle.

The main screen is a simulation of building growth over time. The buildings are color-coded to each one of the four players. The more buildings appear on the screen, the more destroyed the wetland gets.

Each player controls one aspect of the environment: recycling, something, something and something. There are 8 rounds of questions. For every round of correct answer, the color-coded building assigned to the player gets blown up, making the wetland healthier.

image
The main screen. 

Thoughts: This game is slightly complicated and not executed properly. I attribute the biggest confusion to the main-screen graphics. They looked like charts and not immediately apparent what is going on there. For every round, the personal screen sends the results of the game to the main screen. The main screen changes according to the scores, but the personal screens don’t get any feedback on how much color buildings were destroyed and how many else is left. This doesn’t give me a sense of accomplishment.

Also, it’s impossible to join in the game or figure out what’s going on after the game starts. The result of this were kids getting interested in the screens and start clicking away, but nothing happens. They don’t wait anymore and move on to the next game. I thought that was poor as this game seemed to be the centerpiece of the exhibition area.

 

Conclusion

The success of the interactions is largely because they stayed true to the education theme. The games all had clearly defined purposes, and the designers used the appropriate game mechanics for them. However, being too educational borders on boring if not balanced with fun and simplicity. The main audience are kids, and as curious as they are, they will shy away from things not easily comprehensible to them.

Life (Bio—) and Why I’m Excited About It.

Bioinformatics

I started working for a bioinformatics company a few weeks ago and I’m just so amazed by what they’re doing.

In a nutshell, bioinformatics uses computer science to understand biological processes. It’s about dealing with big data produced by sequencing genomes. The practical applications are mind-blowing. For example, bioinformatics help in identifying disease-causing genes like cancer genes. And what gets me really excited is that this field will literally change the way we live and how long we live and I am going to be part of that!

I was a little afraid of working here at first because of the language barrier and because they don’t really have the awesome offices and culture of a silicon-valley-esque company. But after watching a 5 hour documentary about DNA (http://www.pbs.org/wnet/dna/episode1/), I think I will be eternally regretful if I pass up the chance to make a dent and contribute to this bigger cause called human life.

Whew. I never thought that I would find something like this in Hong Kong.

Biotechnology

Anyway, with this new-found curiosity for bio-anything, I have stumbled upon Theranos and Elizabeth Holmes.

Theranos is disrupting the medical testing industry with a new and cheaper way of doing blood tests. And Elizabeth Holmes dropped out of college to found it.

I find myself idolising Elizabeth. She is amazing and the work she has done – she has created a meaningful product that solves a real problem and will actually make life better for everyone.

Some bits of this idolisation probably stem from me identifying with her physical attributes: her deep voice and the way she likes to sit de quatro. But that’s beside the point.

I like how she is highly motivated and purposeful. And I envy her that she knows what her life’s work is going to be and that she’s already doing it.

“I grew up with those stories about greatness,” she said, “and about people deciding not to spend their lives on something purposeful, and what happens to them when they make that choice—the impact on character and quality of life.”
-Elizabeth Holmes, New Yorker http://www.newyorker.com/magazine/2014/12/15/blood-simpler

 

Being: Direction, Choices, Identity


So I saw this video lying around in my Facebook newsfeed, and decided to watch it.

When we choose between options that are on a par, we can do something really rather remarkable. We can put our very selves behind an option. Here’s where I stand. Here’s who I am. I am for banking. I am for chocolate donuts. This response in hard choices is a rational response, but it’s not dictated by reasons given to us. Rather, it’s supported by reasons created by us. When we create reasons for ourselves to become this kind of person rather than that, we wholeheartedly become the people that we are. You might say that we become the authors of our own lives.”

– Ruth Chang,“How to Make Hard Choices”, TED, May 2014, New York

This makes me remember Theology class and the fundamental option theory. Only I don’t want fundamental option in the Catholic definition of it about sin, but in a more philosophical view: that one action (sin) does not equate me being a good person or a bad person, but the sum total of all my actions. And these actions are all guided by the fundamental direction I have chosen, to become good or bad.

This also makes me think of statistics and graphs: where all dots in a graph would probably be going in more or less the same chosen trend, and the few outliers out there, are just that, outliers that do not change the trend of the graph.

And this makes me reflect on what I’m doing right now, introducing myself as a UX designer, and fundamentally choosing to be one. This makes me start doing a lot of different things — like attending events, talks, conferences, or meeting people interested in it, or doing small projects to deepen my knowledge of it — that leads me into actually becoming a UX designer. (Or I can be philosophical and say, am I not already one right now?)

This past month made me realise that having a vision of what I want to be is very powerful.

For one, I was able to get rid of my almost quarter-life crisis of not being good enough to become anything.

Second, I have now put myself in a box that limits the choices I can make. And that’s good because knowing I can be anything I want severely paralysed me from finding out the one thing I want to become. If that makes sense. (This again makes me think of Theo131, freedom and commitment.)

Third, this box has made me become creative. I have become more attuned to the opportunities I can take to become what I want to be and think up strategies to get there.

Fourth, I’m optimistic. I feel that everything is now setup for success and I just have to take the steps to get there.

Fifth, I’m happy.

I’m so happy I’m teary right now.

This makes me go back to this post I wrote after the last day of school: A Closure, A Commencement: Reflecting On Four Years of Life. At that time I was a drifter, not knowing what I want to be, but just promising myself to become a being-towards-perfection. I think my 2012 self would be proud of what I am now, actualising.

It’s almost the end of 2014, so today I promise myself something: to never get lost again, to always have a goal I can aim small wins at, and to look back to this post whenever I feel burned.

Hang Seng Bank Website redesign

This is an exercise taken from the book Don’t Make Me Think, Chapter 6 : Street Signs and Breadcrumbs by Steve Krug.

Here, I examined the Hang Seng Bank website and took it through Steve Krug’s acid test for web navigation.

Original Site (link)

image

Parts Identification

image

What’s wrong with this?

The global navigation doesn’t emphasize which section is on mouse over.

“You are here” indicator is a highlight in the global navigation (in this example, “Personal”), but doesn’t determine the specific subsection where the user is.

User login is a complicated two-step process with the user required to click Logon first before being able to input username and password to actually login.

My Version of the Site

image

What I did

Fixed the global navigation to highlight mouse overs.

Added the page name, “Private Banking” with the necessary breadcrumbs to help users determine where they are.

Labeled the local navigation to emphasize these were services under the current page.

Removed one step from the login process by having the form ready to be filled up in the page.

How Art Transforms Communities

In the Philippines, as in many developing countries, slums are a big part of major urban areas.  More often than not they receive less love from local governments and lesser love from residents. The quality of life is bad, crime rates are high and security is a major issue. But as they make up a large part of the voting public, they’re here to stay. So the question now is, how might we elevate the quality of life in these communities?

One solution is using art to improve living conditions. Here are examples from other countries:

In Taichung, Taiwan, an area slated for redevelopment has avoided demolition. Dubbed as the Rainbow Village, the childlike art enveloping rows of houses is the work of 90 year old Rainbow Grandpa who started painting to protest. Once word got out that there was a quirky village somewhere, people started pouring in. Soon, popular opposition caused the government to halts its plans and the village completes its transformation to a favourite tourist spot.

rainbow3  copy

blog-tw1

Gamcheon Village in Busan, South Korea was rejuvenated by street art. The place has a dark place in Korean history books as having hosted religious and political groups. After the Korean War, the village was a depressing place to live in. The government spearheaded a project to revitalise it and invited young artists to craft murals and sculptures throughout the area. The surprising and sometimes eccentric artwork drove in tourists. Today, Gamcheon enjoys an economic boom with more and more coffee shops and experience centres cropping up.

Gamcheon

little prince

Design Thinking for The Philippine Schools

Habi Education Lab gave me the opportunity to facilitate mini design thinking exercises for K-12 teachers during ActivatED, a UP College of Education organised event, last July 5.

For majority of the teachers, this was their first time to encounter design thinking. But by the second phase of the activity, everyone was abuzz with excitement.

I accord this both to the design thinking method itself and how Habi founder, Gerson Abesamis introduced it. In establishing that there are no bad ideas and recognising that everyone is creative, the teachers had a safe environment to ideate in. Imagine teachers behaving like elementary students in an art class, it was liberating.

The challenge: Designing a New Wallet.

Common problems are losing wallets, risk of the wallet getting stolen, somebody at home lifting money off the wallet, and spending too much money.

Design solutions are biometric wallets, wallets that can be chained to clothing, wallet with a crocodile-design to bite your fingers off if you get money (haha, funny!) and etc.

Takeaway

My key takeaway has nothing to do with design thinking at all.

From what I’ve seen here and my time at the Ateneo Leong Center, any activity-based event always gets participants, in both cases, teachers, engaged.

Hope everyone has that same realisation and apply it in their respective classrooms: Forget the lectures, students pick up on lessons faster if they’re learning with their hands.

About HABI Education Lab

Habi Education Lab brings grassroots innovation to Philippine schools through design thinking and participatory action research. Their four-step cycle adapted for the Filipino framework is: Himayin ang problema, Ambagan ng mga idea, Bumuo ng prototype, Ipakita, ayusin at suriin, together, HABI.

Thanks Gerson for letting me participate!

For more information about Habi, visit their website or Like their Page.

designthinking-place

———-

Disclaimer: Phone camera photos in low-light make pixelated photos.

Cross-post on Tumblr. Follow me there for faster updates.