Why Wireframe? It’s part of how I design

Well I’m no UI designer.  I’m not a graphic artist but I’m picky.  I’m picky with how things are laid out.  I want to ensure that every user interaction with everything we do at Shugo is pleasant.  Sometimes I succeed (I think), sometimes I fail.  Either way, I consistently try to provide simple and pleasant experiences for our Shugo users.

Why? Cause I personally get a bit po’d when I visit a site and I have absolutely no clue what to do, where to click, what the process is, etc…  Maybe it’s my feminine side coming out — or maybe it’s just a bit of OCD (not that I’ve ever been told I have it).  I consider myself a pretty advanced web user and when I can’t figure a site out, then I assume it must be really really bad.

One thing I’m a big believer in though is a feedback forum.  Whenever I design a new UI or process, I immediately try to get it in front for others to see.  Sometimes it’s not 100% finished, but having others see the madness in my head early on in the process helps streamline and improve the overall look and feel.

Easy, Simple, Clean, Professional, Fun — these are the words I live by when creating my designs.  If I can achieve the majority of these, then I think I succeeded — but I won’t know until I get it front of some users.  Luckily at Shugo, we have a core group of clients who are a godsend.  Truly they are — they have helped shape a lot of what we do and always share with us their honest feedback.  If things suck, they let us know and we immediately try to improve them.  If things are good, again they let us know which helps reinforce we are doing the right things and have made it easy.

So how do I go about my business and create designs? It’s actually a rather simple and comical process.  To start, I write down on a piece of paper all the potential workflows that could occur within the process I’m looking at.  There’s always the simple “happy” path — which I hope 90% of the users go through.  That’s actually the easy path to complete and design.  It’s the sad paths that prevent the challenge and where I try to focus a good bit of time.  Why?  Well the sad paths are where things could go wrong — where validation fails or a potential “error” could occur.  If that experience is unpleasant, then instant frustration sets in on the user.

Once I have my workflows written down, I open up my wireframe/design tool of choice: Visio.  Yes, Microsoft Visio.  See I told you I wasn’t a designer.  To me, Visio is just a tool to not only create  workflow diagrams, but simple and easy user interface designs (or as most people refer to them: screens).  With Visio, I look at each workflow I’ve written down and draw out screen by screen.  Dragging and dropping textboxes and labels on the drawing surface.  Ensuring that I have our client’s branding sprinkled throughout (I use “Contoso” as my client demo company so all my designs have the Contoso branding throughout).

Typically one screen may take a few hours to complete — depending upon the complexity and I’ve been known to scrap a design mid-way through and start over if I don’t have a good feeling.  I try and focus on the core of what the user will be doing on that screen — placing graphical elements where applicable but again trying to keep it clean and simple.

Once all screens are completed, I typically review them internally with our team here.  Rob especially feels the brunt of this.  There are countless times during the day I call him into my office and turn my 24″ monitor around so he can see where my head is with a process.  So he’s the first sounding board — and the first feedback forum which allows me to revise the design before I make it “public”.

After a quick round of revisions, I then make it accessible to that core client group I referred to before.  They are my sounding board.  I typically create a quick survey to go with the design to get feedback on the process.  No more than 5 questions — as I want to keep it short and sweet and just get their overall view.  After their feedback is received, well then another round of revision occurs before we mark that as complete!

So what’s next? Well then the implementation will actually begin.  I’ll take the UI design and translate over into HTML, CSS, etc…  I admit, sometimes seeing in inside a browser requires another round of revision because things maybe just don’t look 100% right or flow the way I intended it to.  That’s normally just small things like font-sizes and colors, container dividers, lines, etc…

To view a current wireframe undergoing client review, you can view our employee self enrollment process into FileGuardian’s check stub delivery system.  This allows an employee to enroll themselves to receive their check stub electronically on check date — they can even view their stub on their cell phone through our delivery system.  The wireframes can be found at http://www.myshugo.com/custom/wireframes/stubenrollment/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s