UXHK 2014 notes: From Customer Insight to Great Products

Root Cause Analysis

  • the first answer might not be the right answer –> DIG DEEPER
  • WHY is that our problem?
  • 5 Why’s: Problem – Why – Why – Why – Why – Why – Solution
  • one branch at a time, like a mind map
  • Rethink how you’re facing the problem
  • We are often NOT the average consumer
  • to find it: go out and talk to people –> Thinking tool –> VALIDATE!
  • Research: explore problems
  • BUT! It’s not going to be perfect
  • Hypotheses: test
  • If a solution has a minor cost and relatively high success, then why not try that out?

 

Innovation Clover

Constraints

  • User Needs: unmet needs, improved experience
  • Money/profit: high revenue, low costs
  • Business: brand and strategy alignment, skill sets/expertise, resources (human and financial); cost of doing something: what product can we NOT do to invest in ONE thing
  • Technology: new capabilities, technical debt (every time we cut a corner, we can hinder design or meeting customer needs; keeping up with technology)

Relationships

  • find the partner you need to be successful
  • you don’t have to do everything
  • WHAT do I have?
  • WHAT am I missing?
  • Partnerships –> Re-evaluate –> What do we need to do next?

Business Capabilities

  • Creating capabilities
  • creating something customers love
  • Starting points can be uncomfortable
  • users may not know how to articulate what they need –> they don’t know what the solutions are
  • Design: foresee

 

Reaching Your Stakeholders

  • articulate what’s going on
  • Recommended Reading: “Crucial Conversations” 
  • Reframe the conversation: find the path that’s right / towards what will drive the results

 

Avoiding the “Me Too” Products

  • Experience Continuum

IMG_1101

IMG_1104

 

Identifying Markets for Global Research

Where should we do research? 

  • country differences are not useful
  • (a) Is the design fundamentally different?
  • (b) Data entry: is the paradigm fundamentally different?
  • (c) Are consumer behaviors fundamentally different?
  • (d) Are the countries fundamentally different in any relevant way?
  • BIGGEST DIFFERENCES, not biggest markets

 

Currently Reading: The User Experience Team of One

I’ve recently decided to join a team as a designer and front-end developer. We’ll be working on a product and I wanted to start off with the User Experience in mind. I bought the book, The User Experience Team of One on the Kindle app a day before UXHK (as a refresher, because I didn’t want to embarrass myself if I say things that may be incorrect when talking with other people, hehehe). I haven’t finished the whole book, but as the reviews on Amazon said, it is a good guide for those starting to integrate UX more into their products. It is general enough that you can come from any background but is specific enough to give some guidelines as to where to start.

As a designer, I have the tendency to jump right into the visuals even though I haven’t really understood the business goals or clearly identified user goals that would guide the interface design. I keep in mind UX design to an extent, but I’m not usually part of the team when planning the product (or at least the last time that I was, the company doesn’t exactly start with the UX even though it keeps some of it in mind, such as design principles for user interfaces). I attribute it to only being hired as the visual designer (and front-end developer) so I’m not really part of the planning of the product, where design decisions can be made very early on. This time though, with the new job and project I’ll be working on, I could be more active when it comes on identifying key aspects that will affect the product we want to release.

I definitely recommend the book to anyone who wants to put user experience first regardless of their role in a team (or as an individual). It really is a good starting point for designing user experiences.

Spark Camera on iOS (and circles on your interface)

Spark Camera is free on the iOS App Store for a while, so Charlie suggested that I download the app since it was really pretty for a video recorder+editor. I’m not used to taking videos, more less editing them, so I don’t think I did pretty well compared to Charlie’s tests.

It’s interesting because it seems like circles are slowly becoming more common in mobile UI (thinking about Paper’s undo function) and there are  cases where it works and it makes sense. Spark Camera also uses more gesture-based actions such as sliding to move from one screen to another, or for menus, and at first I would miss some things, but playing around with it twice I think gave me a good idea on how to do things.

Attractive UIs really help getting word out about your app. :P It’s actually very simple, and the videos filters are lovely (reminds me of Path filters).

Here are some screenshots of the app:

UI design: donation form design done right

While I was looking for an organization to donate to, so I could help in some way families who have been devastated by the typhoon. There was one site that stood out from those that I’ve looked at (which aren’t many, to be honest): Unicef (PH)’s donate page.

Most sites that would ask for money look like this: you have a simple form that asks for the amount you want to give, sometimes options for specific campaigns, method of payment, etc.

Red Cross donation page screenshot

 

I know it’s Red Cross and is probably trust-worthy, but I could imagine some kind of misappropriation of funds. What if????

Unicef’s form, however, builds reassurance or trust. It shows me where my money will go or what exactly it will be spent on, which is especially helpful when you have a corrupt government and you’re just bred to distrust.

Unicef Donation page screenshot

 

The photos are also a nice touch to show me what exactly I’m donating with my money.

Not that I don’t trust Red Cross, but there are a couple of other sites I have never heard of, nor have known people affiliated with them that would vouch for trustworthiness. The Unicef form is definitely a good example of where to start when it comes to designing for emotion.

I have a 2013 Nexus 7 and it’s still not good enough

Ultralinx published a very good review of the 2013 Nexus 7. And I agree with them: great specs for the price, even if it is around $60 more expensive in the Philippines compared to buying from the US (roughly around $330 compared to $270). But Oliur Rahman echoed exactly the reason why the 2013 Nexus 7 still isn’t good enough:

Android is still a very capable OS and is arguably the most powerful mobile OS available right now. There is so much you can do with it compared to its competitors – it’s just much more versatile.

However one major problem I still have is the quality of apps. Sure Android now has an app for basically everything and anything, but quality in terms of UI and UX just doesn’t seem to be on par with iOS.

I hound Google Play every week waiting for something: I don’t know, maybe some exciting Android tablet app. Maybe a new addition to their featured android app list that I’m actually interested in.

In terms of games, Android isn’t very far behind (it catches up a few months after the popular games are released on iOS, such as Plants vs. Zombies 2). However, when it comes to the apps that differentiate themselves (maybe something like Figure or Day One), the Android ecosystem is pretty lacking. There are some alternatives, but they don’t particularly impress me with the design of the UI and experience. This is old news. It can be argued that the Android apps have the same features as iOS apps (or maybe even more), but it does not equate to the similar experience I’m looking for that only excellent design can bring. Android’s app ecosystem doesn’t make me feel as excited or happy as the iOS app ecosystem, which makes me want to go app-window-shopping as regularly as possible. I even searched for music-making apps once, just to see if there’s anything my boyfriend could use, and I found one that seemed really good except the design wasn’t all too visually appealing. They don’t seem to have an ultimately amazing app that you will die to get an Android for (unlike, say, how I feel about Paper. Because it’s only on iOS, if you want exactly that kind of drawing experience, you absolutely must have an iPad).

It’s no surprise that more iOS apps are featured in BeautifulPixels (which is my go-to site for app recommendations) compared to Android apps. I’m not saying there aren’t a few gems out there (JotterPad X for Android is a very lovely alternative to iAWriter on the iOS); the really well-designed ones are just too few, and for  tablet-optimized apps the options are fewer. I’m sure more beautiful apps will come to Android (though for some maybe never). I just wish they would come sooner. For now, my Nexus 7 tablet is mostly a device for consuming rather than creating.

Dashboards

I’ve been working on dashboards. Not very often, but I’ve had a few projects, and I usually start out feeling lost and confused about where to start.

I recently signed up at froont.com to check out their responsive-making tools and was greeted with this pretty simple dashboard.

Damn, I really need to work on my design skills more. When I try to do something minimally, it usually just looks boring. :(

Why SMART’s “re-design” of the User Accounts page has a horrible UI

Charlie asked me how I liked the new design of SMART’s User Account Page, and I said it was pretty bad. It was one of those examples of “style over function” because even if it looks neater than the old version, my experience as a customer was worse than before.

I only ever log in to check my balance whenever I have to pay my bill. Charlie logs in to pay his bill from the Bancnet link on the site. To be honest, I can’t remember how it used to look like, but I’m pretty sure I had an easier time looking for my bills and paying with the old layout than the new one.

To illustrate — this is the screen that I see once I’ve selected the account to “manage”:

image

I saw my outstanding balance, but a few days ago I got a weird “0 balance” email from SMART, so I wanted to first check my old billing statements to find out the last bill I’ve paid. This is the first link I try to click: image

Apparently, it doesn’t work. My clicks do nothing, and the page I’m at is the entire “Account Balance” page. There was a “View bill details” link there below my “Outstanding Balance” which I didn’t really notice at first, so I decide to click it thinking it will open up the PDF copy of my current balance’s billing statement.

image

And then it brings me to:

image

The billing page.

Well, ok, I still can’t equate “View bill details” = list of all billing statements. It made more sense in my head that it was the billing statement that was related to my Outstanding Balance.

And so, apparently the Billing Page is under “Manage Services” instead of “Account Balance”.

I’m sure I’m not the only one who would assume I’ll find my statements under “Account Balance.” It is, after all, related to accounts and money. This is obviously a bad case of Information Architecture and I wonder if SMART’s design team tested this particular layout on any human being. If they really wanted to push it, how hard was it to put a “Billing Statements” button from the Account Balance page because it really sounds like Balances = Money = Bills!

What else could they have “RE-DESIGNED”? Why not add a “Paid” status (or unpaid) or even show the total balance in each row of the billing statements? I had to assume it was the most recent one, but if I really wanted to check if my billing statement had the same balance as the one on the Account Balance page, I must open the PDF.

Likewise, the ATM link was under “Bills Payment”, which Charlie couldn’t find initially because he couldn’t associate paying bills with “Manage Services”

image

Whatever the internal name SMART has for these billing things are definitely not what their customers would assume or think of. “Manage Services”? Sounds like it’s where it says I’m subscribed to their network still, or the length of my contract, or if I’ll be terminating my contract, etc etc.

If they only invested a little time into their info architecture, it would have saved me a good few minutes.

Resource sharing: a Design Basics module

This is a quickly-gathered list of topics and links to give a simple overview and some foundation of design. I originally shared this with my teammates, but I’m putting it here for anyone who might want to check the list out.

(This may not be the best list out there, but it is a quick overview or summary, if you wish, with the goal of pointing people towards the right direction.)

Design Basics

Intro to learning design – http://www.vanseodesign.com/web-design/learning-when-overwhelmed/

Design – Visual and interactive communication

http://nwrain.net/~tersiisky/design/design.html

Visual design elements

 1.line

 2.shape

 3.color

a.hue – pure state (red/blue/green, etc.)

b.value – lightness or darkness

c.saturation – (intensity or chroma) brightness or dullness

– saturation levels for screen and print are different. i.e. what looks bright on Photoshop may not print at the same level of brightness

 4.value (relative lightness or darkness) – adds volume, feeling, creates mood

 5.texture – surface quality, roughness or smoothness

Design principles

 1.unity

 2.variety

 3.emphasis

 4.balance

 5.scale

http://www.auburn.k12.ca.us/ev-cain/Teachers/Sarradet/Presentations/Art%20Principles.pdf

http://www.slideshare.net/mindartpower/principles-of-design-nf

http://markwmcginnis.wordpress.com/2010/10/09/design-the-parts-and-the-whole-chapter-11-unity-and-variety/

Gestalt theory

 1.closure

 2.continuance

 3.similarity

 4.proximity

 5.alignment

(Read all here: http://daphne.palomar.edu/design/gestalt.html)

White Space

http://www.vanseodesign.com/web-design/whitespace/

http://boagworld.com/design/why-whitespace-matters/

Typography

http://ilovetypography.com/2008/04/04/on-choosing-type/

http://markboulton.co.uk/journal/five-simple-steps-to-better-typography-part-5

Grid systems

http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1

Aesthetics

http://www.vanseodesign.com/web-design/meaningful-design-aesthetics/

http://www.interaction-design.org/printerfriendly/encyclopedia/visual_aesthetics.html

http://www1.coe.neu.edu/~yilin/IE7315_2010/Paper%20Review%20Schedule/Design%20aesthetics%20principles%20of%20pleasure%20in%20design.pdf

Book: Why we love to hate everyday things

some good ideas wither under bad execution

From a recent thread on the Philippine Web Designers group on Facebook, a site was brought to my attention: http://kristn.com/

I haven’t really browsed through the entire site yet. Upon landing on the page though, I had no idea what it was. All I saw was this sunshine of images I didn’t understand and promptly went back to the Facebook thread to ask instead what it was. I was redirected to this article on theBobbery, which had a brief synopsis:

Kristn is a new Lifestyle Assistant, an exciting project by TV5/Interaksyon. What is interesting about Kristn is how the platform will recommend content to users, based on how they use and interact with the platform. Kristn is still in Beta but the crew hopes to release the mobile applications in the next weeks. And Carlo reveals that the platform will soon also have a TV show.

Sounds great on paper, yeah? But the execution was horrible, not to mention very bad branding. “Kristn” — I mistyped it the first time, and if you’re building an online brand/presence, this can be a bad set-back.

If there’s anything I learned from Startup Weekend Manila last year (2012), your product’s name is important: how it’s spelled, if it’s easy to remember, if it’s easy to type. Before launching commute.ph, we were almost going to launch it as “komyutips.com”. The domain has already been bought, branding was done, and we thought the name was a creative version of “commuting tips.”

Except let’s face it, commute.ph is more direct to the point, foreigner-friendly, and less prone to spelling mistakes. (How would you tell a person to check out komyutips anyway? Go to komyutips.com, but use a “K” not a “C”. Sounds bad.) We were told about the bad branding by our mentors there, and even if we had to shell out more money for a new domain, try to wrack my head around some kind of temporary branding for the SW Manila presentation, and redirect customers from the old Facebook fan page to the new Facebook page, we decided to go through it. With new competitors coming up, I’m glad we did.

It’s same with “Kristn” — it’s not “kristin”, or a more popular spelling of the name. If someone told me to check out “Kristn”, how would they say it? “Go to kristn.com, it’s like kristine, but without an ‘I’ or an ‘E’.” That sounds bad too. It probably kept a few people away from your site.

Then again, the homepage tells me so little about what to expect or what it’s about, and doesn’t highlight what’s great in the site: its content. One of the articles that I checked out (or the only article I checked out, for now) was: 5 Things We Learned at Google Philippines Launch because it didn’t sound like the same old “Google puts up office in Manila” news.

So as a whole, Kristn seems like it had some solid idea behind it, and as Franky mentioned on the Facebook thread:

But they have a rather cool recommendation algo and then also check-in and other novel features upcoming.

Unfortunately, with their homepage so badly designed, and a name that doesn’t quite stand out like Rappler does, I feel apprehensive about this site fading completely in the background. None of my friends share articles from this site, or tweet things from this site, and that’s very telling.

I still want to check out some of the content though, but I have to try to see if it works on any of my readers first.

Nintendo needs to up its UX game

I recently bought a Nintendo 3DS XL (add my friend-code if you have one! 0232-7880-2450) — primarily because I wanted to play Pokemon (yes) but also because I’m tired of the ‘Western’ games of the iPad. I mean, they’re fun and addicting, but you don’t always get a cute story like that of Okamiden (Chibiterasu IS SO FUCKING CUTE, HELLO). Sure I’m like, more than a year late or something, but I was in a spending mood and I haven’t bought a toy for myself in the longest, longest time.

Excited as I was, there were a lot of things that frustrated me with the DS. Trying to do the simplest things take me more than minutes to accomplish and the experience is something that you just have to get used to rather than enjoy. 3D is cool, but it hurts the eyes when you’re not viewing it from a straight angle so I’m not even on that mode so often. It’s the games that keep me on the device — but that’s it. Basically, if not for the games, the device and other native things on the DS are so ancient because of how smooth and fast tablets and phones are these days.

1. Similar apps that should be merged together exist as 2 different programs.

See, there is this “Mii Maker” where you make or edit your avatar, and then you close that and open the “Mii Plaza” to meet other players and see their avatars. From the “Mii Plaza” you can only edit your Mii’s hat, but not anything much. The color of your Mii/avatar, the name, and other avatar details you have to edit at “Mii Maker.”

That’s bad. Just, really bad. You should be able to edit your Mii directly from Mii Plaza because the whole closing-this-app-and-switching-and-then-going-back is really tiring. Maybe I wouldn’t complain so much about this except you can’t even multi-task or open these two apps at the same time.

2. LOADING AN APP TAKES TOO FUCKING SLOW.

Every time I load a new app (such as the Mii Maker, Plaza, or any of those that are stored within the DS), the “Nintendo 3DS” loading screen appears on my screen for like, 5 seconds. Those 5 seconds multiplied by the number of times I have to use these apps make me really, really sick of the Nintendo loading screen and it gives the impression that the app is loading really slow.

3. No multi-tasking (even similar apps)

Just try playing with your Mii and then editing it when you win a hat and you want to color-coordinate your avatar’s color. JUST TRY IT.

I don’t even understand why they put the app on suspension (“Suspended Software”) when you have to close it to do much of anything else.

4. Swapnote: Sending notes made complicated.

I’m pretty sure I’m not super stupid, but it took me a lot of chatting with my friends who had a DS to finally understand how to actually send notes.

  • first I save it 
  • the note I just saved and that I want to send gets listed along with ALL the other notes that I have received/sent/saved
  • then you get asked if you want to send it, but only if you’ve activated your Spot Pass or Street Pass because otherwise, it doesn’t tell you anything. I was so confused because initially I was only able to ‘save’ my notes.
  • and apparently sending via the internet is called sending via “Spot Pass” (naming consistency!) 
  • once you press ‘reply’ to a note, the ‘reply’ button (for that specific note) seems to be gone forever. 
  • I think there is a way to add more pages to a note, but I haven’t figured it out yet.

5. You can only save 3 different internet connections.

6. Those internet connections are different from the “Nintendo Wifi Connection” which is limited to WEP-security connections or no security at all. 

when I changed our wifi at home fro WPA2 to WEP, it seemed to slow down the net considerably so I had to settle to removing our wifi password just so I can connect to the Nintendo wifi. Because I paid so much for this shit I want to play it for what it’s worth.

7. The e-shop is more limited than I’ve expected.

I don’t have a credit card with a US account, and the regions where credit cards work are also limited. My other option is to buy a prepaid card from Data Blitz, which is obviously overpriced. But I really want to get the Pokemon Dream game thing.

At least with the Apple Store I can buy a considerable amount of games and apps with my local credit card.

8. There is a browser but forget about browsing the internet on the DS. 

9. I actually don’t know if I can take in-game screenshots with the device because I really want to. 

10. There is nearly an inch of black space between the two screens.

When you’re browsing, the page is cut awkwardly. When the game tries to make use of both screens, it is again cut awkwardly.

The 3DS definitely sucks in its user experience. At a time when iOS and Android are smoother, faster, and both platforms being used for gaming (with great graphics, I must say), I think Nintendo needs to up their game. Android was able to price itself within a budget, much like Nintendo, but the experiences on the devices are so different (with Nintendo pretty much lacking a lot of things).

Although I know that I got it for the games and not for the graphics/UX so I’m keeping it and investing some hard-earned pesos for a small DS/3DS game collection, I just wish that their next DS device offers better UX. I don’t know how fast they could improve on these things though because they’ve really fallen behind.

Now I will just settle with the gameplay their titles offer. :P