Archive for the ‘Design’ Category

A Whole New HipChat for Android

3 months ago Seth Gholson 6 Comments

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).

Good-bye Web View, Hello Native

Being native provides benefits that you are going to notice right away. The app is now a lot smarter about your messages. We can let you know if your message failed and inform you if you’re still connecting. You’ll know if you’re looking at the latest set of messages or if some more need to load. Added bonus, the app respects your system preferences for fonts.

It also makes HipChat faster than ever. Your messages load with great haste and switching between rooms is nice and smooth. Back when we used webview the app spent time loading the initial HTML/javascript/CSS, then building javascript calls, and then executing them on the main thread. We’re not doing that anymore so we can get you chatting faster. If you want to geek out about testing, well, we improved that too. This means squashed bugs will stay squashed, we’ll have better edge case handling and be able to speed up our delivery of new features that you want to use. That feels good.

HipChat Android Material Design

 

Now about that Material design

Of course, you’ll notice the bright colors, animations, and transitions you’ve come to expect from material design. We’ve moved a few things around to make it quicker and easier to get chatting. When you open the app, the new homescreen lists all your active rooms and 1-1 conversations. Notice the green button in the lower right? Tap that to easily find rooms or start new conversations with your teammates. If you’re done with a room or a chat, all you have to do is swipe it away to close it. The left drawer now contains your beautiful face (or your avatar of choice), account info and access to your preferences. Once you’re in a chat, the redesigned chat view now makes your files, links, and messages easier to read and more consistent. What else? Thanks to Lollipop’s heads-up notifications, it’s now easier to see when someone mentions you in a room or you have an incoming call.

HipChat Android Material Design 2

Save that data for a rainy day

We’ve added two features that will help us play nice with your data plan. First, we will stop loading all images in the entire chat log. Phew. Second, we rolled out XEP-0138: Stream Compression support on our XMPP servers (that’s our fav flavor of compression). The new Android app takes full advantage of this new server feature. In our experiments, we’ve seen compression ratios from 3:1 to over 9:1 (awyeah). Keep an eye on your data usage from HipChat; we’d love to know if you see a reduction after this update.

We’re proud of our new Android upgrades, and this is only the beginning. We’ve got lots more planned for the rest of the year. Stay tuned.

Ready for it? Get the latest app here

A new web client, rebuilt from the ground up

6 months ago Josh Devenny 27 Comments

hipchatWeb

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.

rhs

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.

fileviewerPDF

Emoticons galore

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!

emoticonAutocomplete

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.

invite

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).

Updates, everywhere

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.

Exploding Kittens is Coming to HipChat

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.

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.

The video from Kickstarter

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

 

(goodnews) New and improved emoticons

9 months ago Matt McDaniel 24 Comments

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)

Check out hipchat.com/emoticons to see all the new emoticons and try them out with your team! And keep the feedback coming at help.hipchat.com.

Changelog

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

  • (awesome)
  • (aww)
  • (awwyiss)
  • (badtime)
  • (bicepleft)
  • (bicepright)
  • (borat)
  • (carl)
  • (catchemall)
  • (chef)
  • (cookie)
  • (corpsethumb)
  • (disappear)
  • (doh)
  • (donotwant)
  • (downvote)
  • (drool)
  • (evilburns)
  • (excellent)
  • (feelsbadman)
  • (feelsgoodman)
  • (finn)
  • (ftfy)
  • (giggity)
  • (goldstar)
  • (haha)
  • (huehue)
  • (hugefan)
  • (jake)
  • (meh)
  • (motherofgod)
  • (nice)
  • (noidea)
  • (notit)
  • (ohmy)
  • (paddlin)
  • (rockon)
  • (salute)
  • (sap)
  • (standup)
  • (taco)
  • (tayne)
  • (thatthing)
  • (theyregreat)
  • (toodamnhigh)
  • (unacceptable)
  • (upvote)
  • (waiting)
  • (whoa)
  • (yeah)
  • (youdontsay)

HipChat for Mac 3.1 – Meet the New chat button

9 months ago Elena Gorman 42 Comments

Adios, lobby

In this Mac release you’ll get a new design for finding your teammates and public rooms from our New chat popover button.

New HipChat chat button

Meet the new chat button on HipChat

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.

Begin typing to find the right person in the New chat dialog

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.

Download the latest Mac app

 

What do you think? Let us know in the comments :)

Meet the new iPhone and iPad apps: faster, better, iOS 8ier

11 months ago Jeff Park 12 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.

A fresh new chat view makes it easy to read your messages.A new home screen makes it easy to find your conversations.

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.

Share on HipChat easily.

Interactive notifications

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.

Stay on top of your messages with rebuilt notifications.Quick reply to messages with our interactive notifications.

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!

Get to know the new HipChat

12 months ago Jeff Park 109 Comments

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

The new 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.

Emoticon autocomplete

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.

Say things faster with Emoticon autocomplete.

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.

The local time of your colleague is listed here.

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.

Never miss an unread message with unread (and hidden) message counts.

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.

Updated status icons make it easier for all people to use HipChat.

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.

A much improved search is in the new HipChat for Mac 3.0.

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.

New HipChat app icons, take two!

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. 

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:

The new NEW OS X icon

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.

Winter is coming — HipChat Game Of Thrones emoticon pack!

1 year ago Jeff Park 11 Comments

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) – (hodor) | (tyrian) – (tyrion) |  (jaime) – (jaime) | (ned) – (ned) | (jonsnow) – (jonsnow)

 (daenerys) – (daenerys) | (joffrey)  – (joffrey)| (tywin) – (tywin) | (arya) – (arya)

Enjoy!

Help us raise money for charity (and win a system-wide emoticon)

2 years ago Elena Gorman 1 Comment

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

  1. Place your bid at Charitybuzz.com.
  2. If you win, our co-founder, Pete, will help you with your design.
  3. 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.

The cause

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.

Inspiration

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…

So let’s merge forces to raise money for a great cause. The auction lasts until February 13th. Bid now!