In my last post I discussed designing for Mobile First. But before you can start designing for mobile, it’s a good idea to have an understanding of how users are using mobiles and tablets to interact with your website and consume your content. Although it is true that overall mobile and tablet usage is on the rise, different industries are seeing different usage of these device.
Using this Dashboard Junkie dashboard as a base, I was able to create a dashboard that attempted to answer a number of key questions designers may be asking when starting a mobile first project:
Which breakpoints are most popular on my website
Which browsers are we designing for (and testing in)
What input methods are users using
Try adding it to your Google Analytics account and let me know how you get on.
Only smartphones/tablets will relay their brand and model information to Google Analytics.
Laptops/desktop cannot be identified in such detail.
Tip: Click on the photo/camera icon and you will see one or more pictures of the hardware device in question.
Visitors’ screen resolutions – Top 10
Here you can check out the display resolution (measured in Pixels) of your visitors. This information can be very useful when making decisions about where to place your breakpoints.
Visitors’ favorite browsers
Here you can see the most popular browsers that users are using to view your website. This will help you to identify which browsers to prioritise testing on.
Visitors’ dwell time by device
Here you can see the average page view time by each device category. This information can be helpful to understand which devices users use when completing certain tasks on your website.
Visitors’ mobile inputs selectors – Top 5
Here you can see the input methods users use to interact with your website. You can use the information to make decisions about how to layout your navigation, input fields and button sizes.
Visitors mobile OS – Top 5
Here you can see the most popular operating systems used by your visitors. This information can be really helpful if you’re considering developing a mobile app and you want to know which platform to prioritise first.
I’ve been playing with some of the latest Axure 7 features recently and one of my favourites is the new Adaptive Views feature. Adaptive Views define the breakpoints where you want your pages to switch to a different layout or style. This allows you to prototype in a way that forces you to consider your mobile and tablet experience. Former Yahoo! design architect Luke Wroblewski, coined the expression Mobile First to describe the process of designing websites and other software for the mobile first, rather than last (as can often happen).
Why’s it important?
While responsive web design is not entirely new, designers and developers have often struggled to demonstrate how a responsive site will look on different devices, prior to build. The options are usually to design up every view individually or to prototype in HTML & CSS. The former option often lacks any detail of how interaction will take place, whereas the latter often focuses too heavily on technical implementation and can sometimes overlook visual treatment and design aesthetics.
Prepares you for the explosive growth and new opportunities emerging on mobile today
Forces you to focus and prioritise your products by embracing the constraints inherent in mobile design
Allows you to deliver innovative experiences by building on new capabilities native to mobile devices and modes of use.
Axure allows UX and interaction designers to prototype with both realistic interactions and visual treatment. The outcome is a realistic representation of your website or application in a range of views, for different devices.
How it works
Adaptive views are based on browser/device width and/or height. Axure has a range of mobile and tablet dimensions (in both landscape and portrait orientation) predefined out of the box. Views inherit from one another so a change to the location, size, or style of a widget in the parent view affects its children, but a change in the child view does not affect the parent.
Editing a widget’s text, interactions, and other widget properties affects the widget in all views. The widget is the same widget across views (not a copy) so you only have to update the property once.
While most of the tutorials show desktop being created as the base view that all other views inherit from, I would encourage you to consider using the 320px width mobile portrait view as your base and inheriting up through the spectrum until you reach desktop. This will make your prototype truly mobile first and force you to consider interactions and behaviours that may get overlooked if you settle for a more traditional approach.
The prototype switches views based on the browser size or can be manipulated using the adaptive view icon in the left hand sitemap. I have hosted the Axure Learn example here.
What I’ve discovered
If you have been using Axure prior to version 7’s release this new feature shouldn’t take you too long to get to grips with. It is possibly quite advanced for novice users of Axure, but everyone has to start somewhere.
I noticed a significant performance drop in Axure when using a number of images and widgets across multiple views. I am hoping that future updates to Axure 7 will improve this.
Out of the box Axure doesn’t add a viewport tag like this to its HTML generated prototypes:
In the next couple of weeks I’ll be presenting at a ‘Lightning Lunch’ at Sigma UK on Kanban and how you can optimise the flow of tiny tasks (stories) to make predictable deliverables. This presentation is based on a blog post I wrote some time ago on the same subject.
I’m currently working on a very large Scrum programme that uses a board very similar to a Kanban board, however, we’re not enforcing WIP limits and we only ship things once a sprint. While this in itself feels very fast and very agile to some, it’s not without risks and sometimes feels a little ‘big bang’ release due to the amount of code that is getting delivered in a single sprint. This got me thinking about the continuous test and deployment cycles within Kanban teams as a potential enhancement to our current process.
Kanban doesn’t pretend to solve the problems, but it does allow teams to focus on continuous delivery and continuous improvement. It encourages teams to work as a multi-disciplinary unit rather than as a collection of silos and functions.
I should say that I have only ever done this ‘agency-side’ and as a result commercial constraints sometimes limit our ability to apply too aggressive WIP limits. I’d be really interested in hearing from anyone who has experience of running Kanban projects for multiple customers within a software/design agency. I’m sure there is some additional tweeks to help the implementation.
This week I heard a fantastic podcast over at TheBACoach.com about writing high value user stories through structured conversations. In it Ellen Gottesdiener and Mary Gorman, authors of Discover to Deliver, suggested collaboratively working on process diagrams with your customers. In fact, they suggested encouraging stakeholders to break the diagrams!
The idea got me pretty excited about a project I’m currently working on and some workshops I had coming up. Although I’m pretty confident at diagramming as a requirements specification technique and have studied UML, BPMN and database modelling techniques, I rarely use them for elicitation purposes. And I have to say, however confident I am with the practice, I’m always worried that a stakeholder will spot the bit I’ve missed or will mention an edge-case that I didn’t identify. But Ellen and Mary were suggesting a completely different approach – hold your hands up and say it’s not finished, that it needs some polish and it needs input to be completed and allow your stakeholders to roll their sleeves up and participate in the drawing of your process diagrams.
So that’s exactly what I did, I thought back to some of my experiences of prototyping wireframes and some of the lessons learnt are very transferable. Mainly, if the prototype looks polished stakeholders will think it’s finished (and will often be far more critical). So, we used paper and pens to draw out a basic process flow, there were no swimlanes or beautiful straight lines that a tool would give you, but it was there, a vehicle for some structured conversation.
I put it on the table with some other pens and watched as the team looked at it, quite shocked at how bare it was (probably questioning my fee…) but straight away people started drawing on the missing elements. And then they took it further, “this bit is only happens if X is true” and “We want to be able to delay a step, in fact we’d like to be able to delay two of the steps.”
We were prototyping a process flow, well they were and I was taking the notes from all the business logic and constraints that were being discussed. And because I wasn’t holding the pen and doing all the work I was able to sit back and facilitate the discussion and prototyping, dipping into the 7 Product Dimensions [pdf], that I also learnt about on the podcast, ensuring that we had covered where the ‘data’ was coming from for an aspect of the diagram or what the ‘control’ was around another.
Now I was lucky, the team I was working with are pretty technical. In fact they are a mix of subject matter experts and other analysts, which made the job a bit easier. But even if your team aren’t expert diagram drawers, with your help they’ll be able to articulate enough to help you draw something that they can validate. Constantly ask questions like:
Is this right?
Is there anything that happens after this step?
Is there anything missing that you can see?
Working with your stakeholders in this way will help them to feel empowered in the delivery of your project, it helps develop rapport between the team and will pay dividends over the lifetime of the project.
I usually try and keep these posts technology agnostic, but when it comes to wireframing it has to be said that I’m an Axure fanboy. I know there are lots of other great tools out there but this is the one that I’ve settled on.
Axure has a built-in specification generator, which reminds me of projects where the quality of my deliverables were measured by the length of the documents. However, I’ve been playing with some of these settings in order to turn the built-in features into something a bit more useful. Here’s what I discovered:
The Annotations Widget
This is the Annotations panel within the Widget Properties Pane (you can open it using ctrl+1). By default it has lots of options, covering a range of needs from the features status, risk, owner and benefit etc. While this is all very useful it can feel a bit overwhelming if you don’t know all that information or feel like you’re duplicating effort by repeating info that is already being captured against your user stories. To help me capture what I need, without writing war and peace, I’ve opted for the following fields:
I use this field to describe what the feature is, nothing fancy. “This is a drop down picker that allows a user to select their timezone”.
This field describes what the user can expect to happen when they interact/click on the feature. “Onclick the user will be presented with a list of timezones to select from. By default ‘GMT London’ should be selected”.
I use this field to describe when the feature will be shown and any edge cases where the design or layout may change. “The first time the user uses the application they should set their timezone. On returning to the application this should already be set and display the option the user has stored previously in their preferences”.
On generating the prototype it builds into HTML and adds a small icon over the top right hand corner of the feature. If you hover over them your cursor will change to have a ‘?’.
When you click on the note it will open up and can be moved around the page, in order to prevent it to obscure the feature it is describing.
You can play around with combinations of fields that you use and even have different ones saved for different clients. Any fields that are left blank when annotating your prototype will not be shown once the HTML is generated.
Sharing Axure Files
If you’ve not seen it yet I strongly recommend Axure Share. It allows you to store and share your Axure prototypes and even has functionality to allow users to discuss elements on the prototype.
If you want to find out more about the Axure annotations feature why not check out the following:
Last week Sigma hosted the first in a series of mini or ‘bite sized’ Camp Digital events in the run up to next years annual conference. The event at MMU’s mew business school explored emerging trends, best practices and real world advice for the digital and UX community.
The evening of presentations and networking was a great success with colleagues, peers and students from across the digital industry. The three presentations covered the topics of:
Guerilla UX Techniques
Using Analytics to Drive UX Strategy
The Creative and Innovative Business Analyst
Chris Bush – Sigma
Guerilla UX Techniques
Chris has developed Sigma’s services in user research, testing and user experience consulting. As well as heading up Sigma’s UX practice in the UK, he is often the Lead Designer on many projects, helping to shape a project from the initial pitch, through user testing to the final release.
Chris presented some tips, tools and techniques used in iterative, guerrilla UX testing. Reviewing which of these activities gave the best ROI against more formal testing strategies.
Simon Wharton – PushON
Using Analytics to Drive UX Strategy
Simon is managing director of award-winning digital marketing agency, PushON and a founder of the market leading SASCon conference. Since its launch in 2005, PushON has grown into one of the most highly regarded digital agencies in the UK with a team of 25 digital experts and an annual turnover in excess of £1m.
Simon presented some tips and techniques of using analytical tracking tools to give meaningful insight to user behavior and how to use data to validate your iterative UX strategy. Based on a case study from alternative music news website, Louder Than War.
Ian Richards – Serco
The Creative and Innovative Business Analyst
Ian has over 15 years worth of experience in the business analysis field with many large Blue Chip Companies, including Fujitsu, IBM, The AA and British Steel. However, he is currently a Principal Business Architect within Serco’s public and private sector, involved in both bid and transitional work in the services industry.
Using thought provoking material, Ian’s presentation examined how “unleashing the potential of the mind” can bring about new ideas which can be applied in the world of analysis. Using examples, quotations and different perspectives, Ian showed how analysts can still be creative, even when restricted by numerous constraints.
Back in April the IIBA NW&E branch, in partnership with the BBC Academy, ran a successful event for over 100 Business Analysts at the BBC’s new MediaCityUK building in Salford. The presentations on the evening were recorded and made available via BBC Academy’s YouTube Channel.
Niko Vijayaratnam, BBC Future Media – News
The Business Analyst (aka. The Generalist-Specialist)
Most products in BBC Future Media are built by teams implementing Scrum yet Scrum doesn’t define a BA role… so what exactly does a BA in a Scrum team do? Niko Vijayaratnam, Senior Business Analyst in BBC Future Media – News, explores this subject looking at the work that BAs in BBC FM produce and discusses their importance to the success of recent projects.
Niko has been a Senior Business Analyst at the BBC since 2010 working on a range of projects from developing new in-house facing tools for editorial to audience facing products to cover events like the 2012 London Olympics.
John Taylor, ITV
Facing the challenge of working in a virtual office
John started his career 12 years ago working in an IT role, before moving into management accounting and finance. Eventually John found an ideal role to combine both of these areas working as a business analyst, specialising in ERP/corporate systems, which unknowingly his previous roles and experience had provided him the skills for.
Angela Stevenson, BBC Technology Solution Design
Angela is new to Business Analysis, or is she…
Angela began her journey into projects twelve years ago in the IT department of a car manufacturer, where the analysis phase was comprehensive, the objective closely guarded and the requirements rigorously tested.
Being an impressionable apprentice Angela believed all projects must be this way and so set off through a decade with variable success before finding the term ‘Business Analysis’ to neatly describe the way she worked.
Having just studied the academic side of the discipline in recent months Angela presents a light hearted look at how she is reconciling wearing both the BA and PM hats in her current role and how she aims to make the two happy bedfellows for successful projects.
This post is the first in a 2 part series on visualising your product backlog. The second post will look at Story Mapping.
Recently on a trip to Sweden I was introduced to Impact Mapping, sometimes refereed to as effect mapping, as a collaborative work-shopping technique for identifying software features and mapping them back to organisational goals and user personas. The following article is a summary of the technique, as described in the book Impact Mapping: Making a big impact with software products and projects by Gojko Adzic, along with a mix of my own observations from being involved in facilitated Impact Map sessions.
So what is impact mapping?
Well according to Gojko Adzic, an Impact Map is :
A visualisation of scope and underlying assumptionsm create collaboratively by senior technical and business people. It is a mind-map grown during a facilitated discussion
Impact Maps can help you build products and deliver projects that make an impact, not just ship software. Impact mapping is a strategic planning technique that prevents organisations from getting lost while building products and delivering projects, by clearly communicating assumptions, helping teams align their activities with overall business objectives and make better roadmap decisions.
How do I impact map?
Working your way through the following questions with your team or customer will allow you to build up an impact map from scratch. These are often best achieved in a facilitated workshop environment with a number of key stakeholders represented.
Defining the business goals is essential for any project and its the focus of Impact Maps. Why are we doing this? What is the goal that we are trying to achieve above all else?
Goal definition is about understanding the problem, not the solution. It should not be focused on specifically creating a product or application, rather explaining why its existence would be useful. It can be useful to try and tie the goal to the organisations value chain.
Increase online conversions by 15% in the next quarter
Attract 20% more customers in the next financial year
The first branch of an impact map looks at actors. For anyone who has spent some time with UML or traditional use cases you will know that actors can range from end-users and external suppliers to third-party applications or systems. Try and capture decision makers and those able to achieve the goal you defined or aid/block it from being achieved by others.
Consider the following questions at this stage:
Who can produce the desired effect? Who can obstruct it?
Who are the consumers or users of our product?
Who will be impacted by it?
These are the actors who can influence the outcome of your goal.
Students with a tablet device or smart phone in the classroom
Corporate employees with access to the secure drive
The second branch level of an impact map sets the actors in the perspective of our business goal. Don’t list all the activities that an actor might want to take, just the ones that are focused on achieving your goal.
Consider the following questions at this stage:
How should our actors’ behavior change?
How can they help us to achieve the goal?
How can they obstruct or prevent us from succeeding?
These are the impacts that we’re trying to create. Note: They are not product features.
Get faster access to accurate information
Have access to a wider network of colleagues to collaborate with
Once you have answered the goal, who and how questions you can start to consider and define your scope. This is the third branch level of your impact map and starts to identify the top level features of your product.
Consider the following questions at this stage:
What can we do, as an organisation or a delivery team, to support the required impacts?
What is the minimum that you can deliver to achieve your goal
These are the deliverables, software features and organisational activities. Do you not get too detailed at this stage and consider what the shortest route is through your map to the goal. It is very unlikely, and is potentially not a wise investment, to deliver all the features identified in your map.
This is a section that I have added but its a step that I find useful to help understand how a feature will help the organisation to achieve their goals. Agile uses the phrase “Definition of done” and in a similar way I like to think about “What success looks like”.
Consider the following questions at this stage:
How will you know when your goal has been achieved?
What action or level of engagement will signify a success for your feature?
How long will it take to get usable data from this feature?
The outputs from these questions will help formulate your measures or metrics. Where possible you should measure the smallest individual unit Avoid vanity measures, page views and impressions are worthless unless they prove an increase in conversion or engagement from your intended users.
A completed signup form
A social media share
What are the outcomes?
In Adzic’s book he describes deliverables as being features, lines of code that helps organisations in achieving their goals, and of course he is right. However, I’ve often found it’s useful to understand at what point your Impact Map will be ‘finished’ and what the immediate deliverable from the exercise are.
Firstly if you are creating your Impact Map in a workshop then it will be produced within a timebox and will most likely be completed within the one session. Impact Maps are collaborative artifacts and unless you have all your stakeholder representatives available after the workshop, it’s not wise to carry on developing them in isolation.
Secondly, the largest deliverable from me as a business analyst are a prioritised list of features and measures, mapped against their actors (or personas) and goals. This allows you to quickly slice your Impact Map into a product backlog, understanding that what you have is probably high level epics that will require some breaking down into smaller stories.
The diagram above shows how you can map the who, how & what into stories that can be worked up.
What do I need to impact map?
When I first drafted the outline of this post my intention had been to discuss different types of mind-mapping software here. And for the record, I use Xmind and have had some great results with it.
However, having written this post now, it’s clear to me that what you need in order to effectively Impact Map is a good mix of stakeholders who can represent both your organisations goals and your users needs. Without access to them you will not produce an effect map that adds real value and your roadmap and backlog will be flawed from the start.
Today I was lucky enough to attend Jeff Gothelf’s O’Reilly webcast on Lean UX.
I was particularly keen to attend the webcast as I’ve been around Agile projects for some time, performing business analysis activities and supporting clients through rapid prototyping, but I wasn’t sure how to make UX activities Agile and I was hoping that this webcast would help me answer that.
Well the good news was, Jeff explained that Lean UX is inspired by Agile development theories:
Lean UX is the practice of bringing the true nature of our work to light faster, with less emphasis on deliverables and greater focus on the actual experience being designed.
Individuals and interactions vs. processes and tools
Working software vs. comprehensive documentation
Customer collaboration vs. contract negotiation
Responding to change vs. following a plan
Up until this point I hadn’t really seen any differences between Agile software development and what Jeff was describing as Lean UX. That’s when Jeff explained how Lean UX is really based on the Lean Startup Process. And how Lean UX had evolved the Lean Startup process to create this:
There has been a shift from can this product be developed (technically) to should this product be developed (because our users need need/want it).
Jeff went on to say that “In a fast-paced environments, traditional UX is a bottleneck. We have to change perspective on how to “do” UX, today’s markets require a new way. A faster way. Designers can no longer hide behind their monitors any more! This is a designer led initiative. Get designs out there. Fast. In public – where others can see them.”
5 Things you need to do to be Lean
In Jeff’s presentation he suggested 5 tactics that you can do to help kickstart Lean UX into use in your projects:
Solve the problem together
As opposed to implementing someone else’s problem.
Give them a problem to solve – not guidelines to implement a solution.
This team will be far more effective, motivated and productive if you do.
Sketching – it’s all the rage!
Get the ideas out of peoples heads.
It’s NOT drawing, we don’t need to see the finished article. And you can do it collaboratively.
Doing it together allows software engineers and designers to problem solve.
Sketching brings experiences to life faster.
Prototype it [Amen!]
Build an experience, not a document.
Once validated, demo it to the team. And get everyone started.
There are no additional deliverables needed!
Pair up! But do it, cross-functionally.
Pairing saves time and builds a common language and a common understanding of the challenges.
You start to free up your designers and empower your developers.
Developers don’t have to wait for a design to start coding something and designers are freed up to do something difficult.
Start a style guide
The cause of, and solution to, all UX problems.
A catalogue of the code snippets, the colour palette, the elements, the graphics.
Lean UX is not
If you’ve been around Agile projects in the past you’ve probably had to defend the things that it is not to the outside world. Lean UX is no different:
Its not a shortcut
The only thing being removed is waste
Leave the toolbox intact, just use it one tool at a time and at the right time
This is not a design by committee
That never leads to anything pretty
What did I learn?
A lot. As I’ve been writing this post I’m considering more of what Jeff described and how it can be worked into projects that I’m working on. There were a few nuggets that will stick with me though:
The Goal: Moving forward in parallel path with development and design.
‘The Spec’ doesn’t control: Lead with the conversation, trail with the documentation (that you need).
The Pepsi challenge: Use data to settle subjective issues. A/B testing can settle them.
Go for bronze: You’re not aiming for gold medal work. It needs to be ‘just’ good enough.
Every design is a hypothesis: Don’t design things people don’t want. You can find out if people want theses things before hand.
Validate your hypothesis with the users: Keep it light and cheap. Put it in your diary once a week – get 3 or 4 people in and show them what you have ready to show them.
 Kauzkaric, Kevin. 2013. “‘Lean UX’ Can Propel You Ahead Of Your Competitors In Product Design” [online]. Published on 15th March 2013. http://kevinkauzlaric.com
Design and build projects are often difficult to kick-off, especially when you’re struggling to convey your ideas and understand the solutions being suggested. This can lead to delays, confusion and potential rework.
Rapid prototyping provides a quick and visual solution to identifying, documenting and validating project requirements in an interactive way.
In this session Jamie will take you through examples of rapid prototypes and show you how this approach can bring your projects to life and reduce development time, costs and help to maintain your relationship with your clients.