FIFA Has an Research for the Football Unrest
The NAMM Foundation is a non-profit organization full of dedicated staff and volunteers that work hard to promote the intrinsic value of music and music education. It's a fantastic cause and wonderful organization that does a lot of inspiring things in communities all across the United States.
The challenge and opportunity
Like many non-profit and philanthropic organizations, the NAMM Foundation has evolved over the years, steadily expanding its reach and impact. As the organization has grown, groups have emerged within and even joined the NAMM Foundation. While those organizational groups accomplish valuable goals for the NAMM Foundation, many of their audiences and goals overlap. As the NAMM Foundation has evolved, their website also has evolved. Content and sections have been added, often grouped by that content's relationship to internal groups or programs within the organization. This is natural, especially when a small team is responsible for a LOT of things. Websites can easily become a patch work quilt over time, frustrating the people who use them as well as the people who maintain them.
This was the situation for the team at the NAMM Foundation. Their organization had grown and their website had done its best to keep up, but was in need of some love. They wanted to radically rethink their website, focus on the questions and needs of their audience, and further the reach and impact of the time they spent maintaining it. Our team at Lullabot was excited to partner with them to help make that happen!
Laying the foundation
We began our work with the NAMM Foundation with lean research and planning. We headed out to sunny Carlsbad, California to spend a week with their team, learning the ins and outs of their organization, their content, and the people they serve. The project team included designers, developers, a content and digital strategist from Lullabot, as well as content creators and leaders from within the NAMM Foundation. During our one week workshop we focused on understanding and documenting following things:
The core purpose for the project
The audience (or audiences) and their needs
The content, it's structure and its hierarchy
The brand and its values, voice, characteristics and style
We assembled designers, developers, product owners, content creators, site users, and stakeholders for a rigorous but fun few days of interviews and exercises. We used a combination of user interviews, card sorting exercises, white board design explorations, metaphor games, as well as lots of conversation and collaboration. It was an extremely full, fun and valuable week that helped everyone understand the problems we were solving and the people we were solving them for.
The result of the work was a number of lightweight tools to help inspire, evaluate, and focus our design ideas as we moved forward. By the end of our workshop we had€¦
identified specific business goals and ways of measuring our success in meeting them
targeted specific frustrations and pain points that users and creators were battling
created a simple purpose statement that provided a foundational vision for all of our work
established four simple design principles to help provide focus and clarity to our efforts
created light-weight personas that helped clarify the audiences we were designing for and their needs, values and behaviors
identified a hierarchy of needs for each persona
identified the content structure and created an initial content architecture and model to work from
uncovered specific content that already existed and was of great value to multiple audiences but was not being leveraged well
identified helpful metaphors for understanding the personality and voice of the NAMM Foundation
established a design process that truly involved the entire team of designers, strategists, developers, content creators, product owners and organizational leaders
These research and planning artifacts aren't €deliverables€ we made to impress a client. They are the tools our team uses to guide and shape our work. Our team of strategists, designers and developers use and refer to these tools to measure our progress towards the project's goals. They're as light-weight and brief as possible, so we can read and talk about them whenever we review and evaluate evolving design ideas.
Exploring possibilities: structure and layout
Armed with all these tools, we began exploring possibilities. We explored structural, architectural and layout approaches with wireframe sketches, then turned those sketches into working HTML wireframes. The HTML wireframes allowed us to test our responsive design ideas directly in a browser, and gave the product owners a simple way to review our work and provide feedback.
Exploring possibilities: style
We explored ideas for the visual language by producing simple style tiles with examples of components that would exist on the actual site.
During the metaphor games, we identified Herbie Handcock as a personification of the personality and feel of the NAMM Foundation brand. While doing some research we were really drawn to Herbie's blue note jazz ablums of the mid 20th century. The album art that came out of that series of jazz albums seemed to really fit the words we were using to describe the NAMM Foundation's brand.
We took the blue note jazz album art inspiration and created a style tile that applied that kind of visual language to example components and messaging from the NAMM Foundation website.
A brand new NAMM Foundation website
After establishing the site's architecture and layout through wireframing, and the visual language in style tiles, we implemented the new design system across all the pages and component types in our new system. The working wireframes became fully styled examples of the complete design system for the new NAMM Foundation website. Our developers then worked with a team from the NAMM Foundation to implement this new design system in their CMS (Drupal).
Special thanks
We're proud of the work we did and what was achieved with the NAMM Foundation (see a before image of the NAMM Foundation website prior to the redesign). However, radically rethinking an existing website in a short timeframe requires more than just the effort and expertise our Lullabot team brought to the project. We had the privilege of working with an amazing team from the NAMM Foundation, one that was fully engaged in the process with us from the outset. Their care, intelligence, forward thinking and openness helped make the project a success. Thanks so much to Dan, Mary, Sharon, Eric, Stuart, Adam, Jay and the rest of the NAMM Foundation team for making this such a rewarding project to work on!
The challenge and opportunity
Like many non-profit and philanthropic organizations, the NAMM Foundation has evolved over the years, steadily expanding its reach and impact. As the organization has grown, groups have emerged within and even joined the NAMM Foundation. While those organizational groups accomplish valuable goals for the NAMM Foundation, many of their audiences and goals overlap. As the NAMM Foundation has evolved, their website also has evolved. Content and sections have been added, often grouped by that content's relationship to internal groups or programs within the organization. This is natural, especially when a small team is responsible for a LOT of things. Websites can easily become a patch work quilt over time, frustrating the people who use them as well as the people who maintain them.
This was the situation for the team at the NAMM Foundation. Their organization had grown and their website had done its best to keep up, but was in need of some love. They wanted to radically rethink their website, focus on the questions and needs of their audience, and further the reach and impact of the time they spent maintaining it. Our team at Lullabot was excited to partner with them to help make that happen!
Laying the foundation
We began our work with the NAMM Foundation with lean research and planning. We headed out to sunny Carlsbad, California to spend a week with their team, learning the ins and outs of their organization, their content, and the people they serve. The project team included designers, developers, a content and digital strategist from Lullabot, as well as content creators and leaders from within the NAMM Foundation. During our one week workshop we focused on understanding and documenting following things:
The core purpose for the project
The audience (or audiences) and their needs
The content, it's structure and its hierarchy
The brand and its values, voice, characteristics and style
We assembled designers, developers, product owners, content creators, site users, and stakeholders for a rigorous but fun few days of interviews and exercises. We used a combination of user interviews, card sorting exercises, white board design explorations, metaphor games, as well as lots of conversation and collaboration. It was an extremely full, fun and valuable week that helped everyone understand the problems we were solving and the people we were solving them for.
The result of the work was a number of lightweight tools to help inspire, evaluate, and focus our design ideas as we moved forward. By the end of our workshop we had€¦
identified specific business goals and ways of measuring our success in meeting them
targeted specific frustrations and pain points that users and creators were battling
created a simple purpose statement that provided a foundational vision for all of our work
established four simple design principles to help provide focus and clarity to our efforts
created light-weight personas that helped clarify the audiences we were designing for and their needs, values and behaviors
identified a hierarchy of needs for each persona
identified the content structure and created an initial content architecture and model to work from
uncovered specific content that already existed and was of great value to multiple audiences but was not being leveraged well
identified helpful metaphors for understanding the personality and voice of the NAMM Foundation
established a design process that truly involved the entire team of designers, strategists, developers, content creators, product owners and organizational leaders
These research and planning artifacts aren't €deliverables€ we made to impress a client. They are the tools our team uses to guide and shape our work. Our team of strategists, designers and developers use and refer to these tools to measure our progress towards the project's goals. They're as light-weight and brief as possible, so we can read and talk about them whenever we review and evaluate evolving design ideas.
Exploring possibilities: structure and layout
Armed with all these tools, we began exploring possibilities. We explored structural, architectural and layout approaches with wireframe sketches, then turned those sketches into working HTML wireframes. The HTML wireframes allowed us to test our responsive design ideas directly in a browser, and gave the product owners a simple way to review our work and provide feedback.
Exploring possibilities: style
We explored ideas for the visual language by producing simple style tiles with examples of components that would exist on the actual site.
During the metaphor games, we identified Herbie Handcock as a personification of the personality and feel of the NAMM Foundation brand. While doing some research we were really drawn to Herbie's blue note jazz ablums of the mid 20th century. The album art that came out of that series of jazz albums seemed to really fit the words we were using to describe the NAMM Foundation's brand.
We took the blue note jazz album art inspiration and created a style tile that applied that kind of visual language to example components and messaging from the NAMM Foundation website.
A brand new NAMM Foundation website
After establishing the site's architecture and layout through wireframing, and the visual language in style tiles, we implemented the new design system across all the pages and component types in our new system. The working wireframes became fully styled examples of the complete design system for the new NAMM Foundation website. Our developers then worked with a team from the NAMM Foundation to implement this new design system in their CMS (Drupal).
Special thanks
We're proud of the work we did and what was achieved with the NAMM Foundation (see a before image of the NAMM Foundation website prior to the redesign). However, radically rethinking an existing website in a short timeframe requires more than just the effort and expertise our Lullabot team brought to the project. We had the privilege of working with an amazing team from the NAMM Foundation, one that was fully engaged in the process with us from the outset. Their care, intelligence, forward thinking and openness helped make the project a success. Thanks so much to Dan, Mary, Sharon, Eric, Stuart, Adam, Jay and the rest of the NAMM Foundation team for making this such a rewarding project to work on!
Source...