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.

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.