Twitter Facebook Dribbble

Category “User Interface”

On a Shelf

shelf

Five months ago Tony (@adeperio) and I started working on a product to solve a problem we both had. We weren’t happy with the LinkedIn experience and knew a lot of people who agreed. We formed a point of view that professional story telling was broken and needed to be improved.

Since February we, wrote 44 blog posts, did countless customer interviews, flew to America and met with people from IDEO, Betaworks, Expa, Designer Fund & Emergence Capital & launched a mobile app prototype.

Almost everyone agreed that the problem was a real one, someone put it this way: “There are 1 billion people on Facebook and 250 million on LinkedIn. The difference we call ‘The Ungraphables'”.

Tony and I worked on this in our spare time by the end of June, we both needed some time off for the project to reset.

For now, we’re putting it on hold. We uncovered lots of good insights and came up with some interesting solutions, but nothing that really stuck.

Below are some of the more significant or interesting blog posts. We’re still both really interested in the problem and are more than happy to talk more about. Lots of people are playing in this space and we will be keeping a keen eye on them.

For what it’s worth, I think this idea which didn’t get published was really interesting. Hiding your profile behind a button that you could ad to you existing site (mock up here).

 

(Post 44) – .GIF mock-up focused on projects

(Post 43) – Video of a stripped back UI

(Post 41) – .GIF Simple one screen story

(Post 39) – .PNG Simplifying the interface

(Post 38) – Video example of a professional story in a .GIF

(Post 33) – Customer interview insights

(Post 32) – .PNG New interface concept

(Post 27) – Video of a user test 2

(Post 26) – Video of a user test 1

(Post 24) – Video of a prototype

(Post 23) – Defining ‘Professional Value)

(Post 20) – Comparing people

(Post 18) – Telling your story in 5 cards

(Post 17) – The marketplace / competitors

(Post 5) – Graphic designer resume survey

(Post 4) – Verified information

(Post 1) – Connecting the dots

UPDATE: The day I published this, LinkedIn announced a new profile re-design on their blog. http://blog.linkedin.com/2014/07/28/new-mobile-profile/

On Yo!

I’m trying to understand why I’m using Yo so much.

Everyone loves to hate Yo. My non-tech friends say, “this is the stupidest app ever!” yet they use it, a lot.

And when I tell them they app raised $1.5 million their jaw drops.

Like most tech/design folk, I install a bunch of apps each week, most of which aren’t there the next week. But Yo is. Why?

This morning I read this article on behavioural design by product designer Kursat Ozenc.

In it he mentions something called a ‘Motivation-Ability Matrix’, a tool that can be use to change customers behaviour.

 

yo1

In the article, Ozenc states that, “Behaviour change happens when the individual with the right motivation and ability threshold is nudged by external triggers over a designated time. Someone might have the motivation but not the ability, or vice versa.”

 

Yo with my friends

There are two or three people in my life that I’m in better contact with now because of Yo. It’s not an email or a what’s app or FB message, it’s just a simple notification that by itself says not much, but the between you a the other person, you add your own context.

For example, a friend and I have been trying to catch up for coffee for several months. We’re both super busy and we’ve been using Yo as a way of saying “I’m free now, are you?” If either one of us gets a Yo back, then we send a message or email. If not, then there is no more time wasted.

What I think has happened here is that we haven’t realised we have the motivation to let friends know that we’re thinking about them. Yo give us the ability to do this really quickly and it let’s you add your own context. We’re all busy and Yo understand that.

 

Yo as a service

On Twitter this morning @seanh listed a bunch of Yo accounts that you can follow that completely change the app from a simple message app, to a diverse notification service. e.g. follow RAINY to get a yo if it will be raining in your city that day

I’ve currently got the app set up to ‘Yo’ me when certain people I follow on Instagram post something. (Just add ‘IG’ then their Instagram handle on Yo. e.g. ‘IGDANBILZERIAN’)

 

Summry

It fees like the Yo API is providing the ability for Yo to become the trigger for people to achieve a bunch of different things (Yo as a service). And the product off the shelf, provides the ability and the trigger for me to engage in a meaningful way with my friends.

Looking forward to seeing where it goes.

Download Yo here

 

Post 44: Who works on what?

CD_MVP_V6_Wilson_Protoio1

 

 

There are lots of questions that we’re yet to answer with this product. How is it different from About.me? Who is the customer? Is this just for one vertical? etc.

The overall question we’re still trying to answer is “How might we improve the professional story telling experience?”

Over the weekend I met a bunch of folk in SF and finding out more about them afterwards is still a ‘Google their name and open a bunch of tabs’ situation.

The people I’m wanting to find out about often are involved in many projects or have made or contributed to many things.

Their personal websites are actually all pretty similar. Often one page with a bunch of text with links to things they’ve made or worked on.

Screen Shot 2014-06-30 at 1.52.01 pm Screen Shot 2014-06-30 at 1.51.56 pm

One thing I found myself wanting to know browsing around today was not just what you’d worked on but who did you work on it with.

At the top the .gif shows a mock of Shane’s profile with each of his projects represented as a tile and tapping on Skedadel, you get taken to a company tile with more info about the company and it shows you who works there.

This isn’t dissimilar to AngelList, but the key differences here are that it’s a mobile experience, and Shane can list other things about him like a Youtube clip or that fact that he’s done work with Charity Water.

All things that make up his professional story.

Post 43: More UI

In response to positive feedback on similar interface ideas, I hacked this demo together using proto.io.

If you’re interested proto.io is more complex and time consuming that Flinto which I normally used for app prototypes, but there is 100x functionality options.

Some notes on the design.

There are 3 images in the prototype and all of the images have been taken from Google or Instagram. This is important because I think it can be a mistake to use ‘glossy’ or professional images in mock-ups that they a regular customer couldn’t get their hands on when using the live product.

Each profile is made up of the persons LinkedIn description with images placed in between.

Towards the end of the video, we show how you might be able to tap on text, e.g. Facebook, to see more information.

 

Post 37: Enhancing the story experience

One of the key design challenges we have at the moment is trying create an experience where the viewer gets a really good snapshot of someones professional story in these categories:

  1. Ability
  2. Skills
  3. Culture fit

(The third one is the most difficult and most important). Together, we believe there equal ‘professional value’.

In the mock-up below, there are some examples of potential features that could help solve the story telling/context problem.

SD_MVP_Mock_Gary

 

1. Welcome Note
The idea popped into my head the other day of letting people ad a voicemail type recording to the top of their profile to add context. It could be something like “…Hey, I’m currently taking a vacation so might not response as quickly as usual.” Hearing someone’s voice gives you a lot more context than just seeing an email responder. Tech could be a SoundCloud plugin.

2. Quote & Image
I’ve noticed that so many people have quotes by their hero’s pinned up around their desk or workspace. Whenever I see some quotes I always try and read them. So a possible feature could be to let people add quotes to their profile. In the example above I placed an image of NYC behind to give it a bit more feeling.

3. Keynote
There are a few people I know who have given great keynote presentations at places like Creative Mornings, but the seldom appear on their personal websites. It could be useful for people to add a Youtube or Vimeo clip to their page.

4. Preferred Supplier
Okay, this last idea is a bit unfinished, however I thought it could be interesting to give people the option of listing the things and services they use professionally as a way of getting a bit more context and giving props to the brands they love. I’m always interested to hear if someone uses Spotify or Rdio and why? Or if someone flys with Virgin or AA. Or if someone uses Google Drive or Dropbox. I don’t know of anywhere right now where people list their preferred suppliers which might mean it wouldn’t be useful, but you never know.

 

User Interface Lessons From Grill’d

Grilld

It was probably because I had just walked out of an intense workshop and my brain my fried, but when the young bloke at the Grill’d counter asked me if I  wanted my burger in a Traditional or Panini bun yesterday, it took me a few more seconds to answer that usual.

The guy behind the counter gestured down at the beers, buns and dipping sauces in front of me, asking me to select a bun. I looked down, saw the buns, then read the labels beneath them and for a split second considered ordering a ‘Herbed Mayo Bun’, until I realised the labels were for the sauces beneath them.

While I paid the man, I looked down again to see what had tripped me up. It seemed to just be a user interface problem. The sauce labels were above the sauces near the bread instead of underneath the sauces. This is what confused my tired brain.

So I changed them and took a couple of photos.

After our meal I showed the team the photos and explained the user interface issue they were having. We all agreed that the subtle change I made improved the over experience of the Grill’d customer.

I was encouraged to see later that day that the other counters had been updated to reflect the new design tweak (see below).

And that’s the story of how I almost failed to order the correct bun at Grill’d because either I’m an idiot or more likely, the sauce & bread were incorrectly labelled.

* FYI I ordered the Panini. Who actually orders traditional?

Grilld1

 

Post 35: Build Video

 

Post 34: Build Update

For those following along at home, this is a short video of where Tony (@adeperio) is at with the build of the first version of our product.

We will be launching this before the end of may, but only allowing 200 people to register initially.

To start with the functionality will be very limited:

  • Create a profile & upload avatar
  • ‘Discover’ – alphabetical listing of people in network
  • View availability of people in the network
  • Unique URL to make sharing easier

That’s about it.

Post 32: Design Update

We’re exploring a product idea that helps you tell your professional story and/or communicating your professional value on mobile devices. For a designer, this might include links to your work on services like Behance, Dribbble & The Loop, your Instagram account and work history etc. Obviously everyones value and story differs greatly.

3 months ago, the idea was that everyone’s story would be like a deck of cards with a ‘face card’ showing an overview of your profile and then you’d have a card for each job, or service you used etc. Something like this mockup.

CD_Card_Perspective1

Over the weekend I sat down to take a closer look at how we might design the product to give people the best browsing experience when looking through a collection of peoples stories.

The solution I came up with is below.

You would swipe left or right on your phone to change profiles and up and down to go deeper into their story.

The ‘card’ UI element has been semi-replaced by a ’tile’ type element, similar to Pinterest.

So far the feedback has been strongly in favour of this design, although there is a lot more testing to do.

We like the idea that a customer can drag tiles around to create their own hierarchy. We also like the idea that we can partner with services like Youtube or Behance or GitHub to create custom tiles that people can add to their profile.

We are hoping to get some version of this design into the build we launch with (end of May , 2014).

 

CD_MVP_V4.3

 

Post 31: Putting design second, at first

Screen Shot 2014-05-05 at 3.26.00 pm

The image on the left is what the first version of our product will look like, the image on the right is what I want it to look like.

As a designer your instinct is to work on something until it is beautiful, effective and the simplest it can be. But when you’re working on a new product with no customers, well you don’t have that luxury. Especially if, like us, you don’t have any funding and you’re just trying to get feedback.

Design certainly is important in the early stages, but in my experience, too much attention to the look can hold up development and progress to the point where you loose valuable testing time.

Designers work faster than developers (mostly) and in our case I can’t code well enough to contribute, so my partner needs .png’s to work from. It’s no good him coding all day and then at day’s end, I send him a new set of screens that I’ve been working on that day saying “can we make it look like this…?”

It helps me to remember why we are building what we are building. It’s about learning and getting feedback. If they design is only 60% of the way there, well so be it.

Shipping less than perfect design will batter your ego and you’re not going to want to show your designer mates, but you just have to cop it — poorly kerned letters and all.

We both like the second screen you see above, but we both know it’s not worth spending time changing the code. It can come later. The focus is on launch.

Screen Shot 2014-05-05 at 3.29.20 pm