Connect 4.0: Conversations that become plans.

Connect (because the struggle of planning stuff with friends is too real)


I hate planning, am not good at it, and find the decision making process with other people a real pain! Connect wants to help me with that. But so you understand my pain, here is why I had to explore this design in an exercise while thinking about the Connect app.

Problematic  way of making plans (in steps):

  1. Message, email or speak over voice
  2. Launch and review calendar application
  3. Communicate best times or time range
  4. Review suggested times between myself and party with calendar
  5. Confirm best time with party
  6. Send an invite
  7. Wait for confirmation
  8. Acknowledge confirmation (e.g. reply with an email)

And Facebook doesn't really make this any easier...

Desired way (in steps):

  1. Add Gmail or iCloud email in settings (syncs my calendar(s))
  2. Send / Receive suggestion based on disclosed availability (app only shows my open times  when a friend wants to confirm when we will connect)
  3. Confirm the best place with friends
  4. Meet and do things we really want to do

But first, my process outlined...

A.  Define the problem...

  • What problem does this solve and for whom?
  • Define Happiness using the Heart UX Framework (will be used throughout iterating and prototyping)

B.  Frame problem(s) as a job(s) to be done, write a job story, then make a a list of the tasks or things required to do the job...

  • When (situation) [__________], I want (desire / motivation) [__________], so that I can (outcome) [__________], allowing me to (benefit).

Job Story example:  "When I'm planning an event with a friend (situation), I want my availability to be automatically matched (desire) with those whom I'm making plans with, so that our best times are paired-allowing us to confirm our best times to connect or to decide on where we', saving us both time (benefit) from having to play ping pong with our events calendars-so we can focus on where we'd like to meet."

C. Outline or chart each job in task flows using Mindnode...

D. Break tasks out into views (updated in Mindnode, get feedback)

E. Sketch…(get feedback)

F. Iterate…(level up fidelity, get feedback)

G. Measure against success defined by UX Framework and prototype…(collaborate / get feedback)

H. Iterate (get feedback)

*Often times these steps will be overlap or sort of blend together without a breaking point (as you may see below, but I'm trying to save some time here and get to the best part: a concept that is beautiful as well as a problem-solver.

But why Job stories?

Job stories for places (or plans) with friends (or friends of friends) makes a lot of sense because there are so many steps and backstories that are going on, that it's really important to get your situations together and start prioritizing how this thing will work in the real wold.

I rely heavily on JTBD in place of personas and in some cases user stories because I've found they're just way too static and  are too assumptive for my problem solving prowess!  I didn't list every job story for the concept you'll see below (which is why I use Google sheets for flushing them out and moving them around in area of importance. The goal for me is to share my process and to give you a glimpse into how I start a project from beginning to finish. 

For context as to how I got to the finished UI, we'll start with the discovery aspect of finding friends and places we might want to do stuff with together.

Cool?  Awesome. 

Discovering friends and things to do together

Avoiding decisions that don't really help me see my friends and do things faster

The map feature as a discovery method somewhat troubles me.  

Okay, I lied. 

It really troubles me.  Heres why...

The map view becomes a challenge to find friends and things to do quickly because it lacks the nuance you need in different situations (say you're feeling spontaneous, or have no idea what you'd like to do). A map might be useful when a user plans a to be in a different location other than the one she is currently in, say in the future.  But, it's not necessary. But, since it's kinda neat, we could easily make it accessible by means togging it in the header from a map view to a more legible and informative UI pattern like a list.

Another problem with the map is that once you have over five or so in an condensed area, you have to zoom and think about where those thumbnails actually are. Sure, you can tap on the thing, but who wants to when they're really excited to get the weekend popping and plans locked in?  I don't!  

Replacing the map with a list view...or better yet, cards...

Here are some stories to support the approach of replacing the map view with a list view, and then cards.

Feed Job Story 1: When I'm feeling spontaneous, I want to know who's close by (we all live in LA and hate driving!), so that we can likely meet within the hour, hang out, and do something fun.  

JTBD: Display distance and friends within a range of a desired commute (or least starting from closest to furthest away).

Feed Job Story 2: When I am looking to make plans with friends, I want to see plans that friends have made or places that I might want to plan and experience with friends, so that we can finally spend time together doing something we can all jive with.

JTBD: Include destinations in a way that provides context (e.g. name, image(s), ratings, address, etc.) enabling users to discover a place they'd like to spend with their friends.

Feed Job Story 3: When I'm not sure what plans to make (and am feeling spontaneous), I'd love to know what friends have maybe done in the past, which would help me in my suggestions, so that we don't spend a great deal of time going back and forth on things that we all can't really agree on.

JTBD: Disclose within the list context friends or friends of friends who may have visited a particular place that respects the above stories.

Job stories for deciding on a place (or plan) with friends

Conversation Job Story 1 When someone makes a suggestion, I need an easy way to make a contextual decision based on the event, venue, or place, so that we can can save time reaching a consensus. 

JTBD: Display the following-Name (benefit: so I can know where I'd be planning to go); Location (benefit: so I can know the best way of getting there); Context such as a comment by someone trusted in the conversation (benefit: so I can understand why it was suggestion); Rating or means of grading the suggested location (benefit: so I can confide  / trust in the suggestion).

Conversation Job Story 2: When I'm feeling spontaneous while riding on my hover board, I want to know the location and have a way to quickly navigate with the least amount of effort, so I can get to a destination while not risking injury by spending a great amount of effort tapping and typing on my device.

JTBD: Display the following-A means to assessing travel time or navigation; A means to navigating without having to copy, and paste an address into an navigation app

Conversation Job Story 3: When a place is offered, I may want to say why it does or does not work for me or others, so we can best align and quickly make decisions as a group.

JTBD:  Provide a means to message or communicate in real time (I loathe waiting for an answer when it comes to making plans). Provides supplemental points of view, so participants can not take this sort of thing personal (unless it's meant to be).

From the above stories, here is a take on the UI.

Reason why I took on this exercise is that I am obsessed with contextual messaging and had a really informative conversation with the CEO that provided insights into the products' journey and DNA.  

That said, we are just now beginning to see the power embedding UI elements into the context of messaging. Because Connect has already implemented an array of features within the context of messaging, it made sense to envision the data served up as a UI card (pulled from APIs, etc.), which are tucked away in the floating action button. 

When engaged, the menu animates and displays actions such as camera, share location, record audio, etc. I'd want to A/B test this approach before fully committing to it, and foresee the need to have a coach view / overlay so to inform existing and new users where all that goodness is.

But that's TBD, and there are some other exciting things coming I want to share...


Often and without fear...😃

Message and Content Card Copy.png

I was working in greyscale just because I didn't want to bother with the whole styling thing upfront. I also wanted to explore color, icons and other nuances after I felt like I understood the audience a bit more. 

After asking my partner what colors make her think of friendship, memories, and good times, she recommended blue and purple. I couldn't agree more, so I went for it.

But, it just wasn't giving me the feels when applied to solely the header; it started to feel like a Salesforce app really quickly!

But, I did manage to get enough inspiration from the gradient approach to turn it up a notch. 

Still with me? 

Okay, great.  


Another iteration soon after...

*goes with gut*

Okay, so now we're cooking with grease!

I began to move things around a bit, apply the gradient to the entire background only to copy this version and begin flushing out the next view because some things just didn't work.  

Those changes should be obvious, but I might double back around and say just exactly what.

One last pass...😬

Connect 4.0 Concept

Conversations that become plans.

Thank you for having a look and reach out if you dig messaging as much as I do, and would like to work on some stuff.


Tools Used

Pencil and paper or Paper for iPad (sketching)

Mindnode (for flow / task diagrams)

Sketch App (for wire framing and design)

Osandi Sekoú Robinson