Research & Discovery
For this site we went through an extensive requirements gathering phase. We spent a lot of time considering and designing journeys for a number of different users. For this, as with all projects, we adopted a user centered design philosophy. Broadly speaking this was split into two distinct parts prior to any design working taking place.
- Persona development
The research phase comprised surveys, focus group workshops, user testing and interviews with users to understand their frustrations, wants, needs and desires. We then translated this knowledge into key user personas for a project. Creating personas to use throughout the project’s life cycle and beyond meant that we could test out ideas, thoughts and decisions as they arose. We are not the audience; we can only assume what a user thinks. Therefore personas are crucial to our user centered approach meaning that each time a designer or developer makes a decision they can ‘validate’ it against the persona because it’s not practical to speak to users every time a decision is made. The personas then go on to inform the information architecture, content strategy, prototyping, visual design, development and testing phases of the project.
Following on from the creation of our personas, we began to develop those personas further by expanding them into mental models of their journeys both on and offline to identify opportunities for innovation to feed into the overall digital strategy. The models were also used to guide the creation of the site map and wireframes by referencing them to see what sort of content users required to complete specific tasks.
Detailed, annotated wireframes were produced for both the desktop and mobile versions of the site which became the blueprint for the components that we would create later on in the process and detailed key functionality.
One of the key learnings of our discovery phase was that users relate and feel closer to individual care centers rather than the charity as a whole – more on that later.
Creating a Visual Language
From a visual design perspective, Sue Ryder has just gone through an extensive re-branding exercise and out job was to bring that alive online. Working closely with the brand agency, we translated the offline guidelines online and then developed them further with additional iconography and more.
This allowed us to create a detailed style guide and visual language document as we went through the design process. With large projects such as this that are split into multiple phases these documents prove an invaluable resource for making sure that, as is key in user centered design, buttons, headings, links, etc. are all consistent throughout the site. This also means we check that each module or component works independently e.g. does the navigation act & feel like navigation: is this form clearly labeled? Is the body copy large enough to read?
The visual language meant we were able to quickly identify shared components that could be easily translated into the CMS and be worked together to create a range of templates without them all having to be designed individually.
In essence, we use user centered design to create digital products that are intuitive and delightful for users without them having to change their behaviour or break their mental models in order to understand how to use it.
Technology & Features
The new website is built upon the award-winning, enterprise-level Sitecore CMS platform. Alongside Sitecore, there are multiple systems and applications integrated with the Sue Ryder website. The data from users who sign up or donate is passed to the Care CRM; the site is integrated with a postcode look up service to serve relevant data based on location. SagePay and Rapidata are used to process one-off and direct debit transactions respectively.
Cybertill, an EPoS and commerce system is used to power the shop section of the site. iTrent, a workforce management system is used to manage job applications and vacancies. Additional bespoke .net applications were created to help manage volunteering applications and crucially, the large range of events that Sue Ryder run or attend each year.
Component Based Approach
We developed Sitecore using a component based approach which means that Sue Ryder are in total control of the layout of their pages (using pre-defined components), making the site a content management dream.
Forms can also be easily added without any technical intervention needed using Sitecore’s powerful form builder tool.
We have developed a mobile site that also personalizes content based on location. All of the site components have mobile optimised versions that are handled by Sitecore and populated by the main content database. Content can be different between the mobile and desktop sites, catering for different user journeys. This provides a robust mobile solution that can be easily updated by Sue Ryder’s content editors whilst delivering a first class user experience.
As we mentioned earlier from our research we learned that a potential supporter is more likely to get give their support if they can see the benefits to their local community. With that in mind the new Sue Ryder site delivers localised content (in both desktop and mobile versions) at all points of the user journey. Using the GeoLocation API we can identify a users location and serve them content appropriate to them. A user can change their location if they wish, but generally they will see news, events, shops, fundraising content that is relevant to the care centre near them that they already have a relationship with rather than national content. This takes place on the homepage and throughout the site in various areas, including an aggregated ‘local homepage’ for each care centre.