Browser

I delved into designing in the browser and came out scuffed but unscathed.

In order to get this blog up and running as soon as possible I thought I would just set up some nice typography and then start posting, adding features bit by bit and worry about the design once it was up. Which is pretty much what I have done, except that I ending up trying to make the typography the design, because, I think, there really is no such thing as ‘no design’. I knew that but I thought I could ignore it. Turns out it was beyond me.

Therefore I probably spent just as much time tweaking the visual design as I would have if I had sat down and designed it first and then coded it up to spec. I did start posting straight away so it is half alive, and that is months earlier than most personal projects I do. But that has more to do with setting it up with only half the features I want for it (no RSS or comments at the moment for example).

Anyway, to cut a long story short I inadvertently ended up designing in the browser, as was the fashion about a year ago. It was an interesting experience and I have mixed feelings about it which I’m going to dump down here for future reference.

Bad

I don’t think I played around as much as I would have in photoshop, I’m not sure why. It could be the difference between directly manipulating graphic elements with a mouse or pen and indirectly manipulating them through CSS. Aesthetically, I don’t think it’s as fine tuned as other things I have done. Things have ended up more in the grid. I don’t think I was focusing as much as usual on how well things were working aesthetically, fine tuning and asking could this be better?

In the browser I think I adopted more conventional shapes visually, and was more reluctant to make radical changes and throw it all away. I was already thinking around how much effort would it be to change something, instead of just doing it and then cursing myself later on for how much work I’ve created. It made me a bit lazier I think. And the gauling thing is I don’t think it was any faster design wise.

Good

Parts of this design are more successful because they were cooked in the browser I think. Elements like what something look like scrolled half way down a page for example became apparent really early on.

The biggest plus was that it really bought home the reality of what a design looks like with browser rendered type. And since this design relies solely on type for its aesthetics that was massively important. There will be a whole other blog post about that later on. Type rendering really is the single biggest defining aesthetic factor for a visual designer working on the web I think. I have a horrible feeling that this is what @bobmedcalf tried to tell me years ago and that I didn’t listen to him because It thought he was just practising being a miserable northerner.

So …

Meh to design in the browser for me. I do think that deciding your type needs to be done in the browser, and that once a design is implemented it needs to be reconsidered once assessed in the browser, as does all implementation of anything for the web, but overall I think it makes you (or me at least) less likely to push technical considerations, to experiment & to be successful at fine tuning. I think I became over focused on implementing the design and not focused enough on the user experience of the blog itself. You know what? I never know how to end these things.

This post contains questionable information about: ,

Insight

In the margins of my meeting notes I often jot down observations of my understanding of finance and user experience. I share these now.

meeting notes

meeting notes

meeting notes

meeting notes

meeting notes

meeting notes

meeting notes

meeting notes

meeting notes

meeting notes

meeting notes

This post contains questionable information about: , ,

Mumble Strategy Mumble

Good design needs strategy that is more than just a bit of jibber jabber between people with marker pens.

As a result of the recent discussion about design process on my current project I’ve had to give some thought to design strategy and how to talk about it with the business.

In particular the value of having a strategy documented as opposed to just articulated amongst members of the design team.

We work in an agile environment which means we try to be documentation light (See this excellent post on that subject, from Smashing Magazine of all places) so there is a natural inclination on the business/dev side not to use any sprint time for documentation that doesn’t add directly to that sprint.

I won’t go into the full discussion here, or the oddness of needing to develop a strategy to develop a strategy but it seems like a good opportunity to share some bullet list level reasons that developing and documenting a strategy adds value to a project. First of all it might be helpful to specify what I mean by a design strategy.

Working Definition

We define a design strategy as the design principles we intend to use to deliver our business goals, and how these will be implemented. Every design decision is expressed in terms of its place in delivering the results necessary to achieve a particular goal.

For example for software to support sales people in a financial organisation:

  • Business Goal: Be profitable
  • Supporting Goal: Create situations where client wants to trade with us
  • Business Strategy: Be first to client with trade idea

The design strategy to deliver this might be:

  • Design Principle: Enable salesperson to get idea to client from any place, at any time
  • Supporting Principle: Ensure sales person can put an idea or material supporting an idea in front of a client with the minimum amount of system interaction possible.
  • Example Application: Sales people often use new articles to initiate a conversation with clients and to support sales ideas. A possible application of this strategy might be enabling a salesperson to open a chat window with a client from a news item they are viewing with one click. The chat would automatically be populated with a link to the item. This simplifies and speeds up the workflow of opening a chat window from a separate menu and then switching back to the news item to copy the link and then switching back to the chat to paste it again.

6 Reasons

It may seem like a lot of work for a fairly simple interaction design decision, but by framing our decisions in this way we are creating several advantages:

  1. Better Decisions – In conjunction with other UX artefacts that spell out our understanding of users (such as personas) we make sure that our decisions are focused on the right business problems and are decisions that are relevant to the types of users we have.
  2. More Transparent Decisions – By documenting both the rational for our solution and the user environment we are delivering our solution in our thinking is transparent to the business. It can be challenged early if we are working from incorrect assumptions or going down a problematic path. We also now have a framework for keeping debate over design decisions focused, increasing the probability of decisions being made based on good design and business principles as opposed to internal politics or short term vested interests.
  3. Faster, Cheaper Design and Development – Because this framework allows us to make better decisions up front and deal effectively with challenges, there is less time spent in endless design reviews and less design work that needs to be rethought further down the line. This gets design delivered faster with more room for considered thought and exposure to the business and users.
  4. Better implementation – The responsibility for a good user experience is shared across the whole team, not just in design. By making the strategy transparent it can be used across the organisation to inform the delivery of our desired user experience informing (for example) development decisions, sales decisions and project planning decisions.
  5. More (and more focused) Innovation – Working to a strategy keeps designers focused on the bigger picture when working on the small details and allows us to design proactively as opposed to reactively. This creates opportunities to think about the whole solution and leads to an environment where designers can innovate, constantly challenging if the solution is a good as it should be. (See Brendan Nelsons excellent Grid Iron vs Football metaphor here for more on this.)
  6. A Clear Message of Intelligence and Value for stake holders – As well as leading to better and faster design a clear strategy makes it easier for the business to show value to their stake-holders. They can demonstrate that they are making good, innovative and informed decisions. A good strategy links every decision back to the business goals that created the need for your project in the first place, and anchors those decisions in the reality of your actual users.

So … very businessy this post, but kind of important. If as a designer you’re invested in doing good work a strategy is vital for creating the conditions to do it. It’s been my experience that a strategy that is under the radar, articulated by designers but not shared with the rest of the team isn’t enough.

This post contains questionable information about: , ,

Fanboy

I wouldn’t describe this as a boast, because it’s not really an achievement of any kind on my part, but I am finding it difficult to suppress telling everyone I know that I got this.

I can’t even figure out why it feels so cool, except I really love this guys work.

Tweet from Erik Spiekermann

Naked

CSS incomplete, pink skinned, red cheeked, panting, sweat soaked, chubby glory.

As part of the re-launch of my portfolio, and my desire to have a blog more manageable for a Dad of two than the never updated Dlod with all it’s custom illustration shenanigans I’m starting up a short form design blog here. I’ll eventually integrate it into my new portfolio.

Since I’m safely ensconsed in a contract at the moment I’m leaving it live and naked while I build it so you get to see it in all it’s CSS incomplete, pink skinned, red cheeked, panting, sweat soaked, chubby glory.

This post contains questionable information about: