Designs

Specific examples of branding, UI/UX, and basic widgets.

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.

Biz cards that I don’t hand out?

cards

Got my new b-cards! Went with a mini size because they are easy to hand to someone. I keep them in a cool little sliding door case that’s hooked to my bag. 👊💥!

The QR code contains my v-card so when you scan with a mobile device it just creates a contact with the info on the card. That way you don’t even have to keep the card. What?! Yep, I’m not trying to put more paper into the trash so why keep the card if you don’t need it? This gives the people that I connect with a choice that’s best for the way they live and work.

Coupa Widget Redesign

cartfix

Fig. 1

“Coupa’s cloud procurement software application is a powerful procure-to-pay system that brings consumer e-commerce shopping ease and bottleneck-busting functionality to the procurement workflow.” – Coupa Web Site

Basically, the system lets you buy stuff in bulk for your business. Items like computers, staplers, etc are offered at a discount using an interface that’s more pleasant than most terminal looking systems installed in most traditional businesses. An added value of using Coupa is that you can easily have access to items that are not already inside your company “stock”. For instance, if I add a Lenovo laptop to my cart the system let’s me know that there are related items found on partner sites. These sites are not inside of the Coupa framework but they are affiliates. When you click on one of these items you are leaving the Coupa site with a token to associate the impending purchase. It’s a clever system but it has some issues.

The screen grab (Fig. 1) is an approximation of the initial screen I was shown by the product owner. It shows a widget with related items when you add something to your cart. It list the raw item name and the price. I was asked if I had any ideas to make it “less sucky”.

fix

1. If the product owner had not explained what that section at the bottom of the page was I would not have known what that section was intended for or even made a connection between the action I had just completed. A clearly defined section name would allow me to determine relevance quickly.

2. I tend to lean toward establishing relationships with users through “conversation”. This is an established UX method geared toward building a rapport which keeps people comfortable while using the interface. Plain language helps users feel like they understand what’s going on.

3. The text list of items with the prices on the right did contain all of the pertinent information but how scalable and effective is it? Let’s show the user a picture of the item which increases the speed of cognitive recognition. People recognize shapes much faster than words. Putting the list into a carousel uses an established pattern (people see these all the time), allows for an infinite list of items in a finite space, and invites interaction which  increases the likelihood of clicking a listed item.

4. Any time you send someone away from your site it’s difficult to get them to return. Even if they do, it’s rarely in context of why they left. They usually return with a new context. It’s a good thing to let people get what they need but let’s make sure that they understand why we’re doing it and the benefit of the trip. I threw out the idea of comparing the price listed (show in red if higher, green if lower) in an effort to show the value of staying in Coupa. Not sure if that would really work given the situation but perhaps we could show the “savings” in this way. The point is to convey a value for the information listed.

Examining the Flojuggler.com UX

fl

I’ve called out various decisions made on this layout that drive behavior.

Flojuggler is the lifestyle menstrual tracking application designed to track the cycles of multiple persons. I did the entire site design, production, and programming which includes “Facebook style” image management, extensive AJAX feature sets, JQuery UI integration, all on a true MVC architecture. This was also another opportunity to invent a brand from the ground up.

This post is meant to examine the thought behind the UX which I find to be a typical example of my approach to landing, sign-up, and interfaces for consumer focused projects. I tend to lean toward taking the basics and really going hard on them.

The demographic for the service is women (80% of users) and men (20% of users), ages 21-35, with a high level of tech experience and education. We’re really looking at a metropolitan crowd as they tend to have dating habits with high turn over when compared to a rural audience.

fl2

The interface in general is very playful. The icons tend to be VERY obvious representations and over sized. I wanted people to feel “happy” while using it. It should feel like a silly friend just came in and told you that your/your gf’s period is on the way, cracked a joke to make you feel better, then ran out of the room singing.

app

There’s a few things that need iterations but I just don’t have time these days.

  1. Go flat for 2014.
  2. Remove the skeuomorphic icons.
  3. Put the login form in a real form so it submits on return.
  4. Put grab handles on draggable items.
  5. Put an icon in the “My Alerts” section when it’s empty so you know to drop things in it.
  6. Put some custom CSS on the predictor pulldown.

CloudForge UI/UX 2.1

Project Detail 2.1So I had this idea. What if I could go and fix all the things on the CloudForge UI that I think need iterations? Meh…

Project Detail 2.1 is an imagining of iterations on the UI/UX. It uses the updated Bootstrap lib, a more consumer grid layout, and updated iconic treatments.

Flojuggler iOS Explorations

Now that we’ve got an MVP ready to submit to the store, it’s time to start iterating on improvements. The app works, it’s intuitive for the majority of testers, and it even has a bell and whistle (singular) but now we need to make some moves to make it a bit more seductive.

Each of the following are non-functional prototypes and are being used to test before narrowing down any viable ideas. Click on each to read a description of the whys and hows.

Revisiting CloudForge Permissions UI/UX

Choosing a target is the first step in a 5 step process.

This is a five step wizard that assigns permissions to users and groups.

You know when you leave a project and feel like you could have done so much more? Like it’s kind of half done. So you end up having a conversation with someone, showing them the work, and they make comments that give you that “oh yea… why didn’t we do that?” feeling. That happened to me today. Being the OCD kind of person that I am, I couldn’t help but start messing with interface corrections for the CloudForge roles assignment. Hind site is 20/20.

The original UI was very rushed but that’s “agile”. The problem is a lack of iterations. We had delivered a minimal viable product but now this UI/UX needs some follow up.

The thing I really like about this new layout is that it’s responsive in nature. This is something that the project never had as a spec but… it’s 2014. How can a service not be responsive these days?

Screen 1

The idea is that the area on the right would be disabled until you selected a target. This would get people used to seeing something there before it’s populated with data and reduce cognitive dissonance after the transition.

Screen 2

Once the node is selected then it would populate the information area and enable the action buttons. On tablet the selector would narrow. On mobile the entire right side could fall under the selector.