Six Circles - An experience design framework
This ebook has taken far too long to write but at last it is finally finished. The beauty of self-publishing is also the major problem with it – nobody pushes you, you aren’t paid and for all you know nobody will read it once it’s published. I wanted to see how the many different aspects of the book may develop conversations within the user experience community.
Elements of the book have already aged, but the principles continue, even though the examples may not! However, I hope you enjoy the read and I am really interested to know your thoughts, either here or on twitter. Currently it is only an ePub available for mobile devices but if the demand is there, other versions will be made available.
Download Six Circles for Epub readers
(See the comments section below for browser-based ePub readers)
Some accompanying thoughts
In the last year I have seen how the different elements of the Six Circles transcend user experience, into the fields of brand strategy, service design and customer experience. It is my view that in ten years time we will be talking about what we do today in very different terms due to the contexts that we have to design for, using technology that is only beginning to become pervasive in our physical environment. I predict that UX and Service Design will cease to be differentiated, as they will be so entwined it would be too difficult, and potentially inefficient to separate into different disciplines.
I have seen enough of touch and tablet usage, mobile devices, ‘Everyware’ (and even Microsoft’s shift of it’s Windows 8 platform towards the touch paradigm) to feel that we are in for an exciting decade ahead.
Call it the legacy of Steve Jobs, but what he has left us with is a global population who are more instantly engaged with technology than we could have imagined ten years ago. To allow the very young and very old to interact with content through the same device is a stunning achievement, and for the interface and interaction designers to be able to support a richer experience is truly exciting.
Unfortunately companies are still catching up, fearful of failure and what they perceive as risk. Watching their competitors to see who makes the first move but the time for businesses to be brave and bold is now. There is not much time remaining for some businesses to make use of the power of meaningful, rich experiences delivered by brands that satisfy the culture and contextual uses of the users. Those companies that achieve this will simply dominate at a rate that is faster due to the networked society.
But all the talk of technology misses the point. It is the human needs, desires and emotions and their interactions with each other that create our insights that in turn drive innovation and success for companies. These experiences make the difference. It is the quality of experience that is the differentiator for any company in a crowded market.
Solving people problems will inevitably solve business problems. The challenge is to get businesses to believe in it, and trust those to deliver on the promise of user centred design. But with a process that is understood and a philosophy that appeals to many, there is alot we can do to ensure the business world adopts a path to greater product development, that builds on the needs and wants of people at its core.Tweet
Creating Hellogroup.com
Recently we launched Hello Group’s site after 4 years of (let’s say diplomatically) sub-optimal solutions. With the best intentions, getting a site together that everybody in a company will be happy with may never happen. When it is a design centered company this can be even less likely. As it is what we do and are passionate about, we all tend to have an opinion and want it heard. Of course we can’t take all opinions into account, otherwise the project will lack focus, direction and will be difficult to maintain progress and reach a launch date.
Other factors come into play such as content. Where there is content there are firm opinions that go to the very core of the strategic direction of the company and what is communicated externally about the business. The site becomes a vehicle that must satisfy so many factors (and people) that there is always a risk that it will not do anything particularly well.
Direction and collaboration
The realisation of this fact early on, led to us having a core group of UX and visual designers working on the project together, after we had gained a clear strategic and creative vision of what we wanted to say. A day was set aside to see how far we could push the project, and though not all objectives were met it gave us a cohesive view of the design direction and interactive elements of the site.
We wanted a platform that tied together our other digital spaces (Facebook, Twitter etc) and did it in a way that we could easily build on. Once the design was decided we could brief the developer on something that was tangible and easy to explain. There was a lot of iteration and discussion between the visual, interactive and dynamic areas of the site between developer, designer and the UX team. Without constant dialogue the project would have become harder to complete satisfactorily.
We also had to involve the other parts of the business throughout in a way where their inputs would help shape the site but not derail the process of building to a deadline. I have no doubt that not everybody is as satisfied with the outcome as I am, but these issues will be resolved and importantly the site must be seen as a living entity that enables change as we go. It has been designed and built with this in mind.
Below are some factors, or principles, that led to a solution that for our market and our company’s values we feel is the right approach. A large part of the philosophy was realizing the importance of not communicating everything. That what you do not communicate is equally important as what should go on the site.
 |
Simplicity |
Flexibility
The front page is modular, meaning elements can be switched or turned off depending on the need of focus. News is an important part as we often do things beyond client work that are interesting and valuable to know. The main dropdown also allows extra elements to be inserted inside the structure of the site without interfering with the main navigation. Jobs, news and other elements will appear as they warrant the inclusion through the amount of content available to the user.
Interaction
The website works well on the iPad – some content may be missing (Flash based video – which will be changed) but it does not harm the experience of using the site. So designing for tablet usage has enabled us to see what we are producing is beyond the browser but more about the platform. We had to think about a dual way of looking at user interaction. Touching and clicking on elements on a screen have to have a common element of interaction. The areas needed to be big enough, give appropriate feedback instantly, and convey a way of interaction that is intuitive. Expect more in the future as this crossover allows us to explore this way of designing interfaces further.
Personality
Why show our people? Well apart from giving our clients the ability to work out who does what, we wanted people to put names to faces, and to see where they fitted within the company. As we are only a small number of people it is critical that those who may deal with us know who they are talking to and have the ability to get in touch directly. Not least it gives us a human angle. Humanizing the web is something there simply isn’t enough of. We also wanted to show what some of these people thought, wrote or created. The Follow section allows us to have an area that links the other spaces where we occupy (blogs, Flickr etc) and allow us to pour this content into a general area of interest.
Content creation
The platform used by Wired, Mashable and TechCrunch is very accessible and is easy to manage content through a team that can collaborate through the interface. It also allows permissions to be set up that require different user roles to produce and publish the content. A very necessary element of producing a site is to ensure that there are methods to publish live, and instantly, when needed. Wordpress allows this in a way that is supported by a multitude of plug-ins that ensure other concerns (such as SEO and social media) are addressed. Simply put, Wordpress is a free back-end system that helps you run a website professionally. Yes we used extra coding to get things done how we wanted, but the system that runs the ability to add more content is out of the box.
 |
Known issues We use a home made font solution to render Helvetica on many browsers. Chrome manages it the best but Safari suffers on the Mac (though not on the iPad due to the font renderer on the tablet). This has caused issues and will be rectified for the Mac user. Some elements of the animation of the list are a little clunky and these will be ironed out as we go. |
Key people
You will find success in making sure you stick to the goal and remaining committed to it throughout. Setting achievable deadlines and communicating that to the other team members is critical. Technical problems may delay a launch but resource issues shouldn’t derail the building of a site – that’s just bad planning or lack of foresight. Also a creative developer was critical to this being built – his can-do attitude with an eye for details and creative flair ensured we have a site we are happy with, and can improve easily. Without his skill it would have been much harder to achieve our vision for the site.
Also make sure you have somebody who can continually badger people to get things done (if like me you haven’t the stamina to do it yourself). I luckily has a great PM to help and she kept on at the team to provide what we had laid out in the plan. At times you will get disheartened but remember that your ability to achieve the goal is mirrored in your personal belief that it is achievable. Always remain positive and it can be done with dedication and team work.
A site for the future
Conceiving, designing, building and refining a website can be a straight forward process or a challenge that will test the patience of all involved. Thankfully by adopting an agile strategy to design and user experience we managed to have a very clear direction quickly about how the site was organized , and the interaction and visual design was produced in a matter of days.
Content held us up and producing cases perhaps took (and takes) longer than we wish. But often they require feedback from all stakeholders and this takes time. What we do have upon launch is a site that has attracted attention and we are happy with. The best part is it is a platform that works well on tablets and laptops, we can add elements and ensure that we have a medium for communication that supports our demands.
This site represents a new beginning for Hello – and that was a key theme in it’s design. The designers managed to encapsulate this feeling in a look that is fresh, bold and in-keeping with the company. After all the work it is a very satisfying feeling to experience what has been built. The launch is just the start. The evolution of it can now begin…
UX Design Framework – Visual Design
Previously I introduced a UX framework and wrote about the first element – content. This post is about visual design, perhaps the most immediately emotive ingredient to user experience. Seeing is believing, and what our eyes see immediately tells us if we either like or dislike what they are receiving. It has a sway on the other 5 elements of the UX framework as it is something that is very tangible and creates instant feeling in a person. As UX designers we need to be aware of the importance of visual design as a doorway to incorporate the other equally important facets in our work. Visual design, like it or not, is still king when it comes to the first few seconds that a user interacts with a product or service.
 |
Saul Bass, the legendary graphic designer and film maker, described design as ‘thinking made visual’. In many ways visual design should communicate the more complex considerations of a solution in an immediately accessible way.Aesthetic usability Think about a website that you like and there will probably be a good deal of visual design that helps you in understanding its content better, what it offers and how easy it is for you to use. Aesthetic usability is a quality that arguably Apple have made very much part of their product offering. Consider their most successful devices, (iMac,iPod and iPhone) and there is an immediate attraction to getting to know the product, even before you really know what it can do. As there is an emotive connection (one of delight or intrigue) it affords the product a level of forgiveness within the user when the product or system fails. |
User paths for conversion - elements in engagement
 |
This image was shown during Peter Moville’s talk about IA 3.0. What is interesting about it is how he linked this to Christopher Alexander’s text about design in architecture and also Peter Merholz’s essay Metadata for the Masses. In which he highlights ‘desire lines’ how paving is built once you see the paths that people tread.
If we look at online behaviour, user paths give us a solid idea of routes to content, where they return to and where they tend to go next. Human behaviour tends to follow patterns, see this article about mobile phone usage for an example of how predictable we tend to be. Read more… |
Design principles for building user engagement
 |
Luke Wroblewski – Content Page Design Best Practices One of the talks at the IA Summit was by Luke Wroblewski, author of two books and various resources published on his site. If you can see/hear the presentation at this location, I would urge you to do so. There will be something in there I have missed! The content he shared, was an insightful window into how we design pages and how the business requirements of a page may actually work against it. It really reminded me about the mechanics of persuasion, and he highlighted some insights explicitly. The following observations were made by Wroblewski. Read more… |
Being that UX team of one
 |
Leah Buley – How to be a UX team of one If there was an award for the most enthusiastic and passionate speaker I think Leah Buley would take it.Her presentation, How to be a UX team of one was a real hit, at the recent IA Summit in Miami. Anything with cartoons immediately gets my vote. It was engaging and inspirational with the hand drawn elements serving to convey the speaker’s personality and it was a refreshing change to the usual slides. Read more… |
IA and its changing general dynamics
 |
Mathew Milan – The Information Architect and the Fighter Pilot
If you click the image to the left you will go to a response to the presentation by Mathew Milan, that contains the presentation slides with audio and numerous comments from readers beneath it. From my point of view this was the most thought provoking of the presentations because it touches on elements of my design education, that of reflective practice. But it is really important because of the ramifications of Milan’s observations, and the ensuing discussions… |
|
| Read more… |
Designing Web Navigation
 |
James Kalbach succeeds in bringing together the fundamental components that determine great, and not-so-great, user interfaces. The UI itself must always be respected and the author illustrates exactly why in the journey the book takes us on. What the book does is show how this can be achieved, from the past, notably from the present and into the future. The illustrations are in colour (critically important for any design book) and give clarity to the text’s important insights. Read more… |
Living Wireframes using Office Live
 |
The challenge that faces any design project that uses wireframes is that they can easily be snapshots in time and become static. As soon as they are printed or circulated around a stakeholder group they become a moment in the site development’s life cycle. They often can be made redundant due to forces outside of the design project. This can be a potential point of weakness for this valuable deliverable. |
Visual Language 1.0 - BBC layout guidelines
 |
Any web designer or IA will find this document really interesting and high value. It makes you thankful for institutions like the BBC who readily share their research with the public. This openness and transparency is really admirable and only possible through public funding. Find out the style and layout properties for the forthcoming BBC web pages here. |
Design Pattern Libraries - cataloguing success
 |
These serve so many different elements to a website design. To not use them seems a bad mistake. Initially they can help overcome issues about how an element may work on the site. More importantly they clarify the purpose of every element that appears on the page and states the user interaction. |
Wireframes - illustrating design strategy
 |
The powerful thing about the wire frame is that it removes many emotive aspects of design that will cause division amongst clients. There are no uses of branding , colours or elements of graphic interest on a good wire frame. When they are stripped back to absolute functional essentials it is much easier to explain exactly why key elements are placed in certain areas on the page. |
ComputerWeekly.com- An IA case study
|
This was not so much a redesign, or even a relaunch, but more of a resurrection of a site that had become tired, old and ineffective. Its many shortcomings were highlighted with the onslaught of the new generation of sites from competitors that used user-generated content and a more social networking approach to their presentation layer. As this site represented the best of computer related business journalism, it was apt that it should be the company’s first site that underwent a complete overhaul from the ground up. |
IA process defined
 |
After five months, nine different projects and several workshops, presentations and seminars I have finally gathered together several deliverables that define a decent core IA strategy. Of course its based on the three principles of good information design; our users, the context of use and the content that is being served up or requested. |
Parts of the Process
I have just completed a four week project on a large computing website and although I am an IA virgin I am happy with the results. My colleague produced the taxonomy and controlled vocabulary and with the help of the polar bear book, Communicating Design and the fantastic Elements of User Experience, I think I am getting to grips with the dark arts of information design.
Its tricky that the more you read the more you feel impelled to produce increasing amounts of deliverables but obviously time and money are deciding factors here. You must strike a balance. This project has produced 9 documents in total. They are, in chronological order;
- Content Inventory
- Information Scheme (requirements gathering)
- Taxonomy
- Controlled Vocabulary
- Navigation scheme
- Wireframe
- Concept Model
- Site Map
- IA Strategy Report
I feel that they are all crucial to produce a design that is truly user centred. They do rely on quality research data and user related deliverables (such as personas) are critical to the quality of output. Persona led taxonomies are what really underpins the structure in this context heavy environment but more of those later….
What is important here is although two of us did the work, many more people helped create the end products. For a successful team you need to collaborate but you also need different skills in the core group. UCD and information science together seems to be the right mix.Tweet
Collaborate or feel the consequences
After reading this article http://www.peterme.com/?p=536 I was somewhat saddened and the also transported back to a time 7 years ago when I was a lowly web designer working for an information architect who headed up our design team.
She was of the opinion that the surface design was all we were good for, our thoughts concerning interaction of the user with the interface was little more than icing on the cake that she had lovingly baked. She was frustrating, she ring-fenced her domain, no colleague or client could get into her information utopia. Don´t get me wrong, we respected and admired her courage and stubbornness. She usually got her way but she never got user centred design.
Back in the room….yes 7 years on and the old problems seem to still be there. There appears to be a disconnect in IA from a UCD approach. Even in the Polar Bear book we have overtones of how UCD is the poor relation to information organisation. I would like to propose we drop this outlook and the reasons are clear. As more people with different ideas contribute to the information mix we will have to embrace the user, put them at the centre of everything we do and allow their behaviour to permeate through our taxonomies. Let our taxonomies become Persona led and multi-faceted.
Just as IA is reaching its highest point it is in danger of falling flat on its face. I emplore it as a discipline to embrace interaction and interface design. Collaboration is the key to its success as we are on the threshold of implementing processes that are solid and enduring.Tweet
Walk before you run
Agile is the buzzword of the moment. It seems odd that so many large organisations are embracing this web methodology without addressing their organizational structure. To be agile after all requires one to be light weight, nimble and free to move quickly. The term is ironic when so many web teams are weighed down by product managers, brand guardians, marketing teams and business owners. All are absolutely necessary but can hinder effective web development if a confused process is followed.
A user centred approach is also a necessity but can be felt as something that gets in the way. ‘Agile’ wants to produce software that a user values, can interact with and use with maximum efficiency. UCD is concerned with a product that the user wants, even before design and build, and it ensures the user moulds the product whilst it is created.
Personally I feel that Agile often misses a trick, it is not a complete process when UCD is not represented during the development sprints. In other words, if a professional with the user or customer in mind is not present at key stages the project will inherit failings.
I do feel that the principle of Agile/Scrum is a sensible solution, the Beta push can not be denied as a cost-effective and impressively quick way to get your product to market. However, if proper user research has not been conducted to verify the purpose of the product, who it is for, how it should work, then it will not fulfil its potential. Only public refinement will occur in the ‘live’ environment. It may take a year before several sprints are complete to revisit a problem noted in a snag list as long as it is complex.
Real, considered, user data through user interviews, persona creation and prototype testing before build will always result in a better product.Tweet
Content Inventories
This hurts! There is no other way to describe your first job as an IA. Mind-numbing and boring but very necessary to establish a starting point for a site redesign. It may take a week to do but the information you gain from the excersise is rich and from it you can make informed decisions about the direction your site will go in.
After doing two I realised how important these are to any refresh or redesign. Structural problems are obvious and the hidden gems in your site are revealed. With the aid of web analytics you can see the most popular areas. With search logs you can see how a user finds your information. This can also be the basis for your controlled vocabularies once your taxonomy has been created. Use social bookmarking sites to note the tags your user’s are compiling and that you are reflecting the language they are speaking.
Whatever you think about the hard slog of doing a content inventory – stick with it. It probably will be the best research time you spend in getting your site the redesign it deserves.Tweet
