Twitter Facebook Dribbble

Archive for June, 2014

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 42: Examples in the wild, Wilson Miner

Screen Shot 2014-06-26 at 2.04.09 pm

Browsing around today I found product designer, Wilson Miner’s personal site. Elements are very similar to the interface we’ve been working on.

At it’s simplest, there is a photo, a coloured background and some text. Some of the words in the text are links to projects or work or companies.

In a way, Wilson has chosen to tell his professional story in a similar way to how we are thinking others could tell their own story with our product.

CD_MVP_V6_Wilson_Text2Wilson had a lot more text that they 200 characters that are in the other examples so I put this quick scrolling mockup together to get a feel for the experience you could have if we allowed the text to scroll over the top.

 

Post 41: One Screen Prototype

 

Previous designs have focused on a vertically scrolling interface where peoples experience and info is revealed below the higher level bio and photo info.

This mockup tried to keep all the info in one screen. Customers have a photo and 200 characters about themselves, but are able to make words in their bio tappable which revels more information about that part of their work life.

Post 41

 

In this example Erika signs up with Twitter, browses around and find our more information about Ryan’s work with IDEO and AIGASF.

 

Post 40: Adding tiles to profile

scout

 

Tony and I are happy to show you the .gif above which demonstrates the newest piece of functionality on our app.

‘Tiles’ as we call them, have been in our mock-ups for a bit over a month and we just pushed them live then.

The best image size is around 600px X 400px.

While a vertical list of tiles might not solve the ‘professional story telling’ problem we are looking at, it’s a great start and more importantly, an opportunity for us to learn how you’d use the app.

Sign up or in on your mobile at: http://c-deck.herokuapp.com/

 

 

Post 39: Reduction

Talking to a few friends and product people in the Bay Area over the last week, a common theme has come up. We keep talking about ‘improving the professional story telling experience.’

How would we make it more engaging for the content consumer and how can we make the creation process more interesting?

Last week after I caught up with some folks in NY, I created a .gif of my career. It isn’t something that I can see being a finished product, but everyone who has seen it has thought it is interesting.

Over the weekend I experimented with reducing the design to its most basic elements and keeping it within one screen.

CD_MVP_V5The objective really is to make the whole story telling experience more human. Both of these design variations communicate the same thing, but one chunks the information, the other presents it in one sentence.

There is an animation below of how I think you’d dive deeper into the second design to find out more about the person.

Like the .gif I mentioned above, I don’t think this is a solution, but it’s an interesting idea – ‘tell your story in 200 characters on one screen’. I like the restrictions.

Profile_gif

 

 

Post 38: A different approach

Last night I felt like I’d been spending too much time on one solution to the problem of mobile professional story telling (a vertical list of ’tiles’ that visually represent your story).

Do people really want to scroll up and down a profile? Do we have the time? Is there a quicker way? Is speed actually a consideration or not?

These are all fair and relevant questions.

With these in mind I used the tiles from my own profile to create an animated .gif of my own professional story, from roughly 2009 – today. It’s a bit messy, but you will get the idea. There are 65 frames in my story and it is broken down into 6 sections representing each major professional commitment in my life:

  1. Personal slides about me
  2. Positive Posters
  3. Sex, Drugs & Helvetica
  4. The Loop
  5. IDEO
  6. Career Deck

The end result is below at 2 different frame rates (0.1, 0.2 seconds).

It’s certainly a different way of looking at things. Not sure if its better or worse.

*These are both videos of my laptop screen. The files were each 6mb+ as .gif. Need to look into reducing file size without reducing quality of image.

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.

 

Post 36: Learning From Launching

We’ve been working on an idea for an application that could help people tell their professional stories on mobiles devices in a more human and engaging way.

We actually launched the app a bit over a week ago, but we’ve been too busy testing and reporting bugs to do a blog post.

Our attitude to this product has been one of ‘launch and let customers tell us how they want to use the app.’

Today we have enough people signed up to start seeing some ways we might be able to improve the product.

CD_MVP_V4_bios

 

The image on above to the left shows how the app currently looks. One of the requirements when you create an account is to list your ‘Position‘ and ‘Employer‘.

Our assumption was that our target market would have trouble with this because a lot of them are involved in multiple projects or work/freelance for themselves. We think we’re right about that assumption.

Today there are 30 accounts on that app, 12 of which look like Anna’s above. Notice how her position is ‘Designer’ at ‘Freelance…’. Then she mentions that she is a freelance designer again in her bio.

It’s messy and confusing.

Our of aims with the product is to make finding people, and learning about their professional lives a more human experience.

So I proposed the solution you see in the right image. We remove the requirement to have a ‘Position‘ at an ‘Employer‘ and let you just write your bio mentioning your position and employer if you have one. This will only work if we can build the app to recognise names of employers and job titles and then record them as tags allowing people to search for ‘all freelance designers’.

In the mock-up I’ve marked the tagged items with an underline.

We think that version give people a nicer more fluid reading experience.

Just before I save the image above, I put a line of text under the availability indicator giving more context to the sign. The more I look at it the more I like it.

And greetings from NYC. First time in The States. Here for another week and then off to SF to get some more critical feedback on the product. Follow along on Instagram.

 

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