Skip to content

Instantly share code, notes, and snippets.

@mattborn

mattborn/index.html

Created April 25, 2016 18:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mattborn/4812480f7d447431535cf3025c7bf61d to your computer and use it in GitHub Desktop.
Save mattborn/4812480f7d447431535cf3025c7bf61d to your computer and use it in GitHub Desktop.
Download ZIP
Bambu native prototype
Raw
readme.md

Scope

The app experience should be made up of these distinct parts:

  1. The icon — should catch your eye, not sure if it should look like Bambu or should look like your organization
  2. The launch state – waiting to experience Bambu the first time and every time should be delightful and inspiring, not annoying, broken, confusing or draining
  3. The list view - like all other conversation app experiences, I should be empowered to engage my spatial reasoning and make a decision about what matters to me right now
  4. The navigation – should follow Apple’s guidelines as closely as possible while still retaining the elegance, simlicity, and uniqueness of Bambu’s brand experience
  5. The menu - the list of available options for changing the content will help me contextualize how the content is relevant to me and empower me to control how I work through it and make full use of the experience
  6. The profile - I need to know how I am represented in this app to my company so remind me of what profiles I have connected, what networks I am still able to connect, what email is associated with this app, what role I have in a way that is meaningful to me, and what my performance has looked like compared to company averages
  7. The share actions - the when, where, what, and how are impacted by high-level design decisions about doing our own thing, double-dipping, and complexity of the composition view
  8. The reading view - rich, immersive, readable, and highly functional …
  9. The composition view - this is wide open for iteration … Why do we do this? · accurate, controled share counts? · “via Bambu” attribution?
  10. The scheduling view - The current triple-tap selection model seems strong. To whom can we compare?
  11. The post options view - The current double-tap selection model seems strong. To whom can we compare?
  12. The submission state -
  13. The successful submission state -
  14. The story list is empty state -
  15. The failed submission state -
  16. The push notifications - need to write business rules for these

Checklist

[]

Thoughts

  • Question: Can we use the Tab Bar for our existing options and share action currently positioned along the bottom of the viewport?
  • Fixed story list item height vs. variable height
  • Excerpt in story list item vs. no excerpt
  • Custom compose vs. native action sheet · Question: What apps have custom compose?
  • “I am publishing this message about this story to this [account (person’s face)] on this [social network (brand icon)] either right now or in the future.”
  • Heating up / on fire lights up the story like NBA Jam, say 3 shares in 10 minutes, keeps flame as long as no more than 5 minutes pass without another share
  • Instead of gamefication, we could expose names of those who have recently shared or all-time shares, cater to the same instant gratification visual feedback
  • We can definitely beef up the successful submission state, instead of a lame text only growl alert, how about we fire a new full screen that gives you company-wide share statistics for that story, other team members who have shared that story, and specific challenges like “share 2 more stories to beat today’s company average” or “x shares left to badge/incentive”

Research

  • “Maybe we do a tabbed interface in compose to accomodate publishing to multiple networks at once.” – Kris (paraphrase)
  • “Compose is hard.” – Sundeep
  • Kris favorite reading experience is Pocket because of saving to my pocket, I get value out of my list with title, source, some attribution like Trending and Best Of, light imagery, actions (6, tag, complete, favorite, love, trash, share) on the surface via swipe … we are at an inherent disadvantage because Pocket has “the entire world” and our customers struggle to source content
  • Kris favorite sharing experience might be Buffer, I don’t have a lot of examples that don’t use native … if we push to a share sheet, we lose
  • If it only exists in our native app and not anywhere else, that needs to be a very conscious decision

Decisions

  • According to Apple Human Inteface Guideliness, a Tab Bar positioned along the bottom of the viewport is for “peer categories of content or functionality”, not for displacing distinct navigation items. We should try new positions for our menu and share actions.

Reading

  • List view 👍
  • What about story management? Marking as complete or read or archived or “go away”, etc. as opposed to only sharing or scheduling
  • What about increasing context on the surface?

Sharing

Information

Links

Pull Quotes

  • “Users should always know where they are in your app and how to get to their next destination.” — Apple, HIG · Navigation
  • “Use a navigation bar to give users an easy way to traverse a hierarchy of data. The navigation bar’s title can show users their current position in the hierarchy; the back button makes it easy to return to the previous level.” — Apple, HIG · Navigation

Inspiration

Services

Adorable Avatars Free, square avatars that look like little, colorful monster faces. The best part of the service is that when you pace a unique string at the end, it will always serve the same image so the avatar is always the same for that user. Example: https://api.adorable.io/avatars/200/matt@sproutsocial.com.png

PlaceIMG — Free, random placeholder images with simple URL-based size and category configuration. Example: https://placeimg.com/200/200/tech Too damn slow and keeps choking my page reloads in development!

LoremFlickr - Better than because it supports query strings which will generate different images on the same page at the same size.

Enable web inspector for Safari on iOS

iOS > Settings > Safari > Advanced > Web Inspector

Raw
index.html
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Bambu by Sprout Social</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="panel-1">
<div class="navigation-bar">
<div>Options</div>
Stories
<div>Profile</div>
</div>
<div class="table-view">
<div class="item" onclick="showStory()">
<img src="https://placeimg.com/200/200/tech">
<div>
<p class="featured">Featured</p>
<h1>Kris</h1>
<p>Excerpt</p>
<small>Byline</small>
</div>
</div>
<div class="item" onclick="showStory()">
<img src="https://placeimg.com/200/200/tech">
<div>
<p class="featured">Featured</p>
<h1>Title</h1>
<p>Excerpt</p>
<small>Byline</small>
</div>
</div>
<div class="item" onclick="showStory()">
<img src="https://placeimg.com/200/200/tech">
<div>
<p class="featured">Featured</p>
<h1>Title</h1>
<p>Excerpt</p>
<small>Byline</small>
</div>
</div>
</div>
</div>
<div class="scroll-view" id="panel-2">
<div class="navigation-bar">
<div onclick="hideStory()">Back</div>
Article
<div onclick="showCompose()">Share</div>
</div>
Humble hero
<img src="https://placeimg.com/350/350/tech">
</div>
<div class="scroll-view" id="panel-3">
<div class="navigation-bar">
<div onclick="hideCompose()">Back</div>
Share
<div onclick="share()">Share</div>
</div>
<div>Schedule - maybe make this more like share, something that happens after you write your message, perhaps a new share confirmation screen that includes the meta data preview with network-specific message formatting, a huge Send button with network-specific text, icon, and color, support for multi-network posting, scheduling, and metrics about that individual’s audience (you are sharing this with your 1,234 followers (aggregate when multi-network)</div>
<div>Pick network – maybe we do the same with this since all our default text rules are written to accommodate the lowest common denomenator—Twitter’s 140 character limit … also, maybe we automatically switch to Facebook if they try to write a longer message and disable LinkedIn if they write too long of one (we might be getting into extreme rocking the boat territory here)</div>
<textarea>My response to the story I just read that I am going to share with the world because I care about this industry and the place my company has in it.</textarea>
<div>View options – choose a starting point from a list of canned messages so my voice is better aligned with the company voice</div>
</div>
<!--<div class="scroll-view" id="panel-4">
<div class="navigation-bar">
<div onclick="hideCompose()">Back</div>
Share
<div onclick="share()">Share</div>
</div>
</div>
<div class="scroll-view" id="panel-5">
<div class="navigation-bar">
<div onclick="hideCompose()">Back</div>
Share
<div onclick="share()">Share</div>
</div>
</div>-->
<!--<img src="https://api.adorable.io/avatars/200/matt@sproutsocial.com.png">-->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
Raw
scripts.js
function showStory () {
console.log('showStory');
$('#panel-1').addClass('slide');
$('#panel-2').addClass('visible');
}
function hideStory () {
console.log('hideStory');
$('#panel-1').removeClass('slide');
$('#panel-2').removeClass('visible');
}
function showCompose () {
console.log('showCompose');
$('#panel-2').addClass('slide');
$('#panel-3').addClass('visible');
}
function hideCompose () {
console.log('hideCompose');
$('#panel-2').removeClass('slide');
$('#panel-3').removeClass('visible');
}
Raw
styles.css
@import "//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css";
body {
color: #515e5f;
font: 17px "Helvetica Neue", sans-serif;
margin: 0;
}
.navigation-bar {
background: #253535;
box-sizing: border-box;
color: #fff;
font-size: 17px;
height: 64px;
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.table-view,
.scroll-view {
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
}
.item {
border-bottom: 1px solid #dee1e1;
padding: 10px;
display: flex;
}
.item img {
height: 60px;
margin-right: 10px;
width: 60px;
}
#panel-1 {
height: 100vh;
left: 0;
position: relative;
transition: left .4s cubic-bezier(.1,1,.1,1);
display: flex;
flex-direction: column;
}
#panel-2,
#panel-3 {
background: #fff;
height: 100%;
left: 100%;
position: fixed;
top: 0;
transition: left .4s cubic-bezier(.1,1,.1,1);
width: 100%;
}
#panel-1.slide,
#panel-2.slide.visible {
left: -100px;
}
#panel-2.visible,
#panel-3.visible {
border-left: 1px solid #dee1e1;
left: -1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment