Tag Archives:

website redesign

Image of various devices. Mobile, laptop, tablet and desktop.

Scrolling beyond the fold

How have UX trends shaped website design and why have some of our favourite homepages changed this year? As 2015 draws to a close, Hamilton Jones gives us some last-minute answers.

For many years, website page design has been dominated by above the fold design, a trend deriving from traditional print media. More recently, with the overwhelming uptake of mobile technology and higher resolution displays, scrolling has become king and the fold is being considered obsolete by many digital marketers.

But let’s not jump ahead of ourselves, as the first part of a website that a user is going to see, above the fold is still a key consideration in website design, particularly for information hierarchy. Good hierarchy doesn’t mean cramming all of your best and most important content at the top of the page, instead it should see information displayed strategically throughout the page to be served to the user at the most appropriate time and in the most accessible way.

Now that reams of information aren’t being put into the first 700 pixels of a page, we are starting to see some beautiful website designs that have a cleaner and simpler aesthetic. Some of the most popular trends of 2015 have been the long scroll pages, tile/card layouts, interactive storytelling, hero images and large typefaces. But different pages call for different approaches to layout and design.

Take for example our homepage. People that land on our homepage could be looking for any of our services, so we need to ensure that we create a story where they can understand our brand, discover what we offer and navigate quickly and easily to the section of the site they need. By introducing a long scroll web page with hero images we are able to serve content about each section of our website as the user moves down the page, providing them with enough information to understand what the section offers, but without giving them so much that they won’t want to read it.

When a user enters one of the landing pages within Information & Support, the layout changes to be much shorter and focuses on click interaction and pagination. Instead of being general like our homepage, these pages are more specific but don’t contain in-depth content, therefore act as signposts to guide the users to specific pages.

Moving down to article level and the pages become very specific. These pages are much longer and often contain a large amount of information. Here we have bigger type-face at the top of the page so the user knows immediately if it is the right content for their needs. These pages also focus on scrolling due to their length, so the user can take in the information without distraction as that is the main purpose of the pages.

Now that 2015 is coming to a close however, it will be interesting to see how website designs continue to change and evolve in 2016, and the changes that we at Macmillan will make, to continue to ensure that our users are getting the best possible experience from our website.

Questions about this post? Leave us a comment below or tweet us @mac_digital. We’d love to hear from you!

 

Our journey towards a more personalised experience

Digital Project Manager, Ellie Donithorn, gives me the low down on Macmillan’s ongoing aim to give our users a more personalised website experience.

What’s new?
We have created an exciting new feature allowing users to find their nearest information and support centre. Here’s a quick how-to:

  • Step 1: Enter your postcode into the search box on the right-hand side of the page, or hit the ‘locate me’ arrow to let us find you.

Screenshot of new feature with the 'locate me' arrow circled for emphasis

 

 

 

 

 

 

  •  Step 2: View your nearest information and support centre, information about opening times, and other suggested centres within a 30-mile radius.

Screenshot of feature displaying your nearest information and support centre as well as those further out

 

 

 

 

 

 

 

 

 

 

  • Step 3: Click on your preferred centre to view its location on a map, opening times, and centre-specific contact details.

Snapshot of support centre page complete with map and additional contact details

 

 

 

 

 

 

 

 

 

 

 

 

 

And there’s more! If you have a My Macmillan account, you’re logged in and you’ve saved your postcode, our new function will remember this information and pull up that support centre automatically.

What was the problem before?
Our research showed us that a third of people are using their smartphone to access healthcare information. This means it’s more important than ever for us to provide users with an online experience that gives quick and comprehensive results on the go.

We identified that the process of finding your nearest support centre on the Macmillan website was unnecessarily lengthy. It was taking around five clicks for our users to find the information most relevant to them, so we decided this was something that needed to be addressed.

How will we track its success?
We won’t know whether or not this feature is useful to our users straight away. We’ll be tracking the number of people that click on the name of the centre as well as on the link that takes you to any of the suggested support centres. This will give us an indication of engagement with the new feature, so that we can decide whether or not this is the kind of functionality that enhances user experience.

Can we learn from any obstacles that occurred?
Every project has its obstacles. This new feature needed to be low risk in terms of minimum disruption to our existing web templates. Currently this feature sits on very few pages and it would be great if it was visible across a larger number. However, this is very likely once we get a feel for how helpful our users find it.

What inspired this project?
Personalisation is such a hot topic in the wider digital world, so we want to make sure we’re doing as much as possible to address it at Macmillan. We drew inspiration from websites like Amazon and Netflix, for which personalisation is key. Even the ability to log in and revisit your last interactions, or have your last order (of information booklets perhaps) automatically compiled, would be a great future venture. Just Eat is a website that people may be familiar with that does this very well!

What’s next?
We’re working on further enhancements of this feature, which will mean that we can make the information users want from the Macmillan site even more relevant to their needs. For example, displaying support centres that are ‘cancer-type specific’ and thus, most relevant to the user. And in our volunteering section of the website, we plan to show our users the volunteering opportunities that are most local to them.

It’s about creating a bespoke experience that prioritises information according to the user’s needs and interests. And this is step one of greater things to come from Macmillan.

 

Questions about this post? Leave us a comment below or tweet us @mac_digital. We’d love to hear from you!

We’ve been migrating content again

The Digital team have been busy over the summer moving content from our old system (Contensis) to our new one (Tridion) and the latest sections to benefit from the migration are Volunteering and About Us.

The new sections have cleaner formats and layouts, updated content and navigation and are fully optimised for tablet and mobile devices so they look great however they’re accessed. Changes include:

• A new navigation, consistent with the rest of the site

• Tridion delivers the same content for mobile, desktop and tablet, but adapts how it’s presented for the best reading experience on any device

• Refreshed branding making everything more personal, inspiring and engaging.

• More stories, videos and imagery, to help bring the pages to life.

You can see the new focus on case studies particularly in the Volunteering section where we’re bringing the range of volunteering opportunities to life through real life stories.

The team will continue to work on the website redesign project throughout 2016. The next sections to get the update treatment are the remainder of About Us and the Media Centre. There’s also a project to update the Volunteering search and apply system which is launching at the end of the year. Let us know what you think in the comments section.

 

This post makes for some easy reading

This month’s blog post is a collaborative effort from our digital interns Sam Russell and Donald Lam, who explore readability and its place at Macmillan.

In the past few years, readability has become an important feature of digital content. We spoke to Abigail Howse, our Quality and Improvement Officer, who looks after readability at Macmillan. She helped us come up with some useful information on the subject.

Why is readability so important?

Readability is the ease with which a written text can be understood by a reader. It is especially important to Macmillan because we are one of the biggest providers of cancer information in the UK.

Interestingly, the average reading age in the UK is not quite as high as one might expect. A survey in 2011 found that 43% of adults have a literacy rate of aged 14 or younger and 15% under age 11.

Image of UK literacy rates according to media findings

With these statistics in mind, it’s even more important that we make sure anyone affected by cancer, whatever their reading age, can get the support they need from our website.

As part of our content strategy, we are working to lower the reading age of our content even further, from 13 to 11 years old.

How exactly is readability measured?

There are two widely used methods of checking the reading age of content.

The ‘Flesch Reading Ease’ test estimates readability using a calculation of the number of words, sentences and syllables in a piece of text. The scale is measured out of 100 (the higher it is, the more readable it is). Macmillan aims for between 70-90 (age 11-12).

The ‘Flesch-Kincaid grade level’ uses the same technique to estimate what US school grade would be able to read the content. Macmillan aims for grade 6 or 7 (age 11-12).

Surprisingly, it is in fact possible to generate this information in Microsoft Word by following these instructions. There are also many online tools that will check your content for you. The average reading age of Macmillan’s cancer information pages is currently 14 years old.

Okay, so how do I lower the reading age of my content?

Abigail suggested a variety of different simple techniques to increase the readability of digital content. Words, sentences and paragraphs can all be simplified to make a piece of online text more readable.

11-year old boy struggling to read

 

  • Choose your words carefully. Avoid using idiomatic expressions such as give it a shot/drop us a line – instead use language that is literal. Get rid of redundant words and pick the simplest word to ensure you aren’t excluding anyone. ‘I felt a bit under the weather’ should be changed to ‘I felt unwell.’ However, complicated technical words, such as ‘chemotherapy’, are sometimes necessary.
  • Structure your sentences well. Make each sentence as simple as possible without changing its meaning. Try to make sure your sentences don’t stray too far beyond twenty words. It is best to only make one point per sentence. Passive clauses should be avoided or, avoid passive clauses.
  • Split up your content. Use paragraphs between topics and bullet points, when appropriate, to improve clarity. Images are another great way to break up large amounts of text in a way that is appealing to a reader.

After applying these techniques, someone of a low literacy rate should have the same opportunity to understand a piece of text as someone with a much higher literacy rate.

Who else cares about readability?

Readability is a really hot topic. So hot in fact, that new technologies specifically developed to enhance readability are being developed.

Most notably, Asymmetrica Labs has created an algorithm to improve readability. Asymmetrica inserts spaces into website text in order to break up sentences into simpler chunks. It is a free browser extension for Chrome, Safari, and Firefox, and reformats the text without affecting the site’s overall design.

Other technologies, such as Readability, turn any web page into a simpler format, making it easier to read on your desktop, phone, or tablet.

It won’t be long before complicated words, convoluted sentences and complex layouts are a thing of the past in the digital world.

I’m still reading!

If you have read this far, you probably know enough about readability to guess the answer to a simple question. Which section of this blog post is the most readable?

The answer…the ‘How exactly is readability measured?’ section, with a Flesch-Kincaid grade level of 7.2. And the least readable?…the ‘Who else cares about readability?’ section, with a Flesch-Kincaid grade level of 11.4.

So that’s everything you need to know about readability in a nut shell. Readability isn’t about compromising on quality, it’s about getting your content read and read widely. This mightn’t be your main priority if your audience is very niche, but if, like the Macmillan website, your aim is to reach out and support as many people as possible, it’s definitely something to consider.

Someone uses our new website on a tablet with the words Our website is changing above

Macmillan.org.uk has had a makeover

The new home page and information and support section of the Macmillan website are now live, the latest section of the website redesign project to launch.

It’s been available for the last month alongside the old cancer information and how we can help sections of the site, but last week we switched over to the new version.

You can see all of the new content on smartphones and tablets as well as desktops. And there is a new header across the whole site. This offers people new ways into our information by selecting why they are visiting the site ‘How can we help you today?’ and seeing tailored content as a result.

Audience selector
Alongside this, we’ve updated My Macmillan. My Macmillan is a gateway to be.Macmillan and our Online Community whereby you can access both sites using one log in. It now has a new ‘save page’ functionality, which means users can save their favourite pages on a new ‘listing page’. To access My Macmillan head to the top right of any page of our website.My Macmillan
The website redesign is an ongoing project and we’ll be moving onto the next section shortly (when we’ve caught our breath again!) You’ll notice some differences between some of our web sections, but please know that we’re working on it. If you notice any problems with the website whilst it’s bedding in then please contact us to let us know.

We’d love it if you could have a look and share your feedback with us. Either by emailing websiteredesign@macmillan.org.uk or completing this short survey.

If you’ve got any questions about the changes you might find these FAQs helpful.

 

Beta

beta launch

We have just launched the new information and support section of our website in beta. The new section replaces our existing Cancer Information and How we can help sections.

We wanted to give you a preview before we launch officially to see if you have any feedback for us. If you have time, we’d love to get your feedback by emailing websiteredesign@macmillan.org.uk  You can access it on your smartphone, tablet or desktop computer.

As it’s a preview, it doesn’t have information on all the cancer types – select lymphoma to get an idea of what a cancer type section will look like. Where content is not yet complete, we’ve included a link back to our current site.

Looking at the site now, you can see what a huge step we’re taking in many areas with the new designs, system and digital information content. We are in beta, which means that the old and new content are running alongside one another simultaneously. This will allow us to test the new section fully before swapping it for the old Cancer Information and How we can help sections. You can find out more about why we’re beta-ing.

Read our frequently asked questions about changes to the website.

We know there is still lots to do, but hopefully you can really see the potential to build this into something that delivers a great Macmillan digital experience – it is really exciting to see it live.

We’ll be making more changes before we release it fully, so your thoughts and comments are really important. Thank you.

Woman using a computer

Upgrading the Online Community

Macmillan’s senior community officer Priscilla McClay updates us on the upcoming Online Community upgrade, the first since 2011. Follow Priscilla on Twitter.

The Macmillan Online Community is a support forum for people living with and after cancer, their families and friends, and people who’ve been bereaved by cancer. It’s a vital source of support for people, connecting them with others who understand what they’re going through.
With more than 5,000 posts and 90,000 visitors every month, it’s a thriving and active site, but it hasn’t had a major upgrade since 2011. Our users have told us there’s lots we can do to make the site faster, easier to navigate, and easier to access from any device.

What are we doing?
We’ve listened to our users’ priorities, and are focusing on three main areas:

  • Upgrading the software that powers the Community – tackling existing technical issues and enabling us to innovate in future based on members’ feedback.
  • Making us better on mobile – over half of our users are now using the Community on their mobile or tablet. So we need to make sure that our mobile site lets them do everything they need to do while they’re on the move or in treatment.
  • Making the Community easier to navigate and use – helping people get support as quickly and easily as possible.

When are we doing it?
We aren’t changing everything all at once. With over 90,000 visitors every month, we don’t want to get things wrong.
Instead, we’re taking an agile approach, making changes in bite size chunks. At every stage, there will be plenty of time to test, and to get feedback from our users.
User involvement is key to making sure that the site meets our members’ needs, so we’re inviting people to check out upcoming changes in our test area before they go live.

What are the first changes our users will see?
The first release will be this month and will bring two important changes:

  • better search – making it easier for people to find relevant groups, discussions and blogs
  • improved email settings – giving members greater control over how often they get email notifications from the site.
Person browsing our new information and support section on a tablet

Website redesign: Information and support

The all new information and support section of our website is almost complete and we’re getting ready to share it with you soon.

The area will replace our existing cancer information and how we can help sections. It has been completely redesigned based on detailed research and ongoing testing with people who use our website. We’ve made it easier for people to find the information and support they need by structuring it more intuitively and making it easier to filter content. There’s more of a focus on the experiences of real people via quotes, case studies and video content. It will also look different – the page designs are more vibrant and are practical to use. And it will be optimised for phones, tablets and desktop computers, so visitors to our site will have a great experience however they’re accessing it.

We’re also updating our website homepage to reflect our refreshed brand identity and the new navigation.

This update is part of a wider project to completely redesign our main website, macmillan.org.uk.

While the information and support section is the current priority, the Digital team is already working on the rest of the site by gathering and validating requirements for outstanding areas like Volunteering, Campaigns and About Us.

Man writing on project board

How do you even begin to project manage a whole new website?

Will Jones, the Senior Digital Project Manager for our website redesign gives us a small insight into the work he’s doing.

Being presented with the challenge of re-designing the Macmillan website could be considered a daunting prospect. However, it’s really a case of working through each phase step-by-step. Traditional project management techniques (e.g. Waterfall) rely on the project manager carefully planning every line item in a very long and exhaustive project plan. This is a great technique for understanding all the steps involved but invariably the scope changes, as do schedules and budgets.

Working in a more Agile way does still require structure (as any project does) but allows you to welcome scoped change and adjust your plans (and even budgets) accordingly. As we have been building sections for the new website, we’ve realised that some ideas we thought would work, actually don’t work. We’ve tested with users outside of Macmillan and they’ve told us through comment and behaviour that some designs and functions simply don’t work.

The key to accepting this change is to understand the fundamentals of what your product is for. This is shaped in the form of a product vision, which you can consistently refer back to see if you are on track with your user and strategic aims for the product. There are some great examples of product visions; one of my favourites is this snippet for the original iPod product vision;

“In your pocket”

The iPod will be a portable digital music player that will hold 5000 songs. It will have a battery life measured in days, not hours. You will navigate the thousands of songs with a single finger. You will sync all your music from your computer to the iPod in minutes automatically, so you can have all your music in your pocket.

Once you have an agreed product vision, it’s all about prioritising the key requirements and detailing these out into user stories. A whole other blog could be written on user stories so if you want a taster – this article by Dan North is a great place to start.

Once you have the user stories and priorities in place, it’s a case of clear communications. We have a clearly defined project board to follow work process and are not afraid to get together and discuss (and challenge!) ideas on a regular basis. Face to face communications and collaboration are key to Agile, as they are to any project.

Woman using tablet computer

Redesigning our website

Yes, we’re building a new one. The last time we redesigned was in 2008 and things have moved on since then. Some of the websites we use the most now were mere toddlers back in ’08: Facebook was four years old, YouTube was three and Twitter was just two. Things have changed at Macmillan too, like the range of things people want from us online, and the way they access it. So the first thing we did was LOTS of research to help us map the audience needs that we use to prioritise and evaluate what we’re delivering. This included plenty of:

  • talking to our audiences to understand what they need and when
  • testing our current website
  • talking to people who run our services.

Building a new website the size of Macmillan’s is a huge task and we’re doing it in stages – the first change was the Fundraising section last September with our new In your area pages following in January. They are a great example of what the project is about – thinking about how to deliver content in a way that makes sense for our audiences and that gives a great digital experience however people choose to access it. And our new Information and Support section will be going live later this year.
More and more people want to get information and services digitally, through their computer, tablet or mobile. We want to make this easy for them. People also look for information in very different ways – some people want to know everything, whilst others find too much information overwhelming. So we’re looking at new information formats and navigation to:

  • get you to relevant content quickly
  • help you understand what something might be like through real stories from people who have been there
  • promote our amazing support services at the right time in the right way.

Over the next few months, we’ll be posting regularly to tell you about different parts of the project and how we’re making it all happen. We hope you like it.

Our tweets

Our Pinterest pins

Follow Me on Pinterest