Beyond Boxes and Arrows

As part of honing my UX design skills, I recently started to read and take greater notice of Information Architecture. Two days of reading and I suddenly had that ‘oh sh*t’ feeling.

When a friend suggested putting together a personal portofolio site with some illustrations of interaction design, I knew it’d be a challenge but not for the reasons I’d assumed. I had to come up with three different things not based on an idea I wanted to actually see through. What I immediately decided was one mockup, one prototype and one wireframe.

I chose Fractur for the wireframe. This was a concept from OrthoHack from last November. This is one of my favourite hackathons I’ve participated in because we spent three days with orthopaedic surgeons really getting under skin of the issues, challenges and constraints they face. It was a real eye opener. The complexities were even greater than those from Hackney-o-thon that I did the year before. Unfortunately, the only thing I kept from that event was the workflow for a possible solution. Drawing wireframes from the memory of conversations that took place over 6 months ago is not recommended.

When I did this version below, I was pretty happy with it but then I would be when thinking of Wireframing as simply sketching boxes with no rules applied.

wireframe v1

Four weeks later and after a couple of days of reading up on IA, looking at examples on Behance and Dribbble as well as wireframe kits, I swallowed hard. Why? Because I’d started proactively looking for UX work and had sent the link to my portofolio site to prospective employers for freelance work. I knew it was the weakest link in comparison to the mockup and prototype but looking at it through the lense of this new found knowledge, I can’t say I’d be jumping up and down to respond to my emails either.

I decided to redraw it from scratch. Whilst it would have been quicker to tweak a wireframe kit, I’m a believer to things in its entirety to learn to do something properly. Once you fully understand the rules, then you can break them all day long. Here is the second attempt.

wireframe v2

The main difficulty was trying to consider every possible interaction and scenario without anyone to consult. I also had to be weary of assumptions I was making regarding the user understanding how to navigate around the UI. Basic iPad functionality had been neglected in the first version like swipe and pinch & expand and so on. It still needs some work especially the virtual clinic calendar, it feels and looks messy.

Funny, I’ve now come to realise that ‘designed by users for users’ and other such statements is not a selling point at all, it’s a necessary ongoing dialogue that is key to product development process. From the moment of idea conception, the dialogue begins.