HipChat is all about connecting teams in the office, but we also have you covered when you’re on the go. We have a new update for serious Android fans (and for not so serious fans). On the surface, you’ll notice we’ve pulled in material design. But we didn’t just slap on a new coat of paint, we re-architected the whole darn thing to be entirely native, and while we were at it, added stream compression (because we’re going for extra credit on this assignment).
Archive for the ‘Design’ Category
HipChat’s new web client goes live today!
Over the last few months, we’ve been beta testing the new HipChat web client and over 75K of you have opted in, providing us with amazing feedback. Now that we’ve had a little time to tighten some screws, and go under the hood, we’re ready to present HipChat’s new web client to the world.
We worked hard on this new web client and think you’re going to love it. It’s faster, smoother and built for easy team communication.
Here’s what HipChat users are saying
There has been a great reaction to the new web client, don’t just take our word for it!
- “The new HipChat Beta looks much better! Great work!”
- “Love the new HipChat!”
- “Just want to let you know that the new web interface looks so refreshing! Love it!!”
- “Fantastic! This update looks slick and feels buttery – congrats!”
So what’s changed?
We’ve made a large number of improvements with the new web client, check out some of the highlights. If you’re a details person, checkout our release notes.
Sidebar Upgrade – People, Files and Links
The right-hand sidebar now shows files and links, as well as people in the room. Any file or link shared will be added to the sidebar for easy access. Lots of you use HipChat on small widths, so we made sure the sidebar is collapsible, too.
File previews like whoa
Want to view images, PDF’s and videos right in HipChat? Now you can. We’re working on adding more file types including documents, spreadsheets, and presentations. If you’d like to see other file types HipChat will be supporting soon, check out the latest version of Confluence, which has over 80 supported types.
Everyone loves emoticons! Team communication is so much more fun and expressive with them. So we’ve made it super easy to remember your favorites with emoticon autocomplete. It even supports any custom emoticons that you’ve uploaded!
Invite, invite, invite
We added a simple dialog to the new web client that allows you to invite teammates via email. You can even invite entire mailing lists at the same time. Get all your friends on HipChat, we won’t be mad.
Note: the public invite URL needs to be switched on for this feature to work.
Rebuilt from the ground up
We wanted HipChat’s new web client to be a better experience, not just a better design. So we started with a brand new technology and built a completely new application – the best HipChat we’ve ever made.
We chose React.js as our foundation. That let us create a faster, more responsive and more enjoyable HipChat. You can read more about how we did it from our developers.
Note: video is not yet supported in the new web client – it will be very soon! You can use the old web client in the meantime (there’s a switch in the profile menu).
HipChat is the best tool for team communication. We’re always adding performance and stability improvements as well as new and requested features.
Often, new features will debut in the web client and provide users with opt-in or opt-out options. If you want to help shape HipChat, try out the new features and drop us a line. We love feedback.
Try it out
If you haven’t yet seen it, log in to www.hipchat.com/chat and prepare to have your mind blown.
The Internet loves two things: cats and memes. Combine the two and worlds collide while raising a crazy amount of cash.
In case you don’t keep up with your geek-internet news, Exploding Kittens is a card game that broke Kickstarter. Created by video game designers Elan Lee, Shane Small and illustrated by Matthew Inman–the crazy person behind The Oatmeal—Exploding Kittens has gone nuclear.
Look at all the articles written about them.
- The Daily Beast – How Exploding Kittens Raised $8.7 Million and Broke A Kickstarter Record
- VentureBeat – A card game called Exploding Kittens just made Kickstarter history
- IGN – EXPLODING KITTENS CARD GAME EARNS $8.7 MILLION ON KICKSTARTER
- Esquire – The Oatmeal Creator’s Exploding Kittens Card Game Raised $8.7 Million on Kickstarter
- Mashable – Exploding Kittens raised a whopping $8.7 million on Kickstarter
- Forbes – The Oatmeal’s ‘Exploding Kittens’ Kickstarter Could Set A New Funding Record
With an original goal of $10K, Exploding Kittens saw its goal shattered within moments of going live. Within days, it reached a million dollars, and days after that; it’s raised over eight million dollars.
Exploding Kittens is the most funded, most backed project ever on Kickstarter. It even beat the Veronica Mars movies and Reading Rainbow.
At its core, Exploding Kittens is not a suicidal cat card game, but a fun game dealing with complexities of cat behavior, while also utilizing tools like tacos, weaponized back hair, goats and magical pig wizards. It’s all about the luck of the draw mixed with strategy and the ability to be friendly to other players or be mean. It’s easy to see why it’s been so successful.
When we got word of Exploding Kittens, we wanted in. So, HipChat put its money where it’s mouth is, and we backed the ultra-exclusive perk of The Deck of Legends, which means we get three custom designed cards. Only five of the Deck of Legends perks were available. Statistically, it’s easier to get bitten by a shark than it was to score this perk*
We need your help
And here’s where you come in: We need help coming up with designs that reflect HipChat and our quest for fun. Whatever three designs get picked, we’ll make into emoticons. What makes you think of HipChat? Get creative – is it a HipChat geek fighting a sloppy burrito? Or maybe it’s George Washington looking at his emoticon and crying. Who knows!
Let’s see your ideas, show us a drawing or cool idea in the comments of this Facebook post.
*We made that stat up, but it seems legit
Here on the HipChat team, we take emoticons seriously. It’s really weird to spend a healthy portion of your work day discussing the finer points on tiny pictures from the internet. But when we see how happy those tiny pictures make everyone, it’s all worth it. Today, we want to tell you about a few ways we’ve improved emoticons in HipChat.
Emoticons for (allthescreens)
All of our global emoticons are now built to support hi-res displays, like Apple Retina displays and the higher end of the Android pixel density spectrum. This change resolved the much voted-on UserVoice ticket that we’ve had on our list for a while.
For every new image, we created hi-res sizes up to 4x (because you never know what the future will bring), so they’ll look good on both your fancy high-res displays and that old monitor your work won’t upgrade for you. We’ve been rolling out these Retina emoticons over the last few weeks, and we’ll continue to tweak them every so often. Check out the big changelog below for details.
Sharing our favorites
Included in this latest release are a few of our favorite emoticons. Many, like (whoa) Keanu, were added because of your feedback. Others, like (disappear) and (salute), are ones we use so much around Atlassian that it didn’t feel right to keep them for ourselves.
Don’t forget that you can upload your very own custom emoticons just for your team. So next time you don’t have to wait for us to update the global set with (whoa) and can BYOK (Bring Your Own Keanu).
One size fits most
In addition to Retina-fying our global set, we improved our emoticon uploader. Now, admins can upload new, hi-res emoticons. And even better, we’ll automatically scale them for you. We suggest starting with an image around 120px (the new maximum). After the image goes through some emoticon uploader magic, you’ll end up with an effective 30px image after scaling.
We debated how to handle retina images. We chose this auto-scaling method because it’s far easier to upload new emoticons, or update an existing one, when you only have to create and maintain one size.
Protip: Keep in mind that whatever you upload is going to be scaled down 4 times, so a 1px stroke is going to be hard to see on a low-res monitor. We learned the hard way how much that can really effect line-drawing emoticons. That’s why you’ll see “beefed up stroke width” on a lot of the changelog below. It also helps if your image starts with dimensions that are multiples of 4 on both sides. For example: 116 px wide is great (116/4=29), but 115 px wide isn’t (115/4=28.75).
And now that you can’t stand to look at your old custom emoticons on your Retina monitor, you can re-upload any of your existing custom emoticons by deleting old ones and uploading a new, larger versions. We’ll continue to refine and add to our global emoticon set.
The other “emoticons”
We also updated our set of little faces. Similar to the situation with the Retina emoticons above, we needed higher resolution images than the current assets allowed. We also wanted a new set of our own.
We started looking at emoji sets for inspiration and pulled in little touches from our HipChat brand, like using the logo smile shape as often as possible, and we ended up with a set that we really like. As with everything else, we’ll be iterating on them here and there, and someday may bring full emoji support.
Oh, and the icy blue corpse thumb thing we did is dead and buried. Dig it out if you want: (corpsethumb). We’re replacing the re-colored Apple emoji thumbs-up and thumbs-down with a new pair of icons that don’t look at all like Facebook. (badpokerface)
Changes made to global emoticons
- (awyeah): beefed up stroke width
- (badass): beefed up stroke width
- (badjokeeel): added contrast and adjusted size
- (bumble): added contrast
- (caruso): adjusted size
- (challengeaccepted): beefed up stroke width
- (chewie): added contrast, brightened
- (chucknorris): brightened up to bring out the Chuck Norris
- (clarence): added contrast, brightened
- (derp): beefed up stroke width
- (dumb): enlarged to show face better
- (facepalm): added contrast, tightened crop to improve chest to face and palm ratio
- (fonzie): added contrast
- (freddie): beefed up stroke width
- (gangnamstyle): cleaned up gif
- (gates): adjusted a little to match (jobs)
- (goodnews): scaled up a little
- (haveaseat): added contrast
- (heart): updated to match smilies, adjusted crop
- (ilied): lightened up to bring out details
- (indeed): cropped to just face and highlighted monocle
- (itsatrap): added contrast, brightened up to bring out detail
- (jackie): beefed up stroke width
- (jobs): adjusted to match (gates), added contrast and brightened
- (joffrey): new image, fewer spoilers, more like the others (not shown above)
- (kennypowers): added contrast and brightened
- (krang): beefed up stroke width, reduced contrast between colors
- (lincoln): brightened to blow out noise
- (lolwut): added contrast and brightened, scaled up
- (notbad): beefed up stroke width
- (notsureif): replaced with (fry) to match
- (philosoraptor): brightened to bring out detail
- (present): added contrast and brightened
- (reddit): removed white fill from antenna shape
- (romney): added contrast and brightened
- (sadpanda): using a sadder, more forward-facing panda
- (samuel): added contrast and levels adjusted to stand out more on white
- (skyrim): added contrast and brightened
- (sweetjesus): crammed into (iseewhatyoudidthere)’s head shape to resolve weird corners
- (taft): cropped closer to face, mustache volume increased, mustache/face contrast increased
- (twss): added contrast and brightened
- (wtf): enlarged to show face better
- (yodawg): added contrast and brightened
- (yuno): resized because he was too small
- (zoidberg): resized because he was too small
New global emoticons
In this Mac release you’ll get a new design for finding your teammates and public rooms from our New chat popover button.
New form, more function
The New chat popover allows us to consolidate the entire lobby experience into smaller, more visually efficient solution so your teammates and rooms are front and center. It also sets the stage for us to add more functionality within the popover – like the ability to invite new users and create new rooms more easily.
We started thinking about this after observing users depend on the lobby to start chats instead of using a keyboard shortcut (Command N). Some users complained that going to the lobby to find someone was cumbersome. We agreed.
What do you think? Let us know in the comments 🙂
Hot on the heels of our newly redesigned HipChat for Mac, the brand new HipChat for iPhone and iPad is out today. The new HipChat is more responsive, more beautiful and more connected, so you can get work done faster, wherever you are.
The first thing you’ll notice is the new design, which is lighter, cleaner, and easier to navigate. It’s also faster; responding more quickly to get you directly to the right conversation. And HipChat uses some of the great new features of iOS 8 to connect with the other apps on your phone.
So what’s new?
Beautiful and efficient new design
We’ve redesigned HipChat to make it easier to read information and faster to navigate between conversations. The main chat window has been simplified and the chat windows have been improved to fit more context on your mobile screen.
We’ve also brought HipChat more in tune with iOS aesthetics, all while fitting beautifully within Atlassian’s Design Guidelines.
Share to (and from) HipChat
The new HipChat makes it even easier to share with your team.
You can now select any file from any other app and post them straight into HipChat, and vice versa. Let’s say there’s a photo you want to share with your team on HipChat. Simply click the share icon button, select HipChat, and choose which chat you want to share the photo with. Likewise, if you have a file in HipChat you want to share, just click the share icon inside HipChat and select where you want it to go.
Now you can be even more efficient in HipChat thanks to our new interactive notifications. When you get a notification from another teammate or chatroom, you can pull down to read the whole message.
You can also respond directly from the notification. Click the pencil icon to type a reply. Or ‘quick reply’ with a thumbs up, thumbs down, OK or question mark. Interactive notifications let you carry on multiple conversations without constantly switching tabs. Get your point across without leaving your current chat.
There’s a lot of other cool stuff in this update, so grab the new version on your iPhone or iPad. If you don’t have the app yet, you can download it for free at the App Store.
As always, we want to hear your feedback. Let us know what you think!
Starting today, we’ll be rolling out a HipChat that looks a whole lot different. At first you’ll notice it’s lighter and cleaner, but there’s a lot more going on (and sets us up for more big changes to come). We’re starting with the Mac app first, then we’ll be rolling out the changes to the rest of the apps.
HipChat for Mac 3.0
Over the past few years, the Atlassian design team created the Atlassian Design Guidelines. ADG is a public guide of the best practices when designing Atlassian products, services, and add-ons. We followed the spirit of these guidelines in the new Mac app, so some of it may feel familiar if you currently use existing Atlassian products.
More than a coat of paint
Along with a new design, you’ll also find the app has some new features and fixes mixed in.
Does your team have more emoticons than you can remember? It may sound like a (firstworldproblem) but once you use emoticon autocomplete, you’ll wonder how you lived without it. Simply type the open parentheses, and the autocomplete window will pop up.
Local time in 1-to-1 chats
Now when you’re in a chat with someone, you’ll see the local date and time of where they are. As a company that’s spread across a dozen time zones, we’ve been wanting this for a long time. Now I’ll know if I’m about to message someone in the middle of the night. I’m still going to do it, but at least I’ll know.
To make sure you don’t get woken up, you can set your timezone in your account settings.
Unread message counts
We recently added unread message counts to our Android app. Our Android users loved it, so we’re releasing it on all of our desktop apps (starting with Mac). HipChat will also indicate when you have new messages for tabs hidden off of your screen. You won’t miss a message again.
New presence icons
Our old icons were the classic red, orange, and green orbs that made it somewhat difficult to tell them apart (nearly impossible for colorblind folks). We’ve kept the color scheme, but changed the shapes to make it easier for everyone to know whether someone is available.
One last change: search.
As HipChat has grown, our search took on the brunt of the growing pains. We’ve made a lot of infrastructure changes and now search speed should be noticeably faster. There’s also a search bar in the header now so you can search from anywhere. Best yet, since version 2.6, search results now show up within the app.
There’s a lot more in this latest version, so update your Mac app and check it out. If you don’t have the app yet, download it for free at hipchat.com/downloads
As always, we want to hear your unfiltered feedback. If you have questions or got something to say, please let us know.
After months of hard work, our team was really excited to announce 1-1 video chat and screen sharing for all of the apps. However, that news was completely overshadowed by another change: a new logo and app icon.
This is our new logo and the controversial OS X app icon we released a few days ago:
|New logo||Controversial OS X icon|
The feedback was as plentiful as it was negative.
HipChat’s new icon on the Mac is the ugliest thing I’ve ever seen.
— Mike Cohen (@mike3k) May 6, 2014
that’s one ugly updated hipchat icon — イゴール (@igorajdisek) May 6, 2014
@HipChat Used Time Machine to find the previous version of the app and switch to its good icon. I’m happy again.
— Rafael Fischmann (@rfischmann) May 6, 2014
There were hundreds of tweets about how ugly the icon was. Hundreds.
The weird thing is, we agree. So how did this happen?
The original goal of the new logo was to align it with the rest of the Atlassian tools. I think we achieved that and came up with a solid logo. The problem came with the implementation of the app icons themselves.
You could look at the feedback and say “people hate change” which is often true. But the problem here was that a large part of our team feels the exact same way as our users. There were two schools of thought when it came to the icon:
School #1 – “Consistency means the icon is the same on every device.”
School #2 – “Consistency means it pays homage to the style/design while respecting the look and feel of each OS.”
We fought. We argued. We gave each other the silent treatment, then argued some more. In the end, we chose option #1. But hey, if it sucks, we can fix it. We have zero problem admitting we made a mistake.
We made a mistake. The app icon sucks. Today we’re fixing it.
Lesson learned: respect the design guidelines and recommendations put forth by each operating system, even if you have to sacrifice your own internal guidelines. No one wants to see an OS X icon that looks like it belongs on iPhone, and people certainly don’t want to see an Android app with an iOS style icon. The part that made me both happy and sad was that people on Twitter proposed an alternative design, and it’s almost the exact app icon that we decided not to use in the first place (and I have the PSD’s to prove it!).
Here’s the the new app icon we’re releasing today for the desktop apps:
It may seem that having hundreds of tweets shitting on your icon is a bad thing. Sure – it bummed us out, but it means our customers are passionate and they fucking care. It also means our team members that argued for the ugly icon have to buy the rest of the team a big box of apology donuts.
So let us know what you think of the new icons. I can’t promise we won’t make mistakes in the future, but I can guarantee we’ll own up to them and make things right.
zOMG… did you guys catch last night’s episode of Game of Thrones?!
We here at HipChat have been going gaga over the new season and we’ve been chatting all about it. Pete was so excited that he created some Game Of Thrones emoticons this weekend, and we’re making them available to everyone.
– (hodor) | – (tyrion) | – (jaime) | – (ned) | – (jonsnow)
– (daenerys) | – (joffrey)| – (tywin) | – (arya)
Help us raise funds for the Room to Read and share your custom emoticon with the world.
Starting today, the HipChat team will open bidding on a universal HipChat emoticon via Charitybuzz.com.
We’re starting the bidding at $250. Yes, that’s a lot of money for something you can create on your own for private use. The kicker here is that your emoticon would become part of every HipChat experience.
Universal? Go into any HipChat room and type (dealwithit). You’ll see this guy
Everyone sees him because he is system-wide.
How it works
- Place your bid at Charitybuzz.com.
- If you win, our co-founder, Pete, will help you with your design.
- We’ll make sure everyone knows about it via our newsletter, blog, social media and lobby messages.
Of course, we reserve the right to refuse any content we deem inappropriate.
Our parent company, Atlassian, has set the goal of raising funds to benefit the Room to Read Girls’ Education Program in Cambodia.
Our team believes in this cause and the organization behind it. We sent 11 staff members to check out the program personally.
Atlassians have created some epic emoticons for internal use. Most of them reflect inside jokes. They are also a great way to build camaraderie.
We’ve got an incredible Events Manager named Rudy who owns a panda suit. He’s got his own emoticon (rudy) that makes everyone smile
We also created emoticons based on our company values. The first of which is open company, no bullshit. So Atlassians type (nobullshit) and see
We know you’ve got some good ones too…
— Scott Vandehey (@spaceninja) August 9, 2013
— Gabe Sanchez (@iamgabesanchez) August 1, 2013
I just made an animated (confetti) hipchat emoticon. Nothing will ever be the same.
— beerops (@beerops) October 4, 2013
So let’s merge forces to raise money for a great cause. The auction lasts until February 13th. Bid now!