user experience

Test Again: Testing Listo Out with Michael

Posted on October 5, 2015 by Patrick Wee

With all the preparation in place, and with the first iteration behind us, I’m now more ready than ever for testing Listo again, but now with Michael!

I got a lot of cool insights, and I think that overall I have been able to accomplish most of Michael’s needs and wants for the app. He mentioned that he really liked a lot of the features of the apps, and that the features of the app were relevant to him.

One thing that I thought was a point for improvement though, was a siesta in the Power Naps section. I guess, while for me, a siesta is a very common word, this might not be as common as I thought it would be. It sounds as if I should explain what a siesta is, or if not, just rename the 3 hour power nap!

But overall, it went well! Michael concludes: “feels like everything I need for an alarm clock app!” That makes me happy and makes me feel, “I did a good job! Yay!”

Say hi to Listo!

Posted on October 5, 2015 by Patrick Wee

Listo: Ready for Anything–that’s what this alarm clock app is gonna be called!

So for the last few weeks, I’ve been brainstorming, preparing user experience questions, conducting user experience interviews on this ‘alarm clock’ app. Now, it has a name! Say hi to Listo: Ready for Anything!

Listo is a Spanish word meaning ready. Given that this app is going to be made mostly for an energetic college student persona in mind, I wanted the app to have a name that reverberated this upbeat and ready attitude–hence Listo!

Say hi to the new kid on the block–Listo!

Build Again: Prototyping with Marvel

Posted on October 3, 2015 by Patrick Wee

In the first iteration of Listo, I used Pop Apps to prototype on paper and create interactions between my wireframes. While Pop Apps was cooperative on the first iteration, it wasn’t on the second. Hence, I had to look for a new app to work with.

Luckily, I found Marvel.

Marvel is just so fun and easy to use. It’s UX is also way better than PopApps, and the syncing feature that it has across all my three devices just always makes my day. If there’s a interactive wire framing tool you need to check out, it’s Marvel!

And you can see how awesome it is with the interactive wireframes I was able to produce with it!

Marvel welcome screen!

Marvel’s minimalistic design is clean and friendly! Don’t you just wanna hit that hamburger button (even if Dom hates it)?

Projects page!

Now that I’m in my project, I can see all the wireframes lined up nicely. To be able to come up with this, I had to take pictures of each of the wireframes, and size them appropriately!

My wireframes all lined up nice!

Interactions are created in a similar way as in Pop Apps. You click the green rectangle button on the top right hand, select an area on the current wireframe and link to another wireframe! Easy!

Similar to POP Apps, the green box helps me set the tappable area.

Many buttons like PopApps is also very possible!

Yes, there can be a lot of green boxes again!

Yea, I just had to include this. Everyone loves the power naps section!

Here’s the most awesome page ready for interactions!

Nah, it wasn’t just because everyone loved it, but also because I wanted to show you guys how it would all look, and lo and behold, marvel at the wireframe! [Get the joke?]

This is how the page looks on presentation mode!

Here’s another wireframe in presentation mode. This time, it’s for settings.

Looks cool, yes?

With that, the interactions have been put into place. The links are ready. The wireframes are in place. Now, it’s time to test this app once again!

User Experience Interview: Key Fleshed Out Insights

Posted on October 1, 2015 by Patrick Wee

UX is an interactive process. So, after going through the user experience interview a couple of times, I decided to come up with a clear fleshed-out version of the key insights. This included everything relevant to the topic: from specific things that were needed, to what wasn’t needed, to what I should watch out for.

Below you will find some of these key insights. I’ve added a few of my own comments on each of these different key insight groups. Check them out below!

UX Interview Key Insights on Switches, Rings and Usage

So, in this first part, I should admit: I never thought that alarms could actually come up in dreams! I found that actually very interesting. Apart from that, I thought the idea of integrations was cool, as well as the idea of easily being able to set multiple alarms–much like a safety net.

UX Interview Key Insights on Power Naps, Cooking and Design

In this second part, it’s interesting how apart from power naps and waking up in the morning, the timer was also used for cooking. What’s cool though is that the current timer already successfully responds to that need! In terms of Power Naps, I’m actually realized that I, myself, have trouble setting them. It’s annoying how I have to calculate 30 minutes from the current time. Good catch!

UX Interview Key Insights on Sleep Quality, Sounds and Nighttime Activities

In this section, I realized that being able to incorporate sleep quality into the app would be really cool. There’s a lot of medical technology apps these days, but none that really emphasize on using alarm clocks to easily wake up with the right amount of sleep.

UX Interview Key Insights on Sharing, Battery and Level of Stress

In this last section, what I found interesting is that sharing is not a big thing for alarms, unlike other things. We have Venmo, where you share your transactions, Twitter, where you share everything, but alarms aren’t that share-able I guess! But imagine if you were in a hotel, and the hotel knew what time you woke up? They’d be able to serve your breakfast in bed promptly, and deliver fresh food! (Well, maybe for now, this share-able alarm clock thing has too few use cases!)

It’s interesting how after really looking into this user experience interview, I am now able to come up with these user experience design insights for the app. The next step for me would be to condense these even further, and solve the problems creating features for the app. From then on, it will be the fun design part! Yay!

Charm: The Pebble Watch Pick-up Line App

Posted on September 27, 2015 by Patrick Wee

Ever had that moment when you just needed a pick-up line? Or just wanted a quick laugh? Well, no need to fear, because Charm: The Pebble WatchPick-up Line App is here! No need to bring out your phone! With just a few button presses, you’re off to shooting the best pick-up lines!

What a great introduction, right? Anyway, for the Hack The North Hackathon held at the University of Waterloo in Ontario, Canada, my friend, Joshua Chan and I built this cool app. We wanted to keep the experience as simple and stress-free as possible, so we did all that we can to make it clean and easy to use! After entering the app, one click is all it takes to navigate through all of the pick-up lines! It’s that easy!

In terms of the software development, we used a python back-end and a pebble.js front-end. If you wanna check out some of the code we used, you can drop by the github repo here! Just as a teaser, here are a few of the cool pick-up lines we have on the app!

“Are you a dictionary? Because you give meaning to my life.”
“You must be a banana because I find you a peeling!”
“Are you good in algebra? Can you substitute my ‘x’?”
“Top view, side view, bottom view, whatever view, I love view.”
“Life without you would be like a broken pencil… pointless.”

Find it cool? Wanna try it out! Check it out now on the Pebble App Store! Oh yea, it’s free too!

Designing for Wearables: 5 Key Takeaways from Wunderlist’s Chief of Design

Posted on September 23, 2015 by Patrick Wee

Wearables of Today. Image from MedCityOnline.

Wearables are everywhere. A lot of people have taken interest in just how exactly we can effectively use wearables in our daily lives. There’s also been a lot of experimentation with how best to assimilate the smartwatch into our daily lives. In fact, I, myself, just this weekend in HackTheNorth, built an app for a wearable, the Pebble Smartwatch, called Charm. So, it’s undeniable that wearables deserve our attention.

Given this, there’s always been this one perennial question I had about wearables: “How do we design properly for wearables?” Given that wearables have quite a few limitations, such as very small screen real estate, very limited input capabilities and dependence on an internet-connected device, how do we go about designing wearables?

To get better idea, I decided to attend tech@nyu’s Design Days series where this time, they invited Benedikt Lehnert, Chief of Design at Wunderlist, recently acquired by Microsoft. Here were the 5 key takeaways I got from the very informative talk.

Create Experiences

To create a great product, three key ingredients are needed: a clear proposition, character and personality, and consistency.

To have a clear proposition means that the value you add to the world is known. Questions such as: “What can this product do that others can’t?” should be in every product manager’s mind. Benedikt gives an example: when Wunderlist started, there were over 400 to-do apps in the market. So, what was their clear proposition? It was that productivity can be fun, free, and cross-platform. That was what separated them from the others, and has led to their success.

In terms of character and personality, a product must embody a certain aura. Looks may change, but personality and proposition should never change.

The final ingredient, consistency, involves synchronizing large aspects of the user experience so that the user sees a complete whole. For example, this can be achieved by a simultaneous rolling out of important features. This way, it will be much easier for the user to understand that it is just one product that he/she is interacting with.

These three chunks: a clear proposition, character and personality, and consistency, serve as a foundation from where designing for wearables can begin.

Streamline Design

What’s interesting about Wunderlist’s design process is that they don’t have style guides. Their reasoning makes sense: “Style guides don’t work because they don’t iterate as fast.” To keep up with the visual consistency needed though, Wunderlist adopts a shared conventions type of design process, where the decisions are mostly made by the “smart people Wunderlist hires.” In particular, this process involves prioritizing from the use case (Does it work for this case?), to the form factor(Does it work well with most of the use cases?), down to the platform(Does it fit with the designs of the platform?). With this, Wunderlist is still able to streamline its design process while giving enough leeway for people to make decisions.

The Nature of Wearables

While mobile phones are gadgets we can interact with for long periods of time, wearables such as a smartwatch just don’t have the same kind of attention span grabbing capability. Most of the time, developers and designers only get a few minutes of someone’s attention with a smartwatch. In fact, most of what we know today about design is broken with a device that has very limited inputs. This must be taken into account when designing for wearables.

Show me what you wear, and I’ll tell you who you are.

One other striking problem of wearables is that they don’t look good. On top of that, a lot of the wearables is not yet socially acceptable. For example, it might be quite normal for you to check your phone while someone is presenting, but if you look at your watch, it may send the wrong signals. It will take time for wearables to just be really acceptable to the market beyond the tech-savvy community.

Do One Thing Great

In response to all this, if there’s one thing we can to maximize wearables is to do one thing great. The best example of this is Uber, where on a smartwatch, with a click of a button, you can order an Uber ride. While it’s true that there may be some logistics issues, such as what if you wouldn’t want to be picked up in the current place you’re in, but for the most part, it works, and when it does work, it works great. Another two things to think about is the idea of taking advantage of the context of a location and use this location to the benefit of the user. For example, Wunderlist is building a capability where someone’s grocery list will pop up if that someone comes close to a grocery. It’s these kinds of interactions that are hyper-relevant to the context that makes wearables awesome.

So those were the five main takeaways I had from the Designing for Wearables talk I attended. So in summary, to create a great product for wearables, you need to create experiences, streamline the design, understand the nature of wearables, acknowledge that wearables still have a long place to go, and do one thing great on the wearable, but make sure that it’s the greatest thing ever. Tim Cook mentions that wearables are a ‘profound opportunity.’ I’m excited to find out how we can maximize and opportunity, and where we’ll ultimately end up!

Facebook Dislike Button: Some Concerns

Posted on September 16, 2015 by Patrick Wee

Facebook announces ‘dislike button’; Image from Mashable

A few hours ago, Facebook just announced that it’s building, and will soon be shipping a ‘dislike button’. While everyone agrees that there are moments in our lives that require empathy, and not necessarily a ‘like’, I feel that Facebook’s decision to include this feature in their application opens a Pandora’s box on many other things: a less constructive community, a chance for cyber-bullying and just a worse-off user experience.

Let’s get some background info. Mark Zuckerbeg was at a town hall yesterday when a reporter asked about whether Facebook was going to build a ‘dislike button.’ To which, Zuckerberg answers: “People have asked about the ‘dislike button’ for many years. Today is the day that I actually get to say that we are working on it.” So with that, we can expect some sort of a dislike button very soon.

As I mentioned before, I have quite a few reservations about Facebook making a ‘dislike button,’ and chief among those is expressed by Mark Zuckerberg himself just a few years back: “Some people have asked for a dislike button because they want to be able to say ‘that thing isn’t good, and w’re not going to do that. I don’t think that’socially very valuable, or great for the community.” And I agree one hundred percent.

This leads me to my first point: Facebook, for me, has always been a constructive community. When I am said, I’d post a short status message, and people will usually comfort me with a short comment. When I have problems, I sometimes would post them on Facebook, and people would suggest possible solutions. Now, imagine the Facebook dislike button present. For many, I would fear that clicking the ‘dislike’ button would be enough to show empathy, and with this, the dynamics of a pseudo-real life interaction, which Facebook tries to replicate, is diminished.

What I mean is, in real life, if you were sad, your friend wouldn’t just say ‘dislike,’ but would comfort you, and encourage you. Having a dislike button removes this interaction which I feel is really needed much more when someone is sad, than when someone is happy. With this move, Facebook removes this constructive community that helps you get out of these situation.

Second, let’s look at the demographics of Facebook users. A good number of Facebook users are young, very young for that matter. With this new dislike button, there’s quite a possibility that this feature could be used for cyber-bullying. While it’s true that the children of todday might be different from my generation, it wouldn’t be shocking for me if I saw cyber-bullying done on social media. A fear I have is that this ‘dislike button’ would just excacerbate the already existing cyber-bullying problem that is a lot harder to monitor on the web.

Finally, I believe that adding a dislike button simply diminishes the user experience of using Facebook. When I log into Faceook, I want to know what’s happening to other people’s lives. I want to be excited about what I’m going to post. I don’t want to be afraid of how many dislikes I am going to get with a certain post. This strikes at the heart of I think the biggest problem that Facebook has to solve: this tool would serve as a channel to divide people instead of connect them. Facebook has to find a way to mitigate these issues, or else it suffers the possibility of breaking down the dyanmics that took it so long to build.

Know that these issues I am bringing up might be quite premature, as we still have yet to know the exact implementation of this dislike button. For all we know, it might find some way to mitigate these concerns, mainting the vibrancy of the Facebook community. But if were just to implement a dislike button next to the like button, then Facebook might need to be a little it more careful.

Good Design, Bad Design

Posted on September 13, 2015 by Patrick Wee

“You know a good design when you see it.” I’ve heard this many times from different people, and I cannot but agree. Great design is what happens when you just enjoy using a product, when you don’t feel frustrated, when you feel that you’re the best person in the world. That’s when you know there’s good design involved.

But we have to be careful here. Design has been so solely focused on art works that sometimes good design is almost synonymous with being able to use Illustrator or Photoshop like a pro. However, nowadays, the definition of design does not merely include artworks, but also includes other things, like products, services, branding, among others.

So with this in mind, here’s my list of 5 Examples of Good Design, and along with that, 5 Examples of Bad Design. To make it fair and interesting, I have selected one example of good design and one example of bad design from the same general category. So for example, I have chosen to compare two websites.

Websites

Bad Design

NYU New York Student Portal

The NYU Home webpage is just not very nicely designed for a couple of reasons. When first welcomed into the home page, I get a mixed hodgepodge of Lists, Help, FAQs, ITS, World Trade Resource and Global Services resources. Already, I am confused as to what this website it up to. Now, when I try to navigate the website, I hover over the general categories, hoping for something to tell me what’s in each of the navigational tabs. And yet, I get nothing. And just to make things worse, there’s isn’t even a search functionality built into the platform. It is just frustrating to use.

Good Design

NYU Abu Dhabi Student Portal

The NYU Abu Dhabi Student Portal page is very nicely designed. Things are where they are supposed to be. Things most important–such as announcements–are clearly placed in a central real estate in the web page. Events are also easily accessible (not like the NYU New York website where I have to first go to News [Who would have thought Events is under News]), and a bookmarks menu available. When I hover over each of the navigational tabs, I also get to see all the possible options, so I don’t need to click all three to figure out where everything is. If I can’t find anything, search is just a click away.

Packaging

Bad Design

Triangular M&M Packaging

As a kid, I’ve always found it difficult to eat these M&Ms in this kind of packaging. There were many times I spilled all of my M&Ms on the ground because the bag of M&Ms just tilted over. I also was always confused where it was best to open the bag. Was it like opening a bag of chips where I had to pull from side to side? Or should I just tear it? But if I tear it, my fingers won’t fit through the hole to get my M&Ms! This is self-explanatory.

Good Design

Smints

Smints are just the coolest thing on Earth. When you first figure out how to use it, you are just amazed by how such a cool release of mints could just be made by some simple thing. In fact, when I first had it, it was almost second nature for to try to press the white portion down. the fact that it was a triangle, it was white, and it was springy, already alerted me to how the candy was to come out! It also allowed for the mints to be stored without being contaminated. And plus, it also controls my intake! This amalgamation of being easy to use, and easy to discover how to use, along with its ability to store the mints nicely makes it great design.

Signs

Bad Design

Signs Lost in Translation

How much does it take to ask an English speaker to check your translations? While it is quite amusing at first, signs are meant to guide people to the proper aisles or sections of supermarkets, and a sign like this, especially if you don’t speak Mandarin, won’t help!

Good Design

New York Subway Signs

New York’s subway signs are amazing. They feature a clean font that is easily read on a great black and white contrast. The color-coding of the different lines also makes it easy for passengers to figure out and remember where they are headed to, and similar lines that they might take. It’s also very uniform, so it makes it very easily recognizable even from a distance. As a result, it’s really good design, and also with really good typography.

Good Design

Anar Foundation Anti-Abuse Message

This really innovative ad was designed really well because it was able accomplish it’s goal of reaching out to separate audiences at the same time through two different viewing angles. In this case, one was for the parent, and the other for the child, with a help number in tow. Here’s a cool video explaining how it’s done. It’s great design because it was able to accomplish its goal of segmenting discoverability to its different audiences. Amazing!

Bad Design

WWF Ad

I don’t think I can even explain what’s happening in this ad. Not only is the explanation impossible to understand, the font is also incredibly hard to read from a distance.

Campaigns

Bad Design

Metro Funeral Services Ad

Well, let’s just say you shouldn’t.

Good Design

Dumb Ways to Die

Dumb Ways to Die is an app created by the Australian Metro Agency that involves an mobile apps, theme songs, posters, etc, to encourage people to be safe around trains. They use cartoon characters and games to get people to understand the importance of being careful around trains. This is great design because when I first heard of the game, I didn’t even necessarily know that it had a hidden message. But see, when I did, I remember the message very well. Plus, it comes with a super catchy theme song!

So here’s my list of 5 examples of good design and 5 examples of bad design! Of course, these are just merely a sample. There are still tons of other examples out there to draw inspiration from or to run away from!

Create Experiences

Streamline Design

The Nature of Wearables

Show me what you wear, and I’ll tell you who you are.

Do One Thing Great

Websites

Bad Design

NYU New York Student Portal

Good Design

NYU Abu Dhabi Student Portal

Packaging

Bad Design

Triangular M&M Packaging

Good Design

Smints

Signs

Bad Design

Signs Lost in Translation

Good Design

New York Subway Signs

Ads

Good Design

Anar Foundation Anti-Abuse Message

Bad Design

WWF Ad

Campaigns

Bad Design

Metro Funeral Services Ad

Good Design

Dumb Ways to Die