UX

Site and application planning examples.

Clariture Health Sketchnotes

Sketchnoting has become a regular part of my discovery and ideation phases. The act of physically writing onto paper stimulates both sides of the brain which helps burn in the ideas being tossed around. They are part brainstorming, part note taking, and a lot of collaboration with stake holders who I encourage to jump in and start sketching themselves.

One use of these is to get key concepts down as a reference while I’m pushing pixels. As I’m listening to the brief or doing research I’ll doodle when coming across something important. Nothing too specific needs to be on the note. Just key words or visual representations of thoughts. The second and possibly most beneficial aspect of sketch noting is that it seems to get the creative juices flowing without being committed to a single idea. I’m far more likely to explore a left field idea on paper than I am to spend the time in Sketch making it “look real”. It’s faster and cheaper to use a pen and paper in the beginning.

The following are real world notes made during my most recent project at Clariture Health.

Why I Switched To Sketch

dribbble_1x

The Low Down
I’ve been doing presentation layer design and development on corporate web sites since 1996 when I lead small team on the first Toyota.com. That was a lifetime ago and a lot has changed. The thing is… some of my tools hadn’t. Back then we used HTML 1, inline Javascript, Perl middleware, and Adobe Photoshop & Illustrator to crank out assets. At the time those were the best tools for the job. The landscape has changed a lot since then. If I told anyone that I was building anything the way I did in 1996 I’d be run out of town with one exception… Adobe Photoshop & Illustrator. Eighteen years later the majority of classrooms are sending designers into the world with a new set of expectations and techniques but armed with the same basic tool set, Adobe Photoshop & Illustrator.

Adobe has kept up pretty well by adding features and acquiring plugins to meet the needs of a growing software development market but at their core Photoshop & Illustrator are not dev tools. They are photo editing and illustration tools that have been adapted to design and build software. Instead of doing one thing really well, they try to cover the needs of photographers, print designers, web designers, production artists, illustrators, developers, etc all in mega-packages or “suites”. Consequently, we now have one of the most complex, feature packed, and bloated software packages around. Unless you have all of those jobs, and I have maybe three of those, you’re going to end up using about 1/3 of the software that you pay a lot of money for. Why? Oh, because it’s the “industry standard” with a new pay per month model. Pfft

Enter Sketch into my life. In 2013 I found myself building a small iPhone app and figured I’d try and use some more modern tools. I’d heard a bit of buzz about Bohemian Software’s take on a design/production application made specifically for crafting software. That’s right, it does one thing… really really well.

This is where I begin a list of features that have not transformed my work flow, they have fit into my work flow like a hand in a glove.

Object Based
I loved Adobe Fireworks because it treated pixels the way Illustrator treated vectors, like objects. Sketch carries on with that tradition. This allows me to build style guides by building usable libraries of buttons, panels, all that UI goodness that apps need to gather and spit back user data in a human digestible way.

Every shape, bitmap, or text item in a Sketch doc is an object in the layer list. Everything is treated the same way whether you want to transform an element or edit a path within it.

CSS Friendly Inspector
Sketch knows that the foundation of a modern presentation layer is CSS3. If I make a gradient, drop shadow, or border combination in Sketch I know that I can export it directly to usable code. No more designing and hoping I can figure out how to make it so.

Sketch BetaScreenSnapz002

Symbols & Styles
Okay, this is hardly “new” but it’s still a life saver. I specialize in Lean UX/UI so I typically build things with an agile team. That means that I’me designing and coding as features are built. This allows me to iterate at rapid speeds which can often be a pain in the ass. The UI never looks the same as it did in version one so it’s imperative to have an efficient way update previously designed and exported elements like buttons, navs, etc.

Pages & Artboards
Mobile first, desktop first, whatever… Sketch allows me to place any size (mobile, tablet, desktop) artboard next to another. This allows me to design for all of those formats at the same time. Game changer!

Sketch BetaScreenSnapz001

Exporting
This is the easiest and most useful method for exporting items that I’ve ever used. With one click I can send multiple sizes (retina screens), multiple formats (SVG!), from any page in the doc.

Mirroring
Sketch takes advantage of Apple’s Airplay API to send an dartboard directly to another device in real time. This means that I can see my tablet layout on my iPad while I’m working on it… without exporting anything. As I change the layout on my screen it’s changed on any device I’m connected to. Yes, I can connect multiple device at the same time.

Invision, I’m a fanboy!

invision_logo

I’ll be honest. I’ve kept away from any UX service that feels the need to advertise heavily. I figured that you either have a good tool or you don’t. Well, I was wrong. These folks have been adding feature after feature steadily and I do my best to work it into my flow as much as possible.

What caught me by surprise was how good Invision is beyond clickable prototypes. The commenting, version control, and auto updating of screens is perfect for reviews of still screens, dev notes, and clickable prototypes. This makes it the perfect flow for input by all the stake holders during keys points of the design process. Any agile project manager knows that the days of throwing a “perfect” design over the wall and getting back that amazing app is long over. It’s about delivering a clean and rock solid MVP and then iterating your way to glory. It seems like the Invision crew have a very clear understanding of that reality.

Favorite Feature
File syncing is the bomb! Seriously, this is such a game changer for cranking out multiple ideas lightening fast. I simply use the name my layers/art boards, save the file into the Invision assets folder, and it extracts the files from that source and imports the screens into a project (PSD and AI only at this time but Sketch is around the corner). No more logging in and uploading through a browser. I save and let people know to review. That simple. 👊💥

Update
Sketch file syncing is here! ZOMG
I literally open the file, make my changes, save the file, and it’s all published to the Invision project. Sections, comments, etc are all preserved and the old versions are archived. Revisions, ideation, platform versions… whatever… have never been easier for me. This single feature (which is actually a full scale app in itself) allows me to focus on design instead of process. Love it.

CloudForge Info Architecture

In iterating my blog/portfolio I realized that I was missing a basic Information Architecture example. One of the very first tasks when redesigning the CloudForge application was redesigning the main navigation. This was more than just layout. This was the task of really figuring out a better way to group, extend, and display the major functions of the service.

Remember, the assignment was not to create a new product from scratch. We had to design a new UX while carrying thousands of existing users over to the new application experience. This meant implementing new ideas without leaving our current user base at a loss for familiar UI/UX.

Original Navigation Scheme

cvs-dude-project2 The CloudForge came from a product called Codesion… same service, different platform. The original navigational scheme was based on tabs grouped into primary buckets; Dashboard, Projects, People, Publisher, Services, and System. At first glance this seems to be pretty sensible and it worked for years. The problem is that when you decide to go after new users in a more savvy market the paradigms break down.

  • Dashboard: Makes sense.
  • Projects: The heart and soul of the application. People tend to think in terms of Projects so let’s keep this.
  • People: Hummm… A bit vague. Are these users, admins, managers, customers? Who knows? We have to click and investigate in order to find out. This breaks some of the basic UI rules of being predictable and perceivable.
  • Publisher: This is actually a service that pushes code to various outlets.
  • Services: Wait… Isn’t publisher a service? Are they different in some way?
  • System: Again, the title is a bit vague. You mean system settings? You mean the whole CF system or one of the service systems?
  • There seems to be two levels of navigation without a clear demarkation of the difference. “My Settings”? Aren’t all the settings I’m making “My Settings”?
  • Aside from the actual architectural schema, the aesthetic looks like it could use a major upgrade from the tabs metaphor.

Imagining a New Organization

Main Nav
My first step was to take stock of what items are really important to a given user. The original seemed to look at the navigation from the perspective of the engineer building it. I wanted to approach it by asking “What do our users do now? What do they want to do? How can I get them there faster? How can I introduce them to other features without creating confusion?”

The answer was to create sub-buckets within larger buckets. For instance, instead of “People” we have an “Admin” bucket with the first sub-bucket being management of users, groups, etc. It’s like putting the people tab inside of a parent. How do we implement this?

From here I can run it by product and see make sure that it’s meeting all of the business goals. In this case the “Services” section drives folks to any new services, paid or free, that would complement their needs.

Implementing a New Navigation

menu
Finally, Bootstrap gave us a modern drop down menu scheme which is more aesthetically pleasing and WAY more extensible. We can simply fit more options in the drop downs than the strictly horizontal tab device.

Initially I’d considered icons for each menu item but I quickly realized that we’d be up to our necks in icons. Now if we ever want to set an item apart from others we can use color/icons (make “Billing” red when over due for instance).

In the end we have an architecture that’s simpler to read, faster to navigate, and way more extensible. This makes happier users, engineers, and product owners.

CloudForge Lockout Mobile App

lo-isoThis is an idea I came up with a year ago but didn’t find the time to make a solid pitch to CollabNet management. I’ve recently taken the time to run through some ideation, explorations, and designs.

Whenever the idea of doing a mobile version of CloudForge came up there was usually a rather lukewarm reaction from he product owners and biz dev. The nature of the service simply did not lend itself to a mobile experience. We’re talking about IT in the cloud which takes a lot of serious decision making, analysis, and careful action. Mobile seemed so “on the go” to an organization with roots in SVN.

There was this one use case, though. Something that came out of the Customer Success department calls. There was a case for making it easier to lockout users when a vendor or employee was no longer on the team. This was the one instance when an admin was out to lunch and suddenly needed to rush back and start locking accounts. I thought that maybe a mobile app that did one thing really well would trump an app that tried to address even half of the options available in CloudForge. What if we made an app that just let you manage access permissions for users? This would address a known user pain point, start moving the service into the mobile space, and start getting the users hungry for more mobile access to CloudForge.

lockout-use-case-1 cloudforge-lockout-value

 


Ideation

Pulled out ye olde wipe board and started throwing out ideas. Yes, I keep a wipe board in my bag at all times. I’ve made the mistake of skipping this step in the past. The sooner I start running into issues, the better.


Information Architecture

lockout mind mapLet’s start getting organized on exactly what this app will do. I broke it down into three main actions; lock, unlock, and reset.

Lock = shut out, no getting in, you’re done!
Unlock = Oops! Ok, you’re not so done.
Reset = Locked out until you reset your credentials… just in case someone knows another user’s credentials. It happens.


Wireframes


What you’re looking at here is a version 2.xx. As I ran the initial wireframes through some guerrilla usability I came across some issues. In fact, I ended up running into a menu selection issue on this version. Lemme know if you see it. 😉


Mock Ups

I tend to think of each step in the UXD process as a further exploration of the previous step. As I’m laying out a mockup I’m still open to feature ideas that did not exist in the wireframes. In this case there are four new ideas on the dashboard that did not exist on the wireframes.

explanation

  1. The “New Locks” feature which would let the admin know that someone locked a user outside of this app.
  2. Ability to hide/show the graphs, the ratio numbers (e.g.: 5/20), etc on the slide out controller.
  3. Displaying the percentage of a node as a graph within the node icon itself. The green areas indicate that less than 50% of the total are locked. When the total hits 50% then the graph goes red. I’m thinking that a third state of yellow is not truly helpful.
  4. A flip out filter control set rests at the bottom right. I like to indicate that something can be swiped. Exploration is great but I still prefer clearly marked functionality with this audience, engineers and product managers.

CloudForge New User Experience Map

experience map

An example Experience Map done in the traditional group setting.

This is a visual map of an exercise that we did early on. The idea is to gather the over all user story into a narrative journey that highlights obvious pain points along the way. People doing user research can use this as a model while product managers/engineers use this when forming plans. I actually find this circular representation far easier to digest than the traditional linear model.

You can see from the map that we’ve assumed pain points in five areas. Those are the areas that we would then try to focus on coming up with solutions for as those are possible points of losing a customer forever.

Personally, I’m not a fan of always getting the whole team into a room to make decisions. In the real world it’s not always efficient to put work on hold for even an hour. However, this particular exercise is staggeringly important as it sets the tone for most of the user centered decisions you’ll be making for the life of the product. So for this exercise I’d pretty much insist that EVERYONE be there, not just the stakeholders.

If I had to pick one tool… wipe board.

Wipe Board

You’ll have to pry it from my cold dead hands! More than Photoshop, Sublime Text, or even Balsamiq (which I use A LOT) this wipe board is the most useful tool in the box. It never autocorrect embarrasses me, runs on it’s own power, and can be used anywhere.

I’ve also never really liked paper. I just don’t. Give me a full sized wipe board and a new set of multi-colored markers and I am home. Since I do a lot of work on wipe boards I’ve learned to use Apple’s My Photo Stream. Snap a pict of the board and it’s instantly on all your devices for review. Sometimes I even throw stuff into Pinterest from My Photo Stream. It’s faster than doing it from the Pinterest app while in a session. Try it. You may like it.