23rd May 2022 Noise Solution x Experience Consulting
Thank you for the opportunity to collaborate and take some of the first steps on this journey to realise the ambition of Noise Solution with you. It’s been a pleasure to work together and we look forward to seeing our thinking come to life.
Jordan Chan Visual Designer
Mikey Dilworth Brand Designer
Bex Petts Davies Brand Designer
Abbie Truman Experience Designer
Lauren Pleydell-Pearce Exec Creative Director
Kirstie Wilson Engagement Lead
Jon Bold Salesforce Support
Amar Thaker Experience Strategist
Brad Krom Experience Designer
The purpose
01
Define the future brand strategy that will sit at the heart of the organisation and support future decision-making
02
Craft a new identity to support the development of a refreshed look and feel which represents the new brand positioning
03
Design a new digital experience, bringing together brand, design, usability and function to form a distinctive and coherent user experience
“People won’t remember what you said or did, they will remember how you made them feel.”
Maya Angelou Poet, 1928-2014
Brand strategy
The future brand strategy that will sit at the heart of the organisation and support future decision-making.
What is a brand strategy, and how can it be used?
The main goal of a branding strategy is to let the world know that your brand exists, what purpose it has, and what defines it.
With branding in place, you can:
● Easily keep touchpoints, materials and messaging consistent and make decisions more quickly when it comes to your experience. (Save you money and time in the long run.)
● Introduce new products and services, based on a clear strategy that is in line with your brand’s mission and goals.
● Attract the ideal organisations, commissioners, and professional workers for you to engage, differentiate from your peers, and increase recommendations
● Increase emotional value by gaining and growing trust and credibility with your audience – consumers, employees, organisations, partners and more
● Demonstrate the values that you hold dear, that consumers would engage with and relate with, and push them further to engagement
● Allow you to link your employee engagement to your core purpose, so as a result, employees feel more engaged, work harder for your brand’s success, and become great ambassadors for your brand.
“A brand is the set of expectations, memories, stories and relationships that, taken together, account for a consumer’s decision to choose one product or service over another.”
Seth Godin Best Selling Author, Entrepreneur
Vision ‘The What’
A better way to support individuals that need it most, improving their lives and encouraging positive change.
Values ‘Core beliefs’ Change, Impact, Integrity, Fun
Purpose ‘The Why’
For people to be seen as individuals, not problems
Mission ‘The How’
To create the conditions for individuals to transform how they see themselves and their world, through autonomy, competence and relatedness. By doing so we inspire others to do better.
Purpose ‘The Why’ Brand strategy
Being recognised
Being valued
Being celebrated
Being accepted
For people to be seen as individuals, not problems
Those that
Are unique
Don’t conform to the cookie cutter approach
Bouncing around services
Falling between the gaps
Are in challenging circumstances
Being underserved by the system in the right way for them
Vision ‘The What’
A better way to support individuals that need it most, improving their lives and encouraging positive change.
Mission ‘The How’
To create the conditions for individuals to transform how they see themselves and their world, through autonomy, competence and relatedness.
Values ‘Core beliefs’
Change
We believe positive change is important, but recognise and value that sometimes it is big, and sometimes it is small.
Impact
We believe in a well-evidenced approach to improving engagement, health, educational and social outcomes.
Integrity
We believe in doing the right thing for the individual, and never putting up with BS* when we know there is a better way.
Fun
* Being arsey when you need to be
We believe in creating a safe and encouraging environment, and strive for every interaction to be fun, genuine, and mutually respectful.
Personality ‘If Noise Solution was a person’
Trusted
Genuine
Always informed and credible, we’re the ‘go to person’ who will not let you down. We’re here when you need us the most, dependable and reliable, we’re trusted to always do the right thing.
We’re honest, and deal with things pragmatically, with the well-being of the individual in mind. We’re comfortable with who we are, and know that some people will like us, and some won’t. And we’re OK with that.
Informal
Inclusive
Easy-going, colloquial, we’re playful at times but never flippant. We strive to be affable and approachable, always taking a strength-based approach to create positive environments.
We’re non-judgemental, and respectful of different perspectives, and experiences. We understand that true collaboration requires mutual respect, an open mind, and willingness to listen without a preconceived opinion.
Identity
Archetypes
Archetypes
Benefits and top tips
An archetype is a method in which to bring a a series of emotions, wants and needs to life.
It is a combination of elements that we understand to be true of a certain character or group of people.
In the following 2 slides, you will find 5 core archetypes, representing the key audiences outlined in our discussions.
Each archetype includes a brief summary of the type of individual you would expect to find, highlighting what drives them, their expectations and what is important to them.
In addition, you will find a high-level overview of what each archetype presumably wants to take away from their engagement with the Noise Solution website as well as the content that would be of most interest to them and their needs.
Archetypes: Part 1
Participant
Sitting across a broad range of ages, the majority of those involved with NS are on a negative well being trajectory, with a 60:40, male:female split. They would most likely be guided through their first engagement with Noise Solution but would not visit the website directly.
Key content and takeaways:
● Personalised introductions from their musicians.
● To feel interested in the process and activities.
● Reassurance that Noise Solution are not just another set of social workers who they do not identify with.
Carer
A collation of family, friends and extended support networks, the Carer can feel concerned, tired, frustrated (with their experiences with local support) and somewhat hopeful. They would be directed to the site by professional a or their team lead (who may be incharge of funding).
Key content and takeaways:
● A great first experience with Noise Solution, highlighting how responsive the team are and how fun the experience can be.
● Reassurance and evidence that NS are different from the others they have already dealt with.
Commissioner
Commissioners represent local councils and government bodies who are looking for sustainable savings with a long term positive trajectory. They are (in most cases) responsible for funding the courses for participants and are often looking for reliable and responsive partners.
Key content and takeaways:
● Evidence of the impact Noise solution have and credentials to support this.
● An easy process which saves them time as they are time poor and have many organisations to review and consider.
Archetypes: Part 2
Professional
Key workers, social workers and mental health professionals are responsible for making the first referral for a participant. They like to be involved with the process, receiving weekly updates on the participant’s progress (e.g. reports and calendar schedules).
Key content and takeaways
● They need to see that the participant is having a great experience.
● To be kept up to date with the participant’s progress.
● Convenient and easy communication.
Musician
A musician will often act as a youth worker whilst sharing their authentic talents and musical skills. They are heavily involved with the participant's progress over the course of the programme and are responsible for writing regular reports on sessions.
Key content and takeaways
● Transparency on the participants experience, ensuring that they have the best time possible
● Require ownership of the impact they are having on the participant they support.
● It is important that they stay in the feedback loop between all parties involved.
Archetypes
Common requirements
Each audience archetype, whilst having a broad range of requirements, share common needs when engaging with Noise Solution, whether directly (the website) or indirectly (through a third party referral).
● Clarity on who Noise Solution are and what they provide, specifically on how they differ from alternative organisations available (locally and nationally).
● Reassurance that Noise Solution is the right investment of funds, time and emotional connection.
● Empathy and understanding of the situation that the audience member faces.
● Confirmation of what they can do next to get involved, whether that be to work with or for the organisation.
Image Nitrolicious
UX best practice
UX design ‘Core principles’
Simplicity and clarity
Clear and simple to understand content and layout will reduce users trying to figure out how to use your website. Don't clutter the page to show all the information and give too many choices to the user. Example:
Only show the key information on the homepage so it is highly usable for the majority of users and allow for extra functionality to be hidden and made discoverable as it is needed
Consistency and familiarity
Use familiar design patterns so that users know how to navigate your site right away and ensure all your pages look, feel and work the same way.
Hierarchy
Structure the page while thinking about what is the most and least important and then highlight the more important content so that users focus on it.
Example:
Keep your navigation system simple and follow tried and tested design pattern so that your site is immediately easy to navigate .
Example:
Make important content larger than anything else on the screen.
Readability and engagement
Understanding how to format copy on a website will have a big impact on engaging with you audience, key to understanding this is knowing how long a line of copy should be.
Many people find long lines of text on a website intimidating and will just not bother to read. If they do you run the risk of giving them eye fatigue and losing their engagement.
If lines are too short you will end up breaking up words or phrases that need to be read as a unit, running the risk of them losing meaning for longer paragraphs.
Key takeaways
● Aim to keep sentences between 50 -75 characters per line.
● Keep paragraphs between 6 - 8 lines or 3 - 5 sentences,
● Set your spacing to 1.5 for better readability,
● Use capital letters sensibly, All caps sentences take longer and more effort to read.
Top tip
Sentences in the 50-75 character length are optimal for readability
Video content
To engage an audience there is no better tool than video. When done well they are some of the best tools to tell a story.
Key takeaways
● If a video contains important information make sure it is also presented as text on the page. Video is great for storytelling but is not good for quick skimming of information
● Viewers engage heaviest with shorter videos. For promotional pieces try keep videos to around 2 minutes
● For longer more informative pieces try keep videos to between 6-12 minutes
● Don't hide your content! Keep your videos at the top of your site and easy to navigate to
UX
Buttons
Buttons, or a “Call to Action” (CTA’s) help your users navigate your site and let them know what to do and what things can be done on your website.
Understanding the best way to use buttons will make your website easier to navigate.
Key takeaways
● Make buttons look like buttons and make sure they stand out from other parts of the website.
● Place buttons in places that are easy to see so that no one has to go looking around to get actions done.
● Buttons have hierarchy, just like a title and a subtitle. Make sure the most important action buttons look more important.
● Size matters. Don't make buttons too small for people to tap. As a general rule 44 pixels (iOS standard) or 48 pixels (Google standard) are goods sizes to use.
● A button’s label should clearly describe what it does.
Source
Top tip
Buttons on this screen are clearly labeled to what they do, they look like a button and have clear hierarchy as to what is the more important button
Data visualisations
Data visualisation is the representation of data or information in a graph. When done well it has the power to show key and complex information at a glance.
Taking quantitative and visualising it can help tell your story in powerful and meaningful ways. With one simple chart you are able to say more than in multiple lines of text. But without some thinking beforehand you can risk ruining your data through bad design
Key takeaways
● Make sure to pick the right chart to show the type of information you would like to display.
● Don't try show too much on one graph. Using too much data can make the chart become meaningless to most viewers.
● Sometimes a simple statistic can be more powerful than a graph. 20 ideas for better data visualisations
UX visualisation mistakes
Top tip
Keep visualisations simple and representative of one key takeaway, ensuring you don’t try to show too much information at one time in a graphic.
Material Design
If you have any questions on practical best practices in the future, a great place to start is Google’s Material Design.
Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material Design streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.
So have a look if you have any questions on how you can improve your experience for:
● Accessibly
● Understanding layout
● Adaptive design
● Components
● Blog
Public site experience
Public site navigation
Navigation plays an integral role in how users interact and engage with digital products and getting it right helps to create a seamless experience.
Site Map
A sitemap formulates and structures a websites navigation, acting as a hierarchical diagram that represents the categorisation and grouping of pages and content.
Footer
If a user scrolls through the entirety of a page and still cannot find what they are looking for, your footer becomes a safety valve. It is the last chance to capture the user before they give up and take their clicks elsewhere.
A footer should include the fundamental components of the site that everyone needs and any information that is relevant to only a small subsection of visitors, such as the “Media centre”.
Template example: Homepage
View Figma Design File
Template example: Our approach
View Figma Design File
Template example: Our approach
View Figma Design File
Template example: Our impact
View Figma Design File
Public site experience
Referral form recommendations
The referral form should capture mandatory information in order to begin a participants journey with Noise Solution. The following recommendations aim to improve the ease of completion as well as the quality of the referrals.
About you
● Rename this ‘referrer details’.
● Change first field to ‘company’ or ‘self funded’, followed by invoice details.
● Increase the clarity of the messaging so that it is clear the information is about the individual completing the form and not the intended participant of the programme.
● Move the questions about session times into participant details.
● Remove the question about hopes for the programme as this is a repeat and will come later on in the form.
Participant details
Remove either ‘phone’ or ‘mobile’ as only one is needed.
Participant strengths
● Rename this ‘participant interests’
● Add the question about music genre preferences and turn component into multi-select checkboxes.
● Add copy or explain via input hint the importance of filling out the strengths / weaknesses questions to increase the quality of the answers.
Need to know
● If ‘yes’ is selected for any of the safeguarding questions, make the details field below mandatory.
Funding
● Remove as already covered in first step.
Emergency Contacts
● Error state is not triggered correctly. For example, phone number should have 11 digits, anything different should be an error.
Anything else
● Remove step and add this one question into the ‘participant details’ step.
Public site experience
Visualforce
The next challenge is to help translate the new brand into Visualforce.
Visualforce is the framework that enables custom user interfaces to be hosted natively on the Lightning platform. Here are some (hopefully) useful links:
● Templating in Visualforce to enable the reuse of components across pages.
● Overriding Visualforce adding answer provided by a forum.
● Collapsible and expandable section sample code.
● Tabs
● Responsive design and grid system uses SLDS grid system.
Trailhead is also a great place to learn Salesforce if you haven’t explored it yet:
● Visualforce basics
Image Nitrolicious
MyStream experience
MyStream
‘MyStream’ site map
MyStream has many different user types and will therefore require a level of personalisation.
This means the navigation labels will stay consistent for all users, and the personalisation will happen on the content level only.
MyStream experience
Dashboard vs. landing
A landing page, homepage and dashboard all sound the similar but all have very different meanings.
A homepage is more general, landing pages are focused and dashboard displays show an at-glance view of content. Customer accounts normally have a dashboard to provide an overview of their access, activity, news etc.There are a few of quick wins that we can look into drive towards this experience:
● Provide context to CTAs (call to actions = buttons) e.g. ‘My groups’ CTA in the hero is currently solo, for first time users this could be quite confusing. It would be great to explain to each archetype what ‘My groups’ is and what they can do.
● Tailor copy for each archetype e.g. Each role’s dashboard provide an introduction that is specific to their interactions and how they can get the most out of the service.
● Look at different salesforce or content components that could be beneficial to each archetype on their ‘tailored dashboard’ such as news, calendar, last posted video, welcome video.
MyStream experience
Onboarding
Encouraging those to open their emails and click on a button to register is a lot harder than it sounds but the key is to focus the user into one decision.
In regards to the first welcome email, we can trial a number of quick wins to see if there is improvement.
● First off all don’t tell your audience to ignore a different email in the email they are reading.
● Reduce the amount of copy:
○ A welcome sentence introducing Noise Solution
○ A tailored 1-2 sentences to each role on the purpose, importance and functionality.
● Remove the video as this will bring the CTA (call to action = button) above the fold, into view and keep the users focus on registering. This video then can live on either their home landing or be sent as a follow up email after sign up.
MyStream experience My groups
As we all know ‘My Groups’ is not the ideal name for this piece of functionality, though the key is providing the explanation behind it for each archetype. We can also execute these quick wins:
● Remove right hand panel of all videos as duplication of the feed and creates unnecessary noise and distraction.
● If a user has one group let's see if we can the navigation link to the specific group.
● Rename the feedback tab to questionnaire as already a feedback widget
● ‘Start here’ content moving to FAQ section we can direct the user here through content. User can be directed here by the
MyStream experience FAQs
FAQs is a page that gives quick answers to questions. The idea is to keep the answers short and direct so that people find information quickly.
In our case, we have a variety of pieces of content that can fit into a FAQ space to provided relevant details. The page content can then be tailored to the role assigned to them to meet their needs and questions.
Examples of content to include:
● How to get started
● What to expect by a session
● The importance of engagement
● Tech support
● Safeguarding
FAQ best practices
How to create Accordions in visualforce?
Photo
MyStream experience Push notifications
Push notifications are messages that can be sent directly to a user's mobile device.
We recommend that we swap this functionality in for the current notifications section (behind the bell icon) to encourage engagement with ‘My Groups’. We can use them to build audience relationships and get specific archetypes engaged with their group/s.
To get the most out of push notifications, they should be:
● It’s relevant and timely: The user’s behavior, location, or preference triggers the notification.
● It’s personal: The content of the push appeals to the user as an individual.
● It’s actionable: The push makes it clear what the user should do next.
How to design motivating push notifications
Salesforce link
MyStream experience Domains
Our challenge is that we are having issues with strict Domain restrictions in care homes and schools.
Check if you are using Email Relay.
The emails would be routed out through the client's Mail Exchange servers, so they would have control over destination domain filtering and deliverability i.e. whitelisting/blacklisting domains to which emails can be sent.
Without Email Relay, you would have to implement custom validation in Salesforce as part of the Flows or perhaps on the Enhanced Email records that get created as a result (if the emails are sent using the standard composer).
We recommend you looking at the following links:
Set up email relay
Allow the required Domains
Image Nitrolicious
Workshop outputs
Our thoughts captured on the day
Purpose ‘The Why’ Workshop
To provide effective support to young people in the moment they need it most (and how they need it)
Create a world where we make the lives of young people and their families / community better.
To improve the lives of young people and their families
A breath of fresh air
To break the cycle.
Parents exhausted from systems, nowhere to turn to.
Everything else was so shit / We can do this better and make a difference.
To do better for young people
Vision ‘The What’ Workshop
A positive story
International impact (National first)
Being valued
Strength based ‘Back in control of their destiny’
A world where young people feel seen, and are back in control of their destiny
Mission ‘The How Workshop
Our mission is to create the conditions for young people to flourish.
Our mission is to transform lives through autonomy, competence, and relatedness
Digital stories / narrative
Reconnection
Our mission is to change the way young people see themselves, and the world.
Our mission is to remove the barriers, and red tape stopping young people from being themselves.
Community
Values Core beliefs
Individuality / Uniqueness
True co-creation (collaborative) sentiment but not wordage
Importance of fun / play
Personality If NS was a person
Our thoughts captured on the day
Our thoughts captured on the day
Our thoughts captured on the day
Look and feel Workshop
Yes
Typography
1. Bold, sans serif typography
2. Something confident and expressive
Colour
1. Black with accents of colour
2. Bold colours but used in a clean way
3. More black than white
4. Ungendered colour, universal appeal
Photography
1. Real, expressive imagery of people
2. Close up portraits
Art Direction
1. Clean lines, sharp shapes
2. Combining formality with informality
3. Mixed media
4. Something that feels contemporary without being cliche for a young audience
5. Needs to look professional for the commissioner audience whilst being intriguing for the younger audience
No
Typography
1. Fiddly, delicate typography
2. Inaccessible type
Colour
1. Avoid the blue/teal trap
2. Nothing sterile that feels like a council website
3. Avoid the “therapy” look
Photography
1. Fake stock imagery
2. “Poor-nography”
3. Cliche imagery of young people
Direction
1. Anything that feels like illustrator 101
2. Nothing that feels clinical
Our thoughts captured on the day
Our thoughts captured on the day
Our thoughts captured on the day
“...all the interactions people have with a product, service, or organization; the raw material of a brand.”
