Learn more about user experience, web development and digital marketingView training courses

Website design

I’m very excited to announce that after 6 months hard work researching, designing and testing the amazing new brompton.com is live!

As with all user-centred design projects, we always start with a good dose of research (business requirements gathering and user research). Re-designing the website for iconic British brand, Brompton Bicycles was no different.

Their mantra of “Made for you, Made for cities” meant they jumped right on board the user experience philosophy of making sure that their digital interfaces were as delightful to use and well-engineered as their products.

Read on if you want to explore some of the lessons we learnt along the way in case you:

  • a) love Brompton and you’re fascinated for a sneak preview into how the website redesign progressed or
  • b) want to learn from our experience to get a few quick tips from a real project

So, here are the lessons we learnt and a sneak preview behind the scenes of the Brompton “Made for you, made for cities” website redesign, starting with user research.

The plan of action for Brompton user research

The key techniques chosen for the user research were:

  1. Guerrilla user research: We did a lot of guerrilla research, hanging around in bike shops so we could interview bike owners to find out about them and what they thought of the brand. We also talked to many Brompton owners, stopping them on the street to ask questions.
  2. Analytics data: We did research through analytics analysis. We used Google Analytics to work out what the key user journeys through the site were, where people were dropping off, behaviour trends, platform usage etc. It also helped us to identify what was missing from pages and what SEO opportunities were open for Brompton to increase their traffic. Identifying additional keywords to target was key for the success of the website moving forward.
  3. Shop visits (Ethnography): We also visited shops as part of our guerrilla user research to understand how dealers sold them. This was about seeing how dealers needed to use the website in the sales process by watching them use it in real scenarios. This uncovered  the frustrations resellers had with the site as it was and what customers asked them about
  4. Focus groups: We ran focus groups at Webcredible HQ using the old Brompton website as stimulus to explore what people liked and ideas of what we could do moving forward. We then looked at what made ‘owners’ and ‘prospects’ tick and what they each needed from the website so we could make sure that both user groups were designed for.
  5. Stakeholder engagement: We also planned in multiple stakeholder engagement workshops with the senior management at Brompton. This was really helpful to ensure their priorities were considered and everyone came on the same journey. Kicking off with a stakeholder workshop was great, it got the whole company engaged and helped us to really understand what their priorities were. Everyone had an opportunity to share what they had a say.

Why was user research important?

The most important objective was to cover as many different user groups as we could. A common trait among Brompton owners is that they aren’t ‘typical’ cyclists, and we all know it’s dangerous to pretend we know the thoughts and natural behaviours of our users without observing them properly. So, we spoke to commuters, as well as doing research in bike shops.

It was key for us to cover as much of the international market as we could as well. We did interviews with business stakeholders worldwide, including those from US, China, Taiwan, Holland and Italy to make sure that we considered cultural differences, requirements and needs, how the bike was used in different cultures and how the brand was perceived.

Spending the time doing user research upfront was really important, as with all our projects, and we used it to create a digital strategy based on real perceptions and needs of users. We then addressed the current frustrations and reservations that people had with the website and brand.

Did you learn anything interesting about the Brompton brand?

The findings from our research with Brompton can be split into 3 major themes, one related to the international use and perception of Brompton, one around the UK perception of Brompton bikes, and one around how even rock stars use them…

  • There is a huge amount of commuting by bike across the world, particularly in places where people don’t have much space to live, having a bike that folds up is really useful.
  • The English heritage is hugely important in the Far East market.
  • In the US, people don’t tend to commute by bike but instead like to take bikes away at the weekend. The Brompton meets this need by easily fitting in to an RV and has the performance of a non-folding bike.
  • In China, they have a basket attachment so they can use it in a supermarket and unfold it ready to ride home.
  • Taiwan has meet-up type groups that travel to different street food stalls every Friday on their Brompton’s – they ride and eat together.
  • In the UK, people associate folding bikes with getting a train. “I don’t get a train so I don’t need a folding bike” was heard numerous times during research, despite a person meeting all criteria for needing one.
  • Bon Jovi’s road crew had been in the week before and had all just come back from a gig. The whole crew had bought Brompton’s to get around cities in downtime. When they are finished a gig they threw them in flight cases with the instruments and shipped them to the next place.

All of the above findings were key insights we fed back to the company – they are real perceptions and use cases that we addressed in the project.

What were the deliverables from user research?

The above insights were taken back to Webcredible HQ and the walls were smothered in post-it notes ready for analysis and recommendations. This was used as a basis for creating personas, which in turn aided in developing a digital strategy. The process went a bit like this:

  1. Stick post-it notes to the wall, group things together, map ideas and make suggestions
  2. Create customer journeys and personas
  3. The above is all an iterative process, with the Webcredible team and Brompton stakeholders taking part
  4. Present the digital strategy back for sign-off
  5. Get going on design & build!

 

How research fit into the larger project

  • Step 1. research.
  • Stage 2. Create a strategy and roadmap – we refer back to this at every stage, when you’re designing and you have an understanding of your customers it is much easier to design and make something that will meet their needs.
  • Stage 3. design, iterate, build, test and launch! (OK, probably more than just three stages…)

What we learnt for next time?

The biggest lesson I learnt from the project was to do with Guerrilla user research.

Guerrilla research is hard work, you need to be well rested and clear headed to be able to stop people you don’t know in the street, who really don’t want to talk to you. It’s very hard to document as well, people don’t like having a camera put in their faces, but if you don’t record it then it’s hard to document. So, when you’re trying to do a lot of research in a short amount of time it’s important to think how you can record it. I ended up writing it down in a notepad. Next time, 2 people – one talks, one takes notes.

Also, don’t do what I did – I spoke with a woman who was looking at thermal tops, she was a famous actress and just needed to buy some thermals and didn’t seem impressed I didn’t know who she was!

—————————————————————–

So, there it is – a quick lesson learnt on guerrilla testing and an overview of how to structure a user research project. If you’d like to learn more then we have a great user research course run by our Head of Research, Isabel – and loads of events, so sign up for our newsletter to be the first to know about them.

If you’re a Brompton customer or are interested in purchasing one of their bikes – take a look at their amazing new website, it’s live now!

Axure can be a little cumbersome to maintain, especially with lots of pages and widgets. Having worked on a number of Axure prototypes (some very complex) I’ve discovered a few tricks that help me make prototyping more manageable and efficient.

1. Copy and paste interactions

01 HomepageCopy and paste is an easily forgotten function when it comes to anything other than text, but it’s ideal for prototypes with large number of interactions. I once had a button that triggered 20 interactions across five conditions. There needed to be four of these that worked differently across the prototype and the prospect of recreating those wireframes was daunting.

Thankfully, the copy and paste interaction feature cut down the amount of tedious recreation I had to do to build them all. Simply right click on an interaction in the Widget Interaction and Notes panel to find the copy and paste function. Alternatively, the conventional control + C + V will do the trick!

TOP TIP: you can copy and paste an entire case or a particular interaction.

2. Label consistently

Consistent labeling of widgets, dynamic panels and variables makes it easier to create interactions thanks to the text search feature. TOP TIP: anything that will be affected by an interaction should be labelled.

For example I tend to label widgets as follows:

  • If it’s an input field I add IF (stands for input field) to the end of the label, so it will look like this “widget description IF”
  • If it’s text that will change due to an interaction I label as “Type of copy COPY”

This way, if I need to make an interaction involving an input field, I can filter the results by typing IF into the select widget option.

search 1

While you should choose your own labels, for team projects establish a consensus on how you will label your widgets, dynamic panels and variables. Trying to figure out interactions made by a team member can be time consuming.

3. Widget style editor

If you’re unfortunate enough to be applying different button styles after creating 30 of them scattered across a prototype, then you will appreciate the value of having the widget style editor.

You can use it to create custom styles that can be applied across your prototype. No more hunting and applying style changes individually. They also work for interaction styles so your mouse over or widget selected style can all be manipulated at once.

4. Scaling height and width

This is helpful for quick image or button scaling. Click on the height box and when it is highlighted, hold the shift key and use the up or down arrow key to change both the height and width of the widget. However, this does not work with the width box.

scale 1

 

 

 

If this is not enough for you and you’re hankering for more Axure tips, we have two brilliant classroom courses that’ll have you prototyping like a pro in no time: Axure, and advanced Axure.

If you have any tips of your own, feel free to share them in the comments!

A few months ago, I spoke at City University London about wireframing for responsive web design where I proposed that paper could be a useful tool for responsive design. Since then, I haven’t had many chances to try the technique I proposed hands-on, but a suitable opportunity came up recently when we decided to look into making our own Webcredible site more responsive.

I helped facilitate a workshop to start our responsive design project, and I decided to introduce the idea to my colleagues taking part in the workshop, both UX designers and internal stakeholders. As we were adapting an existing site, we already had a baseline for the content we could include so I started by printing out screenshots of our most important pages. Each person was given one or more of these screenshots, plain empty paper, a pair of scissors and glue. The only instructions were to try and slice up and rearrange page content so that it fits in a single-column layout.

Here’s some examples of what came out of that workshop:

Linear layouts of Webcredible pages

What we all really liked about this method was the speed (as we didn’t have to sketch much from scratch) and the flexibility of rearranging pieces of paper before committing to a final solution. The developer in charge of delivering this project also found it helpful to have a visual overview of the intended mobile result based on existing content. Of course, there are limits to how much interactivity you can try to convey through paper, but this didn’t stop us from trying. One useful paper prototyping trick that came of the session was to fold a piece of paper to show how a long list of blog tags might be collapsed into a drop-down menu:

Folded piece of paper signifying a drop-down menu

To see more high-resolution photos (and a sneak peek at our upcoming responsive site), take a look into our responsive design Pinterest board. And let us know what you think in the comments below – would you consider using paper for responsive design?

 

Last week I had the privilege of presenting at Figaro Digital – Design & User Experience Seminar. It was certainly a good event with an interesting debate on whether or not research is worthwhile (you can probably guess which side of the discussion I was on).

My presentation – which you can browse through below – focused on tactical methods you can employ to optimise conversion rates so as to sell more online. The presentation is split into 3 sets of categories, outlining how you can:

  • Help users find products
  • Provide a perfect product page
  • Craft an easy checkout

All the guidelines and recommendations are based on our  research over the years on websites (mobile & desktop) that are selling online. I hope you learn something new and find something useful!

You can also watch the video of me presenting it over at the Figaro website – probably worth doing if you’re interested as there’s not too much text in the deck below.

It has taken months of planning, user testing, thinking like our clients, creative concept building, mood boarding, wireframing, re-thinking the information architecture, graphic designing, copywriting, coding, more project coordinating, photoshop-ing, and towards the end of the final month increased blood pressure and not much sleep – all to align our website with our brand strategy and deliver a better customer experience for you!

Was it worth it?

Yes, definitely. Aligning your digital customer experience with your brand aspirations is imperative for all businesses to succeed.

Top tips for marketing managers to get it right

  • Remember who your customers are – don’t make your site around your internal organisation. If in doubt, get a customer experience agency in (like us) to help you separate your internal perceptions from your real customer needs to deliver on both your business and client requirements
  • Use professionals – your site will be better and quicker but keep your eye on the ball at all times to make sure it all comes together
  • Have a vision, business objectives and strong brand strategy – you will doubt yourself at some point and going back to the purpose, be it the business goals, customer needs or brand vision, it is very useful to keep you on track. Especially when all those internal opinions start bouncing around
  • Planning and lists – have a plan to work to, you will need more time than you t
    hink but it’ll be a good driving force, and have rolling to do lists for you, your designer, and your developer to keep on top of things. (Especially towards the end when it’s all about the finishing touches)
  • Get it live with a fix it list after – it’ll never be perfect so don’t stress about that. Get it live and with the things you know you want to do next in a prioritised list. Then ask for your customers honest feedback on the live site, then put a plan together to get the updates implemented!

What’s next?

It doesn’t stop here. Great branding means having a consistent and appropriate customer experience across all brand touchpoints. We will be updating our brochures, advertising, business cards, etc. and office environment to make sure that you get that Webcredible feeling where ever you interact with us. We will be reviewing and updating all of our other digital platforms too (like mobile website and social platforms). One other thing to remember about this… it all takes a bit of time.

What do you think?

All it leaves me to do now is to ask you all for your feedback! So, what do you think of our new site?

We have a ‘next steps’ to do list for our website so if there is anything that you think we need to do to improve our new website or things you love that you wouldn’t want us to change in the design then please, let us know in the comments below!

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

Training academy

View training courses

About us

We're a user experience agency (UX agency) that creates people-centered, efficient and delightful digital experiences.

Get in touch on 020 7423 6320