Projects

LAST UPDATE ✦ 2024

©DALJJONEILLDESIGN

Safer Nightlife Campaign

UX Design

UI Design

Framer

Logo

soundOUT

soundOUT

soundOUT

Client

Client

FDYS

FDYS

Service

Service

Campaign Design

Campaign Design

Year

Year

2024

2024

Introduction

Introduction

SoundOut is an initiative by the Wexford Community Based Drugs Initiative (CBDI) to promote safer and more enjoyable nightlife experiences. The website serves as a hub for resources, information, and support related to substance use, personal safety, and community wellbeing.

SoundOut is an initiative by the Wexford Community Based Drugs Initiative (CBDI) to promote safer and more enjoyable nightlife experiences. The website serves as a hub for resources, information, and support related to substance use, personal safety, and community wellbeing.

UX Objectives:

  • Create a clear, user-friendly information architecture to help visitors easily navigate and find relevant content

  • Develop an engaging, visually-appealing design that aligns with the brand's approachable and empowering tone

  • Optimise the website for seamless accessibility and usability across desktop and mobile devices

  • Implement intuitive way finding and CTAs to guide users towards taking actionable steps to improve their nightlife experiences


Research

The project kicked off with comprehensive user research, including surveys, interviews, and competitive analysis. Insights revealed key issues, such as confusing interfaces, overwhelming information, and a lack of tailored content.


UX Challenges:

  • The website covers a wide range of sensitive topics related to substance use, personal safety, and mental health - the design and content needed to be thoughtfully crafted to be supportive and non-judgmental

  • The target audience includes a diverse group of users, from young nightlife-goers to community support workers, each with varying levels of familiarity with the subject matter

  • The website needed to balance providing comprehensive information with maintaining a clean, uncluttered layout that doesn't overwhelm users


Key UX Improvements:

  • Restructured the information architecture to group content into clear, user-focused categories (e.g. "Prepare", "Be Sound", "Stay Sound")

  • Designed an visual identity with warm, approachable color palette and friendly iconography to cultivate a welcoming atmosphere

  • Implemented responsive design principles to ensure seamless accessibility and usability across devices

  • Strategically placed CTAs and clear navigational elements to guide users towards taking desired actions (e.g. accessing support resources, learning intervention techniques)

  • Incorporated accessibility best practices, such as proper colour contrast, semantic HTML, and keyboard navigation, to cater to users with varying abilities


Design Process

  1. Ideation and Wireframing: Building on the research findings, initial wireframes were crafted to enhance navigation and simplify the user journey, allowing for rapid feedback and adjustments.

  2. User Flows: Ideal user flows were mapped out to illustrate the paths users would take to access resources, such as finding safe transportation or discovering local events. This step helped pinpoint potential obstacles and areas for improvement.

  3. UI Design: With user flows established, the UI design phase commenced. A fresh, vibrant color palette was selected to replace outdated elements. Larger visuals and increased white space improved readability and overall attractiveness.

  4. Interactive Prototyping: Prototypes were developed using tools like Sketch and InVision, providing stakeholders with a tangible experience of the redesigned app's functionality and interactions.

  5. User Testing: The prototypes underwent usability testing with real users. Feedback indicated areas needing refinement, such as clarifying icons and simplifying navigation for quick access to key information.

  6. Iteration and Finalisation: User feedback was incorporated, leading to iterative design enhancements. Micro-interactions were added to foster a more engaging and responsive experience. The final design was captured in a detailed style guide.


Conclusion

The new SoundOut website has received positive feedback from both regular users and new visitors. The clean, intuitive layout and supportive tone have helped lower barriers to accessing important information and resources. Analytics data shows increased engagement, with users spending more time on the site and converting at higher rates on key actions. Overall, through thorough research, iterative design, and user testing, the campaign effectively transformed into a more interactive and user-friendly platform, ultimately fostering an engaged community committed to safer nightlife.

UX Objectives:

  • Create a clear, user-friendly information architecture to help visitors easily navigate and find relevant content

  • Develop an engaging, visually-appealing design that aligns with the brand's approachable and empowering tone

  • Optimise the website for seamless accessibility and usability across desktop and mobile devices

  • Implement intuitive way finding and CTAs to guide users towards taking actionable steps to improve their nightlife experiences


Research

The project kicked off with comprehensive user research, including surveys, interviews, and competitive analysis. Insights revealed key issues, such as confusing interfaces, overwhelming information, and a lack of tailored content.


UX Challenges:

  • The website covers a wide range of sensitive topics related to substance use, personal safety, and mental health - the design and content needed to be thoughtfully crafted to be supportive and non-judgmental

  • The target audience includes a diverse group of users, from young nightlife-goers to community support workers, each with varying levels of familiarity with the subject matter

  • The website needed to balance providing comprehensive information with maintaining a clean, uncluttered layout that doesn't overwhelm users


Key UX Improvements:

  • Restructured the information architecture to group content into clear, user-focused categories (e.g. "Prepare", "Be Sound", "Stay Sound")

  • Designed an visual identity with warm, approachable color palette and friendly iconography to cultivate a welcoming atmosphere

  • Implemented responsive design principles to ensure seamless accessibility and usability across devices

  • Strategically placed CTAs and clear navigational elements to guide users towards taking desired actions (e.g. accessing support resources, learning intervention techniques)

  • Incorporated accessibility best practices, such as proper colour contrast, semantic HTML, and keyboard navigation, to cater to users with varying abilities


Design Process

  1. Ideation and Wireframing: Building on the research findings, initial wireframes were crafted to enhance navigation and simplify the user journey, allowing for rapid feedback and adjustments.

  2. User Flows: Ideal user flows were mapped out to illustrate the paths users would take to access resources, such as finding safe transportation or discovering local events. This step helped pinpoint potential obstacles and areas for improvement.

  3. UI Design: With user flows established, the UI design phase commenced. A fresh, vibrant color palette was selected to replace outdated elements. Larger visuals and increased white space improved readability and overall attractiveness.

  4. Interactive Prototyping: Prototypes were developed using tools like Sketch and InVision, providing stakeholders with a tangible experience of the redesigned app's functionality and interactions.

  5. User Testing: The prototypes underwent usability testing with real users. Feedback indicated areas needing refinement, such as clarifying icons and simplifying navigation for quick access to key information.

  6. Iteration and Finalisation: User feedback was incorporated, leading to iterative design enhancements. Micro-interactions were added to foster a more engaging and responsive experience. The final design was captured in a detailed style guide.


Conclusion

The new SoundOut website has received positive feedback from both regular users and new visitors. The clean, intuitive layout and supportive tone have helped lower barriers to accessing important information and resources. Analytics data shows increased engagement, with users spending more time on the site and converting at higher rates on key actions. Overall, through thorough research, iterative design, and user testing, the campaign effectively transformed into a more interactive and user-friendly platform, ultimately fostering an engaged community committed to safer nightlife.

UX Objectives:

  • Create a clear, user-friendly information architecture to help visitors easily navigate and find relevant content

  • Develop an engaging, visually-appealing design that aligns with the brand's approachable and empowering tone

  • Optimise the website for seamless accessibility and usability across desktop and mobile devices

  • Implement intuitive way finding and CTAs to guide users towards taking actionable steps to improve their nightlife experiences


Research

The project kicked off with comprehensive user research, including surveys, interviews, and competitive analysis. Insights revealed key issues, such as confusing interfaces, overwhelming information, and a lack of tailored content.


UX Challenges:

  • The website covers a wide range of sensitive topics related to substance use, personal safety, and mental health - the design and content needed to be thoughtfully crafted to be supportive and non-judgmental

  • The target audience includes a diverse group of users, from young nightlife-goers to community support workers, each with varying levels of familiarity with the subject matter

  • The website needed to balance providing comprehensive information with maintaining a clean, uncluttered layout that doesn't overwhelm users


Key UX Improvements:

  • Restructured the information architecture to group content into clear, user-focused categories (e.g. "Prepare", "Be Sound", "Stay Sound")

  • Designed an visual identity with warm, approachable color palette and friendly iconography to cultivate a welcoming atmosphere

  • Implemented responsive design principles to ensure seamless accessibility and usability across devices

  • Strategically placed CTAs and clear navigational elements to guide users towards taking desired actions (e.g. accessing support resources, learning intervention techniques)

  • Incorporated accessibility best practices, such as proper colour contrast, semantic HTML, and keyboard navigation, to cater to users with varying abilities


Design Process

  1. Ideation and Wireframing: Building on the research findings, initial wireframes were crafted to enhance navigation and simplify the user journey, allowing for rapid feedback and adjustments.

  2. User Flows: Ideal user flows were mapped out to illustrate the paths users would take to access resources, such as finding safe transportation or discovering local events. This step helped pinpoint potential obstacles and areas for improvement.

  3. UI Design: With user flows established, the UI design phase commenced. A fresh, vibrant color palette was selected to replace outdated elements. Larger visuals and increased white space improved readability and overall attractiveness.

  4. Interactive Prototyping: Prototypes were developed using tools like Sketch and InVision, providing stakeholders with a tangible experience of the redesigned app's functionality and interactions.

  5. User Testing: The prototypes underwent usability testing with real users. Feedback indicated areas needing refinement, such as clarifying icons and simplifying navigation for quick access to key information.

  6. Iteration and Finalisation: User feedback was incorporated, leading to iterative design enhancements. Micro-interactions were added to foster a more engaging and responsive experience. The final design was captured in a detailed style guide.


Conclusion

The new SoundOut website has received positive feedback from both regular users and new visitors. The clean, intuitive layout and supportive tone have helped lower barriers to accessing important information and resources. Analytics data shows increased engagement, with users spending more time on the site and converting at higher rates on key actions. Overall, through thorough research, iterative design, and user testing, the campaign effectively transformed into a more interactive and user-friendly platform, ultimately fostering an engaged community committed to safer nightlife.

UX Objectives:

  • Create a clear, user-friendly information architecture to help visitors easily navigate and find relevant content

  • Develop an engaging, visually-appealing design that aligns with the brand's approachable and empowering tone

  • Optimise the website for seamless accessibility and usability across desktop and mobile devices

  • Implement intuitive way finding and CTAs to guide users towards taking actionable steps to improve their nightlife experiences


Research

The project kicked off with comprehensive user research, including surveys, interviews, and competitive analysis. Insights revealed key issues, such as confusing interfaces, overwhelming information, and a lack of tailored content.


UX Challenges:

  • The website covers a wide range of sensitive topics related to substance use, personal safety, and mental health - the design and content needed to be thoughtfully crafted to be supportive and non-judgmental

  • The target audience includes a diverse group of users, from young nightlife-goers to community support workers, each with varying levels of familiarity with the subject matter

  • The website needed to balance providing comprehensive information with maintaining a clean, uncluttered layout that doesn't overwhelm users


Key UX Improvements:

  • Restructured the information architecture to group content into clear, user-focused categories (e.g. "Prepare", "Be Sound", "Stay Sound")

  • Designed an visual identity with warm, approachable color palette and friendly iconography to cultivate a welcoming atmosphere

  • Implemented responsive design principles to ensure seamless accessibility and usability across devices

  • Strategically placed CTAs and clear navigational elements to guide users towards taking desired actions (e.g. accessing support resources, learning intervention techniques)

  • Incorporated accessibility best practices, such as proper colour contrast, semantic HTML, and keyboard navigation, to cater to users with varying abilities


Design Process

  1. Ideation and Wireframing: Building on the research findings, initial wireframes were crafted to enhance navigation and simplify the user journey, allowing for rapid feedback and adjustments.

  2. User Flows: Ideal user flows were mapped out to illustrate the paths users would take to access resources, such as finding safe transportation or discovering local events. This step helped pinpoint potential obstacles and areas for improvement.

  3. UI Design: With user flows established, the UI design phase commenced. A fresh, vibrant color palette was selected to replace outdated elements. Larger visuals and increased white space improved readability and overall attractiveness.

  4. Interactive Prototyping: Prototypes were developed using tools like Sketch and InVision, providing stakeholders with a tangible experience of the redesigned app's functionality and interactions.

  5. User Testing: The prototypes underwent usability testing with real users. Feedback indicated areas needing refinement, such as clarifying icons and simplifying navigation for quick access to key information.

  6. Iteration and Finalisation: User feedback was incorporated, leading to iterative design enhancements. Micro-interactions were added to foster a more engaging and responsive experience. The final design was captured in a detailed style guide.


Conclusion

The new SoundOut website has received positive feedback from both regular users and new visitors. The clean, intuitive layout and supportive tone have helped lower barriers to accessing important information and resources. Analytics data shows increased engagement, with users spending more time on the site and converting at higher rates on key actions. Overall, through thorough research, iterative design, and user testing, the campaign effectively transformed into a more interactive and user-friendly platform, ultimately fostering an engaged community committed to safer nightlife.

Design Work

Design Work

Logo Design

Logo Design

Logo Design

The SoundOut logo design uses a bold, abstract wave pattern to convey a sense of energy and movement associated with the nightlife experience.

The SoundOut logo design uses a bold, abstract wave pattern to convey a sense of energy and movement associated with the nightlife experience.

Brand Guidelines

Brand Guidelines

Brand Guidelines

SoundOut's brand is centered on a welcoming, community-focused approach to safer nightlife.

SoundOut's brand is centered on a welcoming, community-focused approach to safer nightlife.

SoundOut's brand is centered on a welcoming, community-focused approach to safer nightlife.

View File

View File

View File

SEO

SEO

The SEO strategy for the SoundOut website focused on key areas, yielding tangible results:


1. Keyword Optimization

  • Targeted long-tail keywords like "safer nightlife tips," resulting in a 30% increase in organic search traffic.


2. On-Page Improvements

  • Enhanced title tags, meta descriptions, and header tags boosted click-through rates by 25%.


3. High-Quality Content

  • Regularly updated, informative content led to users spending 40% more time on the site.


4. Mobile Optimization

  • A fully responsive design improved mobile user engagement, contributing to a 50% increase in mobile traffic.


5. Local SEO

  • Optimised for local search, achieving a 15% rise in local visibility and community engagement.


6. Analytics Monitoring

  • Utilised Google Analytics to track metrics, enabling data-driven adjustments that improved overall site performance.


These efforts collectively enhanced the SoundOut website’s visibility, user experience, and community impact, making vital resources more accessible.

Get in touch

  • UI/UX Design

  • Copywriting

  • Design System

  • Responsive Design

  • Website Development

  • Typography

  • Technical Knowledge

  • Wireframing and Prototyping

  • daljjoneilldesign@gmail.com

Get in touch

  • UI/UX Design

  • Copywriting

  • Design System

  • Responsive Design

  • Website Development

  • Typography

  • Technical Knowledge

  • Wireframing and Prototyping

  • daljjoneilldesign@gmail.com

Get in touch

  • UI/UX Design

  • Copywriting

  • Design System

  • Responsive Design

  • Website Development

  • Typography

  • Technical Knowledge

  • Wireframing and Prototyping

  • daljjoneilldesign@gmail.com