Merry Doomsday: Free YC Facelift PSD Bundle!

After every YC Facelift I’ve done, I’ve received a few emails from people asking me if I could send them the PSD file so that they could learn themselves how to start down the path of design. I was always a bit reluctant to oblige, in the hopes that someone would come along and want to actually pay me for them.

Thankfully, over the months, these facelifts have presented me with more than a few opportunities. And so today while I was looking back at the work I did when I first started dabbling in design, appreciating how far I’ve personally come, I realized I never really did much to give back, both to the design community at large and to people looking for help. So I’m putting up all of my YC Facelifts free to download, both the ones I’m proud of and the ones I’m not terribly pleased with - EXEC, Flutter, Pebble, DrChrono, and Instacart.

Get them here.

Use them, modify them, tear them down, slice them apart, or do whatever else you want - they’re all yours!

You can follow me on Twitter here.

UX Idea: Real Turn-by-Turn Navigation

The new Google Maps app was finally released, and I’m loving it so far, but it’s missing a feature I’ve been hoping to see map apps implement for some time. I have this problem where as soon as I pull up directions on my phone, whether right after entering my destination or getting out of the subway station, I get into this confused spinning dance. What I’m trying to do is find out which direction I should be heading in. I twist the phone, I turn my body, all in the hopes that my little blue-dotted self will finally turn inline with the path I’ve been told to take.

Navigating through a city like NYC requires a bit more than the turn-at-this-street style of directions we’ve grown so accustomed to. When you’re on foot just stepping off the bus at a crowded intersection, being told to turn left on Broadway isn’t all that easy. It’s hard to orient yourself, at least for me, and that’s when the dance begins (let’s not get into the figure-8 rave that Apple sometimes asks me to do to recalibrate the compass).

So here’s my solution:

When you’re ever confused about which way to head in, you simply tap that spinning person button, and you’ll quickly be told what to do, regardless of whether you even know where you are. Similar to the panorama feature on the Camera app, turning will trigger a progressive filling of the box. Here, however, the filling rate is not only determined by how fast you turn, but also by how far you need to turn. Once you’re set on the correct path, you’re told to take off and the box fades out until the next time you’re lost. 

For dancing tips, you should follow me on Twitter here.

Disrupting Medicine: Check

A year into medical school I cracked open The Checklist Manifesto by Atul Gawande. The book recounts the author’s involvement in the development of the WHO Surgery Safety Checklist and his exploration of checklist implementations throughout various fields. What he found was that medical checklists are remarkably effective, in one study reducing the ten-day line-infection rate from 11% to zero. The underlying question throughout the book is “If people like architects and pilots use checklists to both avoid and minimize errors, then why in the hell aren’t physicians and nurses doing the same?” 

And that got me thinking. What if every hospital procedure had an accompanying checklist, from all types of surgeries to administrative operations? Imagine if we optimized every single facet of medical care, from patient admission to discharge, and all intermediary processes, top to bottom.

What I envision is a platform by which a designated individual can develop and deploy a checklist to every staff member in a given hospital. With a few taps, a physician, nurse, or administrator, can create a checklist to help outline the steps to any procedure. A list of complications could be included in which every entry would lead to a subsequent checklist that would help an individual navigate through that particular complication. Linking patient records with checklists would allow for the measurement of checklist efficacy by examining post-procedural infection and mortality rates. Based on this data as well as average time of completion and degrees of compliance, further revisions may be implemented.

But optimizing every procedure is a task far too difficult for any one hospital to take on. And so this platform would require participation by hospitals across the nation (or world). Procedural changes would be delegated to groups of hospitals that would focus solely on perfecting their assigned task. Every hospital would be given the ability to view and implement any checklist being used on the platform at any time. This way, hospitals could test checklists and others would be able to adopt the ones that perform the best. This network of niche optimization groups using version controlled A/B-type tests would greatly decrease the opportunity cost any one hospital would face in deciding whether to systemize their operations because a) everyone’s doing it, b) the changes being asked of them are bearable, c) the majority of the work is being done by the rest of the network and not by them, and, most importantly, d) the prospect of saving lives, time and money are powerful incentives.

Systemization is the only way we’ll ever achieve a healthcare system with near-perfect efficiency and safety. It’s a challenge that’ll take Herculean effort, but a girl can dream.

You can follow me on Twitter here.

Why I’m No Metrosexual

Look at your keyboard. What is it about the keys that make you know they’re clickable? Are they a different color than the rest of the board? Sometimes they are, but a lot of the times they aren’t. Now look at the nearest door. How do you know that its handle is the part you’re supposed to interact with? Is there only one differentiating characteristic that tells you to grab the handle and not the door, or more? Now look at a picture or poster hanging on the wall. There’s nothing that tells you to interact with it beyond just staring, is there? Why is that?

Over hundreds of thousands of years of evolution, the human eye has developed visual sensory receptors to help us navigate and interact with the world around us, the two main categories being cones and rods, counting at 6 million and 120 million, respectively. Cones provide the eye’s color sensitivity. They are less sensitive to light, but are responsible for all high resolution vision. The rods, more numerous and much more sensitive than the cones, are the cells we employ in low-light conditions, so sensitive that they can be triggered by single photons. They’re responsible for dark-adapting vision. All in all, there are roughly 126 million receptors in our eyes dedicated solely to differentiating the most minute of wavelength variations. What’s my point?

Mostly everything humans do in the world is dictated by our vision. Whether it’s grab, click, pull, push, swing, slide, etc, it’s usually our eyes that detect whether a given object is to be interacted with. But what do our eyes pick up on? It’s not just color, because many of us have been in all-white laboratories and have been more than capable of identifying the tables, walls, and doors. It’s because our eyes know we’re in a 3D world. We can detect light sources, and degrees of shading, and depth. And without any of these, we’d be absolutely lost.

And that’s how I feel when I use UI’s channelling the spirit of Metro. The Metro aesthetic is one based on completely stripping interfaces of all visual cues that our eyes have evolved to utilize in helping us to interact with our surroundings. These cues are called affordances and they’re traits and qualities of a given object that help us identify what it is we can do with it. Take one look at the Metro UI and you’ll notice the uncomfortable lack of shadows, highlights, and all-around spatial awareness. Can you immediately tell what you can and cannot interact with? Can I click on all those tiles? Are they all apps? Is that just a pinned photo, or an application? And to add to the confusion, why are there different sized tiles? There’s no surprise why you end up feeling as if you’re staring at a screen full of advertisements with the Metro look – we’ve come to expect billboards/photos/posters/ads to be nothing more than 2D objects that offer little cues for interaction beyond acknowledging their existence and the information they contain. I commend Microsoft for experimenting, but this is one path I just don’t understand going down, especially for a much anticipated, engine-restarting product.

If we have all the built-in tools to help us easily function in our surroundings, then it only makes sense for designers to utilize and exploit these tools when building their interfaces. And I’m not talking about making sure we include leather-textured navigation bars in our apps, but rather that we treat whatever concepts we’ve applied to our designs the same way we would perceive their real-world counterparts. I’m of the opinion that there should be a seamless transition between our analog and digital worlds. A clickable, tappable item should carry the same visual cues whether molded out of plastic or pixels. A button can be clicked because we know it can be clicked, and we know it can be clicked because we’re spatially aware of it, and we’re spatially aware of it because of the millions of receptors in our eyes, and we’ve got millions of receptors in our eyes because they work extraordinarily well in facilitating our every movement.

We’re already at a disadvantage using interfaces on flat touch-screens that effectively neglect our touch receptors, so what reason is there to blunt the very perceptive ability that guides most of our interactive decisions? We’ve been interacting with our environment for ages. Our visual ability works. It’s fine-tuned and of an incredibly high resolution, and optimized for human function. It only makes sense that good digital design play to that ability.

Follow me on twitter here.

YC Facelift: Instacart

Moving to NYC these last few months has been really hectic. Life here in general is hectic. From chasing the morning bus to weaving through sidewalk traffic, to running between hospital departments, I never really fully understood what it meant to live a busy life until I moved out here. Time and energy have become so scarce that basic life tasks, like visiting the laundromat, are almost seen as inconveniences! Grocery shopping is one of those tasks, made particularly difficult by not having a car or a market within walking distance. So anything to help make that easier is more than welcome, which is why I decided to facelift this next YC company: Instacart.

Instacart is trying to be the Amazon Prime of groceries. A few taps of the screen and in an hour your groceries are waiting for you at the door! That’s it. Although they’re only in SF right now, I’m hoping they’ll soon expand their service to NYC. Services like Seamless.com have become essential to me, and I’m sure that Instacart would be infinitely more so.

Because they’re mainly a mobile-focused company, I decided to facelift their iPhone app:

I went with a layout that more mirrored that of a conventional supermarket. Every category selected in the title bar would be an aisle populated with its various subsections of grocery products. Speaking of the title bar, I’ve recently felt that many iOS apps waste a lot of valuable space by having the name of the app take up about 75% of the space of the main navigation bar – space that could be better utilized. So I threw the name out and replaced it with a drop down menu and search button. People would then be able to browse Instacart by either category or individual search. I think the information hierarchy is more clearly laid out here than in their current design. I also wanted to make this the App Store of groceries, which is why this design is obviously more visual and streamlined. You never leave the main content area here when shopping. Browsing products, viewing descriptions, and adding items to your cart are all done on the same screen. Overall, I think I achieved a more visual, fresh, organized, and intuitive design.

Instacart folks, feel free to reach me at kyro@kyrobeshay.com.

You can follow me on twitter here.

Hacking Behavior: The Behavior Potential

Rapidly growing a user base is as important as ever. Now that ten million users is the new one million, focus has been shifted to developing intuitive ways to reach a wider audience through today’s hottest platforms. It’s called Growth Hacking and is essentially marketing through the eyes of an engineer. And while it’s a great development, it only helps you get people to look at your product, not use it. So how do you turn a person into a user?

Think for a second about what you’re asking someone to do by getting them to use your product. You want them to take time out of their day to change the way they carry out a specific task. In other words: you’re trying to change their behavior. It’s obvious then that learning the mechanics of behavioral change is vital to engaging and retaining people as users. Let’s call it Behavior Hacking; so while Growth Hacking is a great way to systematically draw eyeballs, Behavior Hacking is how to get those eyeballs to stick and stay.

One of the most popular theories on the phases of behavior change is known as the Transtheoretical Model. It outlines five phases that lead to an alteration in one’s behavior: precontemplation, contemplation, preparation, action, and maintenance. Here is a quick overview of each phase:

1. Precontemplation: Individual is unaware that their behavior is a problem.
2. Contemplation: Individual is aware that their behavior is an issue and is ambivalent as to whether action should be taken.
3. Preparation: Individual plans to take action in the near future – a “window of opportunity” has opened.
4. Action: Individual has made specific overt modifications to their lifestyle.
5. Maintenance & Relapse Prevention: Individual take steps to avoid factors that increase the risk of relapse.

I saw strong parallels between these stages and those of an action potential in that both models contain phases of varying gradations and thresholds, and that repeated cycling through each set of steps results in sustained change. I then rearranged and regrouped the 5 stages listed to more closely resemble an action potential spike:

Introduction: The Mechanics

The Behavior Potential illustrates the common cycle of awareness, motivation, action and frustration we often experience when trying to change our ways, with each spike representing a single attempt. The goal is to manipulate the phases of the Behavior Potential so that:

1. The incidence of Phase 1 is increased.
2. The duration of Phase 2 is increased.

Phase 0: Precontemplation – Get Views

During this phase, no one has seen your product, and so the goal is to get it in front of people, which is where Growth Hacking comes into play.

Phase 1: Contemplation & Preparation – Present The Problem & Solution

So you’ve finally found someone to look at your product. Now your goal is to convince them they have a horrific problem and that you have a remarkable solution. This is something I see less and less. Startups will often litter their landing pages with all the great features they’ve developed, which gains them absolutely nothing if they’ve not yet convinced the viewer there’s actually something in their life that could be improved. To do this, there are 4 basic principles:

1. Describe the problem in your viewer’s terms.
2. Walk through examples of life with and without the problem.
3. Outline a plan of attack.
4. Socially validate the legitimacy of the problem with user feedback.

Individuals in these stages are often ambivalent as to whether they should actually put forth effort into changing. Individuals in this stage go back and forth between reasons for concern, and justification for lack of it, with awareness of the pros for changing and an acute awareness of the cons. Show them that the benefits of switching outweigh the costs.

Phase 2: Action & Maintenance – Reward, Reward, Reward

You’ve convinced someone to start using your product, and now you want to ensure that they’ll keep using it. The way we lengthen Phase 2, or sustain a behavioral change, is by simultaneously reinforcing the behavior while recognizing the situations which create an increased risk of relapse.

Reinforcement strengthens behavior – a core component of operant conditioning. There are two types of reinforcement: positive and negative. Positive reinforcement is the introduction of a positive stimulus, while negative reinforcement is the removal of a negative stimulus. An example of positive reinforcement is a mother laughing at her child’s joke, positively reinforcing that particular behavior, and likely resulting in her hearing that joke a lot more often. And as for negative reinforcement, think of a teenager who gets straight A’s to avoid being disciplined by his parents. Most of the decisions we make on a daily basis are due to some form of reinforcement and operant conditioning. We make it to work on time to avoid the ridicule of our managers. We work to make money. We exercise to avoid putting pounds on. You get the point. Reinforcers are incredibly powerful influencers of behavior: so powerful they shape the way we live. It only makes sense that you incorporate them into your product.

Aside from positive and negative, reinforcers can also be broken down into two categories: short-term and long-term. Our brains are wired to better remember short-term rewards. Alcoholics who drink to loosen up and become more social remember the immediate, short-term effects of drinking – loosening up – more than they do the possibly harmful long-term effects. It’s what drives many of our addictive behaviors. The key is to implement reinforcement mechanisms that reward individuals for what would otherwise be considered small, trivial achievements, effectively giving them recurrent boosts of encouragement; then solidifying meaningful progression using long-term rewards.

Make your product addicting while reminding the user of how successful they’ve been using it. It doesn’t matter what industry your product is in; you can always find ways to reinforce your users.

Phase 3: Relapse – Your Rewards Aren’t Rewarding

Relapse prevention involves recognizing the factors that may lead to one reverting back to their old habits, so if you find your users becoming disengaged, then there is likely a flaw in your reinforcement mechanism. The user finds it easier to not use your product. You may have convinced them that your solution is better in theory, but in practice it isn’t. To prevent relapse, constantly measure user engagement and adjust your reinforcers accordingly.

Work towards bridging the gap between what you’re selling and what your users are experiencing.

And there you have it.

—-

I think now more than ever startups should draw lessons from the behavioral sciences when developing their products and services; A/B tests won’t cut it for much longer. People are becoming more social, our networks are becoming more complex, and we’re interacting in new ways on an almost daily basis. And the only way to make sense of it all is if you learn how to hack behavior. In no time, it’ll be a requirement. I’m sure of it.

You can discuss this post on HN here.

Follow me on twitter here: @kyro  or reach me at: kyro@kyrobeshay.com

Being Social Is About Being Private

Social networks and services have definitely given us new and seamless ways to communicate with people from across the globe, pushing the boundaries of what in our lives is deemed acceptable to share, but a wall has been hit and the efforts to tear it down have left me uncomfortable. I’m specifically talking about this new move to broadcast what pages and messages we’ve viewed, without our consent. Services like BBM have long been guilty of this, but the idea has seen increased adoption recently with services like FB Messenger and Apple’s iMessage. In fact, this whole push for “passive sharing” has been gaining momentum, with Quora as the latest transgressor.

Top: Apple’s iMessage / Bottom: Facebook Messenger

We’re now forced into an obligation to respond to a person’s message, almost immediately. With email and texting, there exists a wall of privacy and discretion where the person on the receiving end is given full power to read, ignore, or respond without being bound by deadlines or expectations. I may not want to read or reply to a message for a myriad of reasons – I need time to think of a proper response, I’m waiting on other plans to get sorted, or the sender is just someone who really annoys me. My question is: Is this sort of stuff increasing the value of our social interactions? I don’t think so. In fact, I’d argue that it’s making our interactions less enjoyable. Many friends have mentioned how others knowing when they’ve read a message has made for many awkward situations; and I wholeheartedly agree.

A lot of services seem to subscribe to the belief that the value of a person’s interactions is directly proportional to the degree of transparency with which they share their lives. But much of the value in our dealings with others is found in the privacy of the many decisions we make. This privacy is as essential a component in successfully participating in society as openness and honesty; and if services don’t start understanding that, people will eventually push back.

You can follow me on Twitter here: @kyro

YC Facelift: DrChrono

Healthcare needs to be disrupted, and this next YC company is trying to do just that. Although the look of their website isn’t severely lacking, I decided to give it a go because I really love what they’re doing: bringing meaningful value and innovation to an industry that desperately needs it. It’s also one of about 2 or 3 medical startups that YC has funded thus far.

Next up is DrChrono. They’ve developed a really comprehensive EHR (Electronic Health Record) platform that runs on iOS devices. They’re trying to bring every facet of medical practice, from patient history to billing, into the digital age. It’s about time. I’ve played around with their iPad app and have shown it to a few friends who are physicians and we all agreed that the app is stacked with features that physicians would love to utilize in their practices.

The existing site is too dark, and, as a friend put it, “doesn’t make you feel confident in their claims of what their app does.” So I tried to brighten the page up, giving it a very light and friendly feeling; and I think I accomplished that. I brought the ‘MU Certification’ badge front and center because I’ve been told that potential health incentives factor heavily in a practice’s or hospital’s decision to adopt a new platform. I opted for sliders (which would rotate periodically) for the main content because I wanted to give the product a very active feel, with features and testimonials flying by, while keeping the sign up buttons big, bright, and anchored. Overall, I think I achieved a rather welcoming design that appropriately conveys the product’s main value offering, its features, incentives and social validation.

DrChrono guys, you can reach me at kyro@kyrobeshay.com.

You can follow me on Twitter here.

YC Facelift: Pebble

I’m a really big fan of the personal biosensor movement. Being in medical school, I’m always thinking about the potential benefits of unlocking all sorts of health data, and although this next product doesn’t directly tackle these issues, I think it can be a really big leap in making that type of data readily available to us at all times.

The YC company I chose for this next Facelift produces Pebble. They’ve been ridiculously successful with raising money for their project on Kickstarter. Pebble basically is a personal assistant on your wrist. Playing your music, checking your email, etc, can all be done from no more than an arm’s length away. Developers will be able to create applications for Pebble taking it to new levels of use and functionality. I’m excited to see what will come of it.

Unlike the two previous Facelifts, this week’s product is something tangible and so I let it speak for itself. I took inspiration from both the Nest and Fitbit sites – two sites I like selling two products I love. Pebble is pretty sleek (especially in Jet Black), and I tried reflecting that in the design. I also kept the design minimal and out of the way, letting Pebble do most of the selling.

If anyone at Allerta (Pebble’s creator) is interested in getting the .psd, feel free to email me at kyro@kyrobeshay.com.

You can follow me on twitter here.

NB: For all those who’ve emailed me: You’ve not been forgotten! It’s been a hectic week, but I am getting around to responding to all of you.

YC Facelift: Flutter

I said I’d do this every week or so, but the simplicity of this next app and my design made for a quick completion.

Next up to bat: Flutter. Flutter is an app that gives you Jedi-like control over your music and movie playback. The first time I used the app, I kept playing and pausing my music for about 5 straight minutes before I tried convincing a few friends I was Lance Burton.

The app has a magical feel to it – the kind you might have felt when swiping and tapping the iPhone for the first time. It’s a fun app with lots of potential.

I tried keeping it simple, fun, and Apple-esque. I set the logo typeface to all lowercase letters and opted for colors that weren’t too serious, making the overall image more playful. A reference to Star Wars and a talking computer helped with that too. Finally, learning from the last YC Facelift (thanks for all the feedback), I tried to make the product description as clear as possible. 

Flutter folks, feel free to email me for the .psd. My email is kyro@kyrobeshay.com.

You can follow me on twitter here.