Open Discussion - Branding Self Service #JNUC 2014

emily
Valued Contributor III
Valued Contributor III

Hi everyone! I'm very much looking forward to talking about the workflows, benefits, and Photoshop-funsies of branding the Self Service app. I'll be discussing some of the benefits of branding SS, a thorough walkthrough of how to actually make the SS app look like it belongs to your org, and some tips and suggestions for making the most of SS.

I thought I'd open up a thread here with any questions, ideas, or thoughts in general you all had about branding self service. I've ran into a few people that said they've followed some of the walkthroughs on my blog and seen the benefit of branding the app, and am interested to hear about other folks that may have done the same.

Throw your thoughts at me, I'd love to hear them and incorporate some of the hivemind's thoughts and ideas into my sesh!

24 REPLIES 24

davidhiggs
Contributor III

I had thoughts on branding Self Service, it makes sense if you want to present a custom enterprise resource portal. It's important that users recognise that this is a secure company resource, not something that could be confused with various other software delivery systems.

However for those utilising Self Service for iOS as much as OS X, it's not ideal to brand one and not the other. Personally I would definitely welcome a JAMF supported mechanism for branding on OS X.

How have you gone with keeping SS customised with JSS upgrades? What has been your biggest issue with this customised approach?

Thanks!

emily
Valued Contributor III
Valued Contributor III

So admittedly we don't manage an iOS devices, so my experience with the iOS Self Service app is incredibly limited. It would be SUPER COOL if JAMF had some kind of portal built into the JSS that allowed you to churn out your own customized apps for both iOS and OS. I'm not sure if that's something on their radar, but the streamlining of imagery in the most recent updates to the OS X Self Service app shows they are conscious of appearances.

I've been toying around with ideas of automating the branding of the app, but I'm not quite there yet. I basically create the imagery i need and save it locally. With each upgrade I download a copy of SS and evaluate if it has changed significantly between releases. If it has, I throw in the new imagery and re-deploy. If not, I don't re-deploy. If I don't re-deploy, the only images that need to be adjusted are the ones on the JSS server (the login, and the stylesheet if you change the color scheme).

I'm definitely planning on discussing some of this tomorrow!

ben_hertenstein
Release Candidate Programs Tester

I would like to add some sort of branding to the self service. The native icon is foreign to our staff/students (no matter how many times I tell them about it). By switching to our school logo I hope that a familiar looking picture will cause/help them utilize a little more than never. The Help Desk kids use it, but we are also still in the first quarter of using Casper / Macs for 1to1 at our school. Excited to go through your notes later on.

mm2270
Legendary Contributor III

Good talk Emily!
Just to reiterate how important it is to make sure to correct permissions on any files you make changes to with this process (which you mentioned a number of times), I recently began experimenting with branding our Self Service where I am. For now its limited to a copy on my own Mac. But initially i ran into odd stability issues after making some of the changes. The app launched and worked fine most of the time, but occasionally when running a policy would inexplicably quit on me. Turned out there were some resources I modified that I failed to make the necessary permissions adjustments to and the app was likely just having trouble accessing them, even though it was running under my account. So, super important to make sure you make the permissions match on edited files to what they are in the non edited version.

Also, for anyone interested, there are a few other graphics that can also be edited if you really want to go hog wild with this. The ones Emily covered in her talk are definitely the essential ones you really should target, but the rectangular area behind the progress bar (its a yellowish gray by default) can also be adjusted, or, in one experiment I did, completely transparent! That's an interesting look. As well the forward, back and home buttons can all be edited to look a little more modern, a la iTunes for example. But those all have three graphics associated with them. the normal buttons, the disabled (greyed out) version and a pressed version. Its not terribly hard to create all those (they are clearly labeled inside the app Resources folder), but if you want to adjust those and need help. talk to a graphics savvy person in your org.

david_yenzer
Contributor II

Just a side thought I had, working in a K-12 environment - though I could probably muck my way through creating or updating a custom icon, it's not my forte and I could probably have our journalism department folks just have their students get involved and whip up a custom icon for us. I don't know if I'll go that route, but it's at least something to consider.

emily
Valued Contributor III
Valued Contributor III

YES! There are all sorts of fun icons and other areas of Self Service that you can play with too! I've been debating changing the yellow-gray to a blue-gray and maybe adjusting the home button. You can really skin this to look totally different with some time and patience.

Thanks, @mm2270!

emily
Valued Contributor III
Valued Contributor III

I'll also throw out there that there are easier ways to make the .icns you need, which is really neat and a few people have mentioned to me. Basically, you copy the image you made, paste it into that Get Info window, then copy that new icon in the Get Info window and voila! .icns with layers and whatnot. Super simple. I like compartmentalizing and find that using tools makes presentation screenshots easier, but the above is doable too!

emily
Valued Contributor III
Valued Contributor III

Someone during the session asked about a Photoshop template for the Self Service logo, so I've got one available to share with folks that are interested.

external image link

So above is what the PSD files is composed of. I labeled the layers so you'd be able to parse out what you need.

- The very back "original logo" layer is from the PNG I grabbed from the JSS, with the color bits taken out. It's nice to have as a reference.

- The "Main Solid Circle (BG)" layer is just a big white circle, made to be the same size as the original diameter of the loginLogo.png.

- The "Gradient Detail" layer is the gradient used to give the logo shape. If you keep your logo base white, this should do nicely for your logo if you want to keep the shape and dimension the same.

- The "Logo" layer is the original Self Service logo, scraped off of the original PNG. It is there for your reference, so that you can gauge sizing whatever you add to this logo against the original. (Honestly, I eyeballed the placement of the V in my org's icon, because being centered looked funny for the V. Use your best judgement when you add what you want.)

If you're not familiar with Photoshop layers, you can click on the little eyes to hide or unhide a layer to see things in different contexts. I locked the main circle so that it didn't get moved accidentally while making adjustments and testing, but you can easily unlock it by using the Lock icons that appear above the layers.

Once you're happy with your image, go to File > Save for Web and export as a PNG file with transparency.

If you have questions about this, I'd be happy to answer, though I can't do any of the Photoshop fun for you (unless you want to pay me!).

Here is the link to the PSD file: https://app.box.com/s/lxn9jdvwz5v1fbla6vz0

This is offered as-is, etc. I hate legalese but I think you get the idea.

TBenolkin
New Contributor III

@emilykausalik First off groovy session! Lots of great content that I hope to melt into!
Question..
Have you, or anyone, worked with any animation in P.S. or other software and implemented them into Self Service icons? I wanted to ask about Animation specifically for my Education environment..
Maybe an icon surrounded by a burning inferno might catch some attention and reduce my over the phone hand-holding.

emily
Valued Contributor III
Valued Contributor III

Back in the day I made animated GIFs for Angelfire sites in Photoshop…

Just kidding (kind of).

I'm not sure if I've ever seen an animated icon for an app before!

emily
Valued Contributor III
Valued Contributor III

A little bonus thought for folks interested in really diving into branding… In /Library/Application Support/JAMF/bin is Management Action.app. You can use your icons to customize that app and deploy it with a policy so that when the Management Action notification pops up it uses the same icon and matches the rest of your branding.

franton
Valued Contributor III

I'm increasingly convinced from all of this, that this is worth a major feature request to embed all this into the JSS.

mm2270
Legendary Contributor III

@TBenolkin
I'm pretty sure there's no way to add an animated icon to Self Service, or any other application really. The OS doesn't really support that in the Dock or Finder.

I think the recent addition of badging the icon in the Dock is a good attention grabber. Most users comfortable with the Mac are well trained to notice number badges so it should catch their eye.

That said, I have a script here somewhere that I wrote almost 2 years ago now that will pop up a small cocoaDialog window directly over the Self Service dock icon. No matter where it is in the Dock the small window will position itself right over the icon. (Unless the Dock is on a secondary screen) I never ended up using it because I started using a branded version of terminal-notifier instead.

But if the script is something that interests you I'd be glad to post it here somewhere.

emily
Valued Contributor III
Valued Contributor III

I've been debating setting up test JSS instances on a Windows and Linux VM to see how the files are structured there, but that seems kind of silly. If any of you know where some of these images live within a Windows or Linux-hosted JSS please share with the class if you're so inclined. :)

elliotjordan
Contributor III

@emilykausalik Asked and answered! This is a huge help. Thank you.

devibeck
New Contributor III

You inspired me to add a lot more links to our Self Service. We use gmail for our email - so I created a document "form" and named it "Self Service Suggestion Box" with a simple "Suggestion Box" icon. I added it as a link in Self Service so that our users can request links, apps, etc - anything that would they would like to have added to Self Service. The only have to fill out a few responses, like what & why. We will monitor the responses and maybe add a few things we didn't know would be helpful for them. Thanks again for such a great session.

emily
Valued Contributor III
Valued Contributor III

@devibeck That's great to hear! I'm glad you found it helpful.

adamcodega
Valued Contributor

So I believe the "official" feature request is here, meaning so we don't have duplicate requests.

Shameless plug: I wrote up my thoughts on self branding on my blog to help drive the point home. I'm considering a follow up post on what the UI could look like, to help grease the feature request through. The better the write up the easier it is for them to implement. Hey, since coming home from JNUC the feature request has gone from 1500 points to almost 2000!

asegura
Contributor

@emilykausalik do you have an email addresses I can send you screenshots of the directory on a windows server hosting the JSS? It appears this forum doesn't allow for PM's.

emily
Valued Contributor III
Valued Contributor III

Oh man, DM'ing would be super helpful! I'm on twitter @emilyooo and on LinkedIn, we can connect there perhaps for some screenshot sharing?

asegura
Contributor

Sent you a request via LinkedIn and I'm following you on twitter at @Lane_Splitting

scottb
Honored Contributor

Thanks for the presentation and info here!

One suggestion - a generic one for JAMF - when filming these, the moderator repeating the questions would be great. I could not hear many of them and while you can sometimes figure them out based on the answers, it would be nice to have either the audience mic'd or the mod repeat.

Thanks again!

emily
Valued Contributor III
Valued Contributor III

@boettchs I think we were supposed to be doing that but weren't :x bad on us!

lkrasno
Contributor II

Curious if anyone has customized their Management Action.app ?

or might like to UPvote https://jamfnation.jamfsoftware.com/featureRequest.html?id=1983